Getting Started with Mean Stack

• Sample Application - 6.6 KB

Introduction

In this article we look into how simple or easy it is to write an application using Mean stack. For understanding this article or to write your first Mean stack application you will need basic understanding of Javascript. In this article we go step by step and build our first application using MongoDB (Back-End), Express.js (Middle-Layer), Angularjs (Front-End) and Node.js together know has MEAN.

I would like to get feedback on this article. Please feel free to share your comments or you can also email me atshettyashwin@outlook.com. If you like this article, please don't forget to rate it.

Using the code

Let’s get started. First and most important thing you need to install Node.js. You can download Nodejs from https://nodejs.org/en/ based upon your OS and processor (64 / 32 bit) choose the correct installer. Installer wizard will guide you with correct steps. To verify if you have successfully installed your node.js open a Command window (cmd in Windows and Terminal in Mac). Type 

Node --version 

If you are able to see version detail than you have successfully installed your Node.js. If your command window is not able to recognize this command than just verify that physical address of the Nodejs installed folder is been added in System Environment Variable Path (In Windows). If Node.js path is not added in the Path variable than please add the same. Close the command window and open a new one. You should be able to see the version detail now  after above command is been executed.

Our next step is to get Express.js. For doing so I would suggest using express-generator. Express-generator will get you boilerplate code for getting you started. You can also look for any other code generator at NPM website. But for now let get started with express-generator. Create a working folder on local hard drive. Let’s assume you have created a folder at D:\Project\GettingStartedOnMean. Now open a command prompt window and navigate to our working folder. Type following command to configure express-generator in local system.

npm install express-generator -g

npm stands for node package manager, if you are .net person it is similar to Nugets. npm gets installed with node.js setup.  install parameter will tell npm to install package required for express-generator, our 3^rd parameter. –g  will tell npm to install this package globally, globally to your system.

Check the output of the above command. If you see error related to python files than please ignore it for now. We can still continue with this error. If you see error related to access privileges and you see difficulty getting this privilege than we can quickly fix this. Execute above command without –g, this will get all required files to your working folder under folder node_modules. Now for quick fix navigate your command window to  node_modules\.bin and Type express [ApplicationName]. For sample application I am using ApplicationService.

express ApplicationService

If you were able to successfully install express-generator than you will have to execute this command at root of your working folder. Above command will create a folder with application name. If you have executed this command inside .bin folder under node_modules you will have to physically move this folder back to your root working folder and then delete node_modules folder created at the root working folder. We will no longer require node_modules folder at root working folder.

Next step is to get all the required packages for running our application. navigate your command prompt to ApplicationService folder and Type following command

npm install

Npm install will read package.json file which was created by express-generator for getting all the dependence and install it.  To verify if you are on right track type 

npm start

mongod --dbpath D:\Project\GettingStartedOnMean\data

npm install mongoose --save

var express = require('express');<br />
var mongoose = require('mongoose');<br />
mongoose.connect('mongodb://localhost/pathDB'); //mongodb Server and Database information. pathDB is the name of the database

//Your schema defination. PaymentModes is the table / collection name inside PathDb database<br />
var paymentModeSchema = mongoose.model('PaymentModes', {name: String, description: String});

//router is used to expose your api to external world<br />
var router = express.Router();

//This will allow cross browser access to our API<br />
router.use(function(req, res, next) {<br />
    res.header("Access-Control-Allow-Origin", "*");<br />
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");<br />
    next();<br />
});

/* GET home page. */<br />
router.get('/getAll', function(req, res, next) {<br />
    //paymentModeSchema will use Find api and return the data which fits its criteria. I have left the criteria<br />
    //blank for getting all the records from the table.<br />
    paymentModeSchema.find({},function(err, docs){<br />
        //response is returned JSON format<br />
        res.json(docs);<br />
        // we need to end to response.<br />
        res.end();<br />
    });<br />
});

//expose your api to external world<br />
module.exports = router;

//GettingStartedOnMean : Step 1 : require added for getting payment information<br />
var payment = require('./routes/paymentMode');

//GettingStartedOnMean : Step 2 :  route added for getting payment information<br />
app.use('/payment',payment);

npm start

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="paymentCtrl"> 

<ul>
  <li ng-repeat="x in paymentOptions">
    {{ x.name + ', ' + x.description}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('paymentCtrl', function($scope, $http) {
  $http.get("http://localhost:3000/payment/getAll")
  .then(function (response) {$scope.paymentOptions = response.data;});
});
</script>

</body>
</html>

In this article intention was not to cover best practices. I have written this article to present how simple and easy it is to write an application using Mean stack. Using a simple code editor and average system we should be able build and host an application. Since we are using JavaScript and Node.js application this can be deployed not only in Windows but also in Mac, Linux etc.  

Reference

http://mean.io/

https://nodejs.org/en/

https://www.mongodb.org/

http://mongoosejs.com/