MEAN Stack – A Quick Start Guide

by Matt Carella on April 21, 2014

The modern web is always changing, and this article is more than two years old.

By Mathew Carella

The MEAN stack has been getting a lot of publicity lately. In case you haven’t heard about it yet, MEAN stands for MongoDB, Express, Node.js and AngularJS. This article is intended to serve as a quick guide to help you get started developing with the MEAN stack. We won’t go into great detail about what each of the technologies are, instead sticking to how to set up a typical MEAN stack.

To get started, of course, you’ll need to have Node.js and ExpressJS installed on your environment. Just follow the instructions on their respective sites if you don’t have these already and then come back and continue here.

Installing MongoDB

To get started installing the MongoDB NoSQL database, follow these steps.

  1. Download it
  2. Unzip it into a folder (ex. myfoldermongodb)
  3. Navigate into the directory: myfoldermongodbbin
  4. Open a command prompt here and run the following command: mongod --dbpath data
  5. Install Mongoose by opening a command prompt and typing: npm install mongoose

Setting Up Express

Express is a popular web application framework for Node.js. To get it installed, follow these steps:

  1. Navigate into a directory: myfolder
  2. Install Express by opening a new command prompt and typing: npm install -g express
  3. Create a new Express app typing the command: express --sessions myapp
  4. Navigate into the directory: myfoldermyapp
  5. Open a new command prompt here and type: npm install
  6. Create a server.js file the directory: myfoldermyapp

Setting Up Server.js

Next we’ll create a simple Node.js server. Remember that anytime you modify the server.js file, you will need to restart it to see your changes working. The following are the contents of our server.js file:

var express = require('express');
var app = express();

app.get('/ping', function(req, res) {
    res.send({ping:'hello this is server and I am alive!'});
});

app.get('/ping/:id', function(req, res) {
    res.send({ping:'hello this is server and I am got '+req.params.id});
});

app.listen(3000);
console.log('Listening on port 3000...');

Once you’ve created a server.js file like the one above, follow these steps to get it running.

  1. Navigate into your application directory: myfoldermyapp
  2. Within the command prompt, type: node server.js (this will start the server)

Testing the Server

To make sure your server is up and is doing its work, query your simple API route. To do this, I found really useful Chrome plugin called Postman. You can see the results of my tests using Postman in the screenshots below.

postman1

postman2

Creating a Database

  1. Open a new command prompt and navigate into the folder: myfoldermongodbbin, and type the command: mongo
  2. Create a new database typing use in the command prompt (ex. use mydatabase)

Interacting with Mongoose

Next let’s modify our server.js as shown here so that it can interact with MongoDB using Mongoose.

var express = require('express');
var app = express();
var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mydatabase');
var db = mongoose.connection;

app.listen(3000);
console.log('Listening on port 3000...');

You can also add some control to make sure your MongoDB works fine:

db.on('error', function callback () {
  console.log("Connection error");
});

db.once('open', function callback () {
  console.log("Mongo working!");
});

Inserting and Querying Data from MongoDB

It’s now time to make things a little more complex. Let’s edit the server file again. If you don’t understand the code, don’t worry, I am going to explain all the lines later in the post.

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ObjectId = Schema.ObjectId;
var Factory = require("./module.factory.js");

mongoose.connect('mongodb://localhost/mydatabase');
var db = mongoose.connection;

var factory = new Factory(Schema,mongoose);
factory.createSchemas();
factory.insertPeople();

app.get('/ping', function(req, res) {
    res.send({ping:'hello this is server and I am alive!'});
});

app.get('/ping/:id', function(req, res) {
    res.send({ping:'hello this is server and I am got '+req.params.id});
});

app.get('/person/hektor', function(req, res) {
     var resp = factory.getPerson({name:'hektor'},res);
});

app.listen(3000);
console.log('Listening on port 3000...');

Let’s have a closer look to this code:

var Schema = mongoose.Schema;
var ObjectId = Schema.ObjectId;
var Factory = require("./module.factory.js");

…and this other one:

var factory = new Factory(Schema,mongoose);
factory.createSchemas();
factory.insertItems();
factory.getItem({name:'hektor'});

First of all you need to be aware that “everything in Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.” That’s why I’ve created a factory (module.factory.js) to insert some data in MongoDB and to retrieve them from the entire collection. How do we create a factory?

See Also:  Getting started with Redux using the Mullet Stack

module.factory.js

