Building your first MEAN Stack Web Application

By | March 11, 2017

MEAN is actually a combination of multiple language platforms to create applications. It is a shorthand wherein M stands for MongoDb, E stands for Express, A stands for Angular.js and N stands for Node.js. First we need to install the packages for Angular, Node and MongoDB.

In this MEAN Stack Tutorial we will be creating a simple web application, which will have a user registration page, once user will be registered, he can login to the application with the credentials and upon login there will be a page which will have some items listed. Let’s create step by step our login application.
If you are not familiar with the technologies being used in this MEAN Stack tutorial, you can follow the below links to fully understand these technologies as:

Angular 4 is out now. We can use Angular 4 to develop applications that are cross platform with maximum speed and performance. More on Angular 4 here.

Environment Setup for MEAN Web Development

Create a folder for project, open command line from there and run npm init command.npm init

It will ask for few questions, answer them and we are good to go.

If you will traverse through the LoginApp directory, there will be a package.json file created. Just open the file in whatever IDE you are comfortable. Now we are going to add some dependencies that will require in our project.Project Dependencies

Next step is, go back to command line and run npm install command, this command will setup the dependencies for us.

Now next step is to create our app.js file. This file will be responsible for creating routes, adding node modules, creating validator, session, db connection, flash messages and will start listening to a specified port. This file will be created in the root folder itself. Let’s create it, below is the code, how app.js will look like.

Let’s understand what all we have done in this code, first few lines are added to import the modules that will be required throughout our application.

After this we are creating database connection using mongoose. Mongoose is basically a ORM that is used when we have mongodb in the backend. We have used handlebars for creating views. Validator object code will be used when we will have our views in place.

Creating routes is important thing, these views are used when application is rendered and traverse through one to other page. Like in our app, if you see we have created two routes, one is for index/ home page of application, and /users will be other routes for login, register and so.

We have used flash for error and success messaging, like for register, if there will be any errors then the error message will be routed through error message, and same for success message.

We have guided our application to use the routes that we have created earlier, using app.use method. Last thing we did in this is to tell the app to listen to specified port. For production application the hardcoded value will not be used and there will be parameter set for port to use from environment. It’s just for our app we have used port as 8777.

One more important thing about this main.js file is that we will be hardly doing any changes afterwards in this file so it’s once created and ready to use forever.

Next part is to create dependent files and modules. Typically the structure of our project will look like:MEAN Stack Project Structure

So we can see, there is main.js and package.json files are on root and there are some folders. Common folder will be used for keeping files like stylesheets, java script, which will be used throughout our application and will be accessible for all.

Models folder will have file for interacting with database and creating schema. It will be basically a DAO layer.

Routes folder will have files for different routes of our application, like we have talked about earlier “/” and “/users” route.

Views folder will have code for front end.

We will talk about each and every thing in detail when it comes on code of the same. It was just a brief overview.

Let’s now start by creating model or dao layer of our application. For this we need to create a folder, which will be named as models, under the login app folder. Once we have created the model folder, we will create a file and let’s name it user.js, as this is a user information intended schema.

First thing we need in our user.js file is mongoose object. Let’s create it:

So we have mongoose object now, that help us in interacting with database.

Coming to schema part, the schema will be quite simple since we are creating a simple app that will have only authentication fields. One more thing we cannot keep the user’s password in plain string so we will be storing it in some other way that we will talk about in security section of our application.

Now let’s start with creating the schema for user on database.

So this is the very basic schema for our application. It contains username, name of user, email id of user and password.

One thing to notice here is that we will not storing the password as plain text, instead we will be storing hash of password to be adhere of security. So that if any one takes the dump of the database the user will not be able to restore the password.

Since we will need this schema in our controller part, so we need to make this available for controller. To make this happen the node.js provides exports feature. Let’s see how we will do this:

So our model is ready with schema, and mongoose object in it. Lets now move to next step that is creating routes.

First step to create routes folder under the same root. Once done with folder creation we will create two js files one for user route will be named as users.js and one for index route will be named as index.js.

Setting up Routes for MEAN Stack Example

Lets start with creating index route :

A simple js file, which will have “/” route mapping to index view. Lets see how it will look like:

We need express module here, since express only provides router capability. Once we have the router object, we will put a get request to “/” route of our application and we will render index page which will be the view page of our application.

Something similar will be done for users route as well, for a time being it will be a very simple even simpler from index, but keep in mind it will grow throughout our application since this will be file which will have routes for register, login and logout. Initial view of the this file will be:

The same we did in for index route, instead here no mapping. We will add mapping when we will talk about register and login flow.

For UI part, we need to create a folder named view and all views will be placed in this folder. As we talked earlier, css and java script files that will be common to all views will be placed in common folder.

Views in MEAN Web Application

Structure of views folder will something look like this. In layouts folder we will create a layout file and respective index, register and login views will be created in the main view folder.

So we are done with creation of our project structure and it looks like this:

MEAN Stack Web Application

Register User to MEAN Stack Web Application

Lets start with registering user to our application:

Register view will something look like this, please note the css classes used in this code are already in the stylesheets, that we did not touched upon but you can check in the attached code.  Register form will have four fields name, username, email and password and a Submit button. Upon submitting the page we are redirecting the page to /user/register.

Now we need to provide mapping for register in our routers, so that it can be rendered to UI. So we will traverse through users.js that is placed in routes folder, and add the mapping as:

Adding this line will render the register view that we have just created to UI.

Learn the Fundamentals of Angular 2 and get ready to create your own web application
Click Here to Take the Video Course Now.
Course Contents are:

  • Introduction
  • Displaying Data
  • User Input and Data Binding
  • Forms using Angular2
  • Services and Dependency Injection
  • Routing

Lets quickly add views for login, index as well.

Login view will be written as:

And index page that will have the links to login, home.register, logout will be placed under layouts folder and it will look like:

Since our view part is ready, lets quickly add mapping for all. Again we need to traverse through routes folder and users.js file and here we will be adding mapping to render these views:

So now we have mappings, we have views lets put all together and test, if we are able to see the views.

We need to start mongo instance as well for our application to up, so make sure you have started mongo instance as well.

This line will up the server and deploy our application. Lets go to browser and try if we can see what we have created:Welcome MEAN Stack App

So good news is our application is up and we are ready with UI part of our application.

Lets try for register and login page now …MEAN Stack App Login

So our login page is also up.

Lets try for register now :MEAN Stack App Register

And we are all set to go, with validation and dataaccess part of our application.

We will continue with development of this MEAN Stack LoginApp in next part. We will cover welcome page after successful login, logout etc. Keep in touch.

More MEAN Stack and Related Tutorials: