MEAN stack – A Hands on Tutorial9 min read

MEAN stack – A Hands on Tutorial

Also checkout a lighter version of the Todo App using DiskDB instead of MongoDB : Building a Todo App with DiskDB

If you are new to MEAN, I would recommend checking out my MEAN Workshop.

Looking for a way to set up Vagrant to work with M.E.A.N. Stack applications? Take a look at M.E.A.N. Stack Development with Vagrant

If you have been working in the  Nodejs/Web development world, you must have heard about MEAN. If you did not, MEAN stands for

  • M – MongoDB
  • E – Expressjs
  • A – Angularjs
  • N – Nodejs

Sweet right! This IMO is the next gen technology stack to build scalable and efficient web applications that uses Javascript on both the server and the client.

In this post, we will be building a simple Todo App. We will be building the app from scratch, which will give you an idea as what component goes where and how to configure it. If you already have taken a stab at MEAN stack generators/frameworks, you must have noticed the complex file structures, and you are not sure which files gets wired to which other file.  We will be demystifying them but in simple a Todo app.

The final product we are going to build will look like

Screen Shot 2014-08-22 at 7.53.26 amScreen Shot 2014-08-22 at 7.53.45 amScreen Shot 2014-08-23 at 8.29.18 pm

You can find a demo here. You can find the complete code here.

So, let us get started.

Architecture

We will be building a Todo application, where a user can add a new todo, edit , mark it as completed and delete it. For this, we will be using MongoDB as our data persistence layer. We are going to have one collection named Todo, that will store all our Todos.

For our server side layer, we will be using Nodejs. We will be using a few Node packages to manage and maintain our application. Expressjs will be acting as our server. Expressjs is responsible for interacting with MongoDB (fetching and saving data). And finally our client side Javascript framework would be Angularjs. Angularjs is responsible for managing the different states of UI and also interacting with the Expressjs server & syncing the data.

Prerequisites

I would highly recommend the following posts before you continue development.

Nodejs

Expressjs

Angularjs

MongoDB

Integration

Getting Started

Now, we have a basic idea as what app we are going to build and with what technologies. So, let us get started. Create a new folder named meanTodoApp. Open terminal/prompt here and run

npm init

to start a new node project and fill it as

Screen Shot 2014-08-23 at 6.12.41 pm

To keep our code organized, we will create two folders inside the meanTodoApp folder. One server and the another client. This step is totally optional and you can organize and arrange your code as you wish. For this post, I will be creating the two folders.

First, we will setup the server layer. We will install Expressjs module and its dependencies. Back to terminal/prompt and run

npm i --save express morgan body-parser cookie-parser debug ejs

This will take a couple of minutes for NPM to download and save all the packages. CD into the server folder and create a new file named app.js. This fill will hold the Expressjs config and the code to start the server.

Open app.js in you favorite editor and fill it up like

Next, as referred in the code above, we will create 2 new folders inside the server folder. One for routes and another one for views.

Before we continue further, we will download the node module to interact with MongoDB.

npm i --save mongojs

Now, create a new file named index.js inside the routes folder. This file will hold the traditional REST methods the GET, POST, PUT and DELETE for our collection. And inside these methods, we write the logic to handle the same. Update index.js as below

We are using Mongojs to interact with MongoDB from the Expressjs layer. This here is the integration point between MongoDB and Nodejs/Expressjs. And this is also the integration point between the client Angularjs and Nodejs/Expressjs. Simple right?

PS : If you like, you can create a new folder and dump the logic for each method inside a new file like get.js, post.js, put.js and delete.js. And then include them in above as applicable. 

To test the application we have built so far, in terminal/prompt from inside the server folder run

node app.js

This will start the express server on port 3000. Make sure MongoDB is running (if not you can start it by executing mongod  in a new terminal). Then navigate to  http://localhost:3000/api/todos this will hit the get()  in routes/index.js, which will query MongoDB for all the records inside the todos collection and return them. This will be an empty array, since we have not added any data yet.

Instead of manually running the project every time, we will be using gulp a node based taskrunner to manage our project. First, we will set up gulp globally. Run

Windows Mac/*nix
npm i -g gulp    sudo npm i -g gulp

Then we will install the required plugin. Execute

npm i --save-dev gulp gulp-nodemon gulp-watch gulp-jshint gulp-livereload

This will take a couple of minutes. Now at the root of the project, create a new file named gulpFile.js and add the below code.

Save all the files and execute

gulp

And you should see something like

Screen Shot 2014-08-23 at 7.02.49 pmNow you can navigate to http://localhost:3000/api/todos  and you will see the same output. Since we have added live reload and watch, we can make changes to the files and they will automatically be refreshed for you in the browser.

You can keep the gulp task running and continue development.

We have almost completed the server side development. Now all we need to do is dispatch a page when the user tries to access the base URL.

Now, inside the views folder create a new file named index.html. For now, update it with the below one line

Save all the files and back to the browser. This time, we will access the base URL http://localhost:3000  and you should see

Screen Shot 2014-08-23 at 7.09.02 pmSimple right!

The project we have developed so far should look like

Screen Shot 2014-08-23 at 7.12.12 pm

Continue development

Now, we will focus on the client side. We will be building the Angularjs piece, that is responsible for interacting with the Expressjs REST API endpoints and updating the user interface accordingly.

To handle our client side dependency, we will use Bower. Before start using Bower, we need to install it globally. Run

Windows Mac/*nix
npm i -g bower    sudo npm i -g bower

Once this is done,  add a new file named bower.json at the root of the project. Open it inside your favorite editor and update it like 

Now, add a new file at the same level as bower.json and name it .bowerrc. This file will hold the bower configs. For now, we will setup the directory. Open .bowerrc in you favorite editor and update it as

And then back to terminal. CD back to the project root folder and we will run bower install command to download Bootstrap (for UI), Angularjs and jQuery. Run

bower i --save jquery bootstrap angular angular-route

This will download the libs to client/lib folder. Next, create 3 new folders inside the client folder named css, js and partials. 

Now, open server/views/index.html and update it as

Back to browser and you should see the update UI. Now, we will create a new angular module named todoApp. Create a new file named app.js inside client/js folder and update it as below

Add the reference to this file inside server/views/index.html below the angular reference

<script type="text/javascript" src="/js/app.js"></script> 

Next, we will add a Angular factory, which is responsible for interacting with the Expressjs REST endpoints. Inside the client/js folder create a new file named factory.js. Update it as below

Simple right!

Now, we will add the controller. Create a new file named controllers.js inside client/js folder. Update it as below

Now, we will create the todo.html partial. Inside the client/partials folder, create a new file named todo.html and update it as below

And finally on the client side, we will add a few custom styles to the app. Create a new file named style.css inside the css folder and updated it as below

Finally, we will add a reference to factory.js, controller.js and styles.css inside server/views/index.html. The updated file would be

That is it, you have successfully developed a MEAN app!!

Save all the files and navigate to  http://localhost:3000/ (assuming gulp task is running). And you should see

Screen Shot 2014-08-23 at 7.58.08 pm

Add a new Todo,

Screen Shot 2014-08-23 at 7.59.06 pm

You can play around with the app and test it out. You can also log into the Mongo shell and verify the data

Screen Shot 2014-08-23 at 8.02.07 pm

Simple and easy right! Now you know where which component goes when you are developing an end to end application using MEAN. You can expand on this application, add more features integrate authentication etc.


Thanks for reading! Do comment.
@arvindr21