var Factory = function(Schema,mongoose) {

    this.Schema = Schema;
    this.mongoose = mongoose;
    this.Item = null;

    this.createSchemas = function() {

        PersonSchema = new this.Schema({
            name: String,
            surname: String, 
            age: Number

        });

        this.Person = mongoose.model('Person',PersonSchema);
    }

    this.insertPeople = function() {

        var hektor = new this.Person({
            name: 'hektor',
            surname: 'baboden',
            age: 35

        }); 

        var john = new this.Person({
            name: 'john',
            surname: 'johannis',
            age: 55

        }); 

        hektor.save();
        john.save();
    }

    this.getPerson = function(query,res) {

        this.Person.find(query,function(error,output) {
            res.json(output);
        });
    }
}

module.exports = Factory;

As you might expect, the method createSchemas() allows me to create a new schema that maps to my data structure. Once I’ve created a schema, I can insert data in my MongoDB, in this case using a method called insertPeople().

Putting It All Together

Finally, we need to put all the pieces together to make it work. Let’s call an API that queries MongoDB to retrieve some data. To make this happen we need to edit the server.js file as follows:

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ObjectId = Schema.ObjectId;
var Factory = require("./module.factory.js");

mongoose.connect('mongodb://localhost/mydatabase');
var db = mongoose.connection;

var factory = new Factory(Schema,mongoose);
factory.createSchemas();
factory.insertPeople();

app.get('/ping', function(req, res) {
    res.send({ping:'hello this is server and I am alive!'});
});

app.get('/ping/:id', function(req, res) {
    res.send({ping:'hello this is server and I am got '+req.params.id});
});

app.get('/person/hektor', function(req, res) {
     var resp = factory.getPerson({name:'hektor'},res);
});

app.listen(3000);
console.log('Listening on port 3000...');

Below is a screenshot of the result of this call within Postman:

postman3

Adding the UI

Now that we have our API along with a backend service that sends JSON data to my application, we want to navigate to a page to and see the data displayed nicely on it?. To do this, we just have to modify server.js again:

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
    res.render('index',{ title : 'Home' })
})

The prior line allow us to display our index.html page by navigating the the URL: http://localhost:3000/. Thus, the final version of our basic server.js file will be as follows:

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var ObjectId = Schema.ObjectId;
var Factory = require("./module.factory.js");

mongoose.connect('mongodb://localhost/mydatabase');
var db = mongoose.connection;

var factory = new Factory(Schema,mongoose);
factory.createSchemas();
factory.insertPeople();

app.get('/ping', function(req, res) {
    res.send({ping:'hello this is server and I am alive!'});
});

app.get('/ping/:id', function(req, res) {
    res.send({ping:'hello this is server and I am got '+req.params.id});
});

app.get('/person/hektor', function(req, res) {
     var resp = factory.getPerson({name:'hektor'},res);
});

app.get('/', function (req, res) {
    res.render('index',{ title : 'Home' })
})

app.listen(3000);
console.log('Listening on port 3000...');

Angular

It’s now AngularJS time. We need to create an app.controller.js file. Below is a simple controller example that will ask for some data, using the simple API we defined earlier:

var myApp =  angular.module('myApp',[]); 

myApp.controller('myAppController',['$scope', '$http', function ($scope, $http, myAppService) { 

    $scope.people = [];

    $scope.init = function() { 

        $http.get('http://localhost:3000/person/hektor').then(function(result) { $scope.people = result.data; });
    } 

    $scope.init(); 

}]);

The controller makes a get API call to retrieve some data. Next, we need to modify the index.html page.

<!DOCTYPE html>
<html ng-app="myApp">

    <head>
        <title>App Title</title>
    </head>

    <body ng-controller="myAppController">

        <div ng-repeat="person in people">
            {{person.name}} {{person.surname}} {{person.age}}
        </div>

    </body>

    <script src="js/lib.angular.js"></script>
    <script src="js/app.controller.js"></script>

</html>

Lastly, all we only need to browse to the localhost address to see page displayed on the screen!

See Also:  Why you should limit JavaScript — and how to do it

Where to Go From Here

Obviously, our application was extremely simple, but it allowed us to get everything installed, set up and working and to understand some of the basics of the MEAN stack. If you’d like to explore further, I suggest the ongoing series by Gabriel Cirtea on creating an RSS feed reader using the MEAN stack:

This article was originally published at http://blog.mathewdesign.com/2014/04/11/getting-started-with-mean-stack/