MEAN Stack – A Quick Start Guide

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.

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:

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

Navigate into your application directory: myfoldermyapp

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.

Creating a Database

Open a new command prompt and navigate into the folder: myfoldermongodbbin, and type the command: mongo

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.

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?

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:

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:

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

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:

When I try to install express, using the provided command, as root on an Ubuntu Linux (“npm install express -g”), it installs correctly (in /usr/lib/node_modules/express), but I don’t get any ‘express’ executable. It is the 4.0.0 version that gets installed. Has this been removed in that version or did I do something wrong?

Luc,
As per the express Github page here: https://github.com/visionmedia/express#quick-start The express generator needs to be installed separately. npm install -g express-generator will install the generator for express.

In AngularJS it really depends on what you are doing whether you should use $resource. In this tutorial where they are just getting something going to show you it works $http makes a lot of sense. $http also allows for more customized interfacing and for using non-RESTful API calls. That being said from my experience the MEAN stack really lends itself to using REST so generally you will want to use something like $resource though in my experience if you are making a moderately complex RESTful API which allows for sub-resources you are better off using something like Restangular and if it is a complex API you will probably want to create some real models which means either have to add lots of custom coding in which case it might make since to use any of the three (depending on what makes it complex and how you want you models to work) or use something like Breeze or I have even heard of using Backbone for your models.

I can’t get this working and I don’t know what am I doing wrong. The pings work just fine, I created the module.factory.js file and made sure it’s saved in the same directory as server.js, but when I try to connect to http://localhost:3000/person/hektor all I get is a “Cannot GET /person/hektor” message. I’ve carefully checked all my code to make sure I don’t have any typos. Any idea what could be wrong? Mongod is running fine and I confirmed my new database exists by running “show dbs”.

I have seen this error before in other MEAN apps. The text above says:

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:

Express makes a “shortcut” for files in the “static ” folder, so that if you change your URL from:

http://localhost:3000/person/hektor

to

http://localhost:3000/hektor.html

that may work. Also if you rename the hektor file to index.html that may also work.

I don’t have time to assemble all of this code demo into a working app to confirm this myself, but that is very likely where the “Cannot GET /person/hektor” message” is coming from. I have seen that exact same syntax in my own apps, and that was the solution.

NOTE: there is some additional confusion for me about the above demo code because the “static” directory seems to have been named “public” or “person” in different places, so you may need to fuss around with the name of the directory in which the hektor files lives.

Thanks for sharing this. I have built out full enterprise MEAN apps, and to date the single best resource for learning MEAN end to end is the course on PluralSight.com by Joe Eames. That course alone gives you enough to start being commercially productive.
http://pluralsight.com/training/Courses/TableOfContents/building-angularjs-nodejs-apps-mean

mcarella

Consultant and full stack web developer who lives between Naples and Bologna. Constantly involved in projects for big customers in luxury industry e-commerce. Agile believer and passionate about UX. Needs to travel around the world at least five times in a year.