Develop MEAN Stack Application

“MEAN” stack is an open source JavaScript stack for building dynamic web applications. It’s an acronym for MongoDB, Express.js, Angular and Node.js.

In this article, I am going to explain about developing a MEAN stack application from the scratch. I assume that the reader should have a basic understanding of JavaScript. If not,  Please familiarize yourself with Javascript.

Setup

The first step is to install the MongoDB, Express.js, and Node.js in your system/laptop.

I assume that you are using Windows. If you use Ubuntu or Linux, then follow the necessary steps to install the MongoDB and Node.js

MongoDB:

  1. Go to https://www.mongodb.com/download-center#community and download the installation package.
  2. Run the installer file and complete the installation.  By default, it’s getting installed in C:\Program Files\MongoDB.
  3. Create /data/db to store the data.
  4. To start the MongoDB server, go to C:\Program Files\MongoDB\bin,  then run mongod.exe. By default, it’s running on 27017.
  5. We can run the MongoDB client by running “mongo.exe” and type “show dbs” to list out the default database name.

Node.Js:

  1. Go to https://nodejs.org/en/download and download the windows installer.
  2. Run the installer file and finish the installation.
  3. Open up Node.js command prompt, then verify the node and npm version(node -v and npm -v) to validate the installation.

Express.js

Open up Node.js command prompt and run the below command to install Express.js.

That’s it.  We are done with the environment setup. Let’s move on to the application.

Application Flow

It’s a simple application for adding, viewing and deleting the user comments. While loading the home page, it will access the MongoDB and get the list of Comments. It also allows to add and delete the comments.

The directory structure is given below,

Directory Structure

Start it from the “server.js”. This is the starting point of the application. In this file, we do the setup, database and routes configuration and finally starting the Node.js server. I have provided the enough comments in the below code section to help for more understanding.

server.js

Now let’s see the database configuration,  Refer the file /config/database.js

Back End(Node.js)

Now let’s refer the routes.js where we define the REST services. We have three REST services, They are /api/comments/fetchAll, /api/comments/save and /api/comments/delete/:comment_id. So with the name itself, you can understand the purpose of each service.

Before going to this service, We have to create an object model with mongoose which is an object modeling tool designed to work in an asynchronous environment.

Refer the app/models/comment.js. Here I am creating a model object with userName and comment field.

comment.js

Now refer the routes.js. The first step is to load the ‘Comment’ model and then use this model for adding, viewing and deleting the comments. I have provided enough comments in the code section itself. Hence go through it.

routes.js

We are done with the back end. Let’s move on to the Angular Front End code to know how these services are being used.

Front End(Angular)

The index.html and core.js are the core components of front-end layer.

The core.js contains the angular controller code to access the REST services and populate the ‘formdata’. Here we create the Angular Module ‘commentModule’ and assign the ‘commentController’ to this.  This controller is responsible for loading the comments while loading the home page, creating the comments and finally removing it.

core.js

index.html

We have to refer the ‘commentModule’ and ‘commentController’ from the index.html. So the ng-app directive refers the ‘commentModule’ and the ng-controller refers  ‘commentController’ respectively. Next, we have User Name and comment fields and check the ng-model for these fields and its getting mapped to formData.userName and formData.comment respectively. We use the ng-repeat directive to show the list of comments. While clicking on ‘Add’ button will call createComment() function which in turn call the REST (/api/comments/save) service and save the new comments on MongoDB. There is a checkbox which will be shown for each comment. If you click on given checkbox, it will call deleteComment() function which will delete that comment from MongoDB.

Now it’s time to run the application. Follow the below steps to do that.

  1. Check out the project from https://github.com/dkbalachandar/meanstack-comments-application
  2. Type ‘npm install’ to install all the required modules.
  3. Type ‘npm start server.js’ to run it.
  4. If you would like to run this as a daemon process, then do below,
    Install forever by running ” npm install -g forever”
    Start the server by running “forever start server.js”
    Stop the server by running “forever stop server.js”
  5. Open up the browser and type http://localhost:8081

Refer below the screenshots taken.

Home Page

Home Page

Try to add few comments

After adding  few Comments, the top section shows the number of comments and the actual comments entered

After adding few comments

 

 

Remove the first comment by clicking on the checkbox, so the first comment will be removed and the remaining comments will be shown as below.

After Deleting First Comment

 Summary:

In this post, I have explained about developing a MEAN stack application with an example. You can use this project as a base and update the code with creating some more services, then changing the front end code and test it out.

Let me know if you have any questions.

Leave A Comment

Your email address will not be published. Required fields are marked *