How to Build Modern Web Applications with MEAN

MEAN is the famous stack development process achieved by MongoDB, ExpressJS, AngularJS, Nodejs for developing web applications. It allows developers to create both client side and server side development in javascript. MEAN supports Model View Controller architecture for developing application. Each of these components in MVC are build for separated aspects in development phase. To become an experienced MEAN stack developer you need to start developing applications from today only. There are a lots of courses are available over internet containing videos, pdfs, blogs making it easier to understand this ongoing technology easily.

The MEAN development architecture is flexible to use and understand. Here the developer can customize their applications according to the need. The node package manager from node.js provides access to integrate huge variety of libraries in application development. Ranging from startups to large enterprises are using node.js for development.

The whole architecture represents client server model where client makes request through angularJS. Nodejs will manage the request and for interacting with database express js is used.

Once the data is retrieved from database the response is send to express and it returns response to node from where the result is returned to client on angular.

For developing web based application with MEAN you need to follow following steps:

Pre-Requisites:

For getting started with step by step procedure for developing this web application you need to setup following:

1). POSTman

2). Node Setup

3). Express.js Setup

4). MongoDB Setup

5). Notepad/ textwrangler

6). Web Browser like google chrome.

Installation Guide:

To create front end part for your application you can use angularjs which is very effective for designing marvellous template. You can follow here in order to learn angular 5 (formely angular 2). For creating server side components and running web server we are going to use node.js, We should download node.js installer from node.js website and follow the instructions on screen for its complete installation. To check whether it is installed correctly on your system open command prompt and type:

$node -v

$node -v

It will return the version of node installed on your device. Again to test npm is installed correctly type:

$npm -v

$npm -v

It will also return the version of node package manager installed on your device.

Now you have successfully installed nodeJS. It’s time to create directory for your application. Again in command prompt type:

$mkdir newapp
$cd newapp

1 2	$mkdir newapp $cd newapp

Now use init command for creating package.json file for your application. It is the root for your application. It contains name, version and entry point for your application. Type command:

$npm init

$npm init

Entry point: (index.js)

You can change it as whatever name you are using like app.js

It’s time to install dependencies for your project work so lets install express, mongoose, jsonwebtoken, body-parser and morgan with following command:

$npm install express  --save
$npm install mongoose morgan body-parser jsonwebtoken --save

1 2	$npm install express --save $npm install mongoose morgan body-parser jsonwebtoken --save

Morgan will create log in console so that we can watch what’s happening. Body-parser allows us to accept parameters from POST request. jsonwebtoken is for how to create and verify the webtokens.

Setting up Users.js File:

The user model in this file is used to create and get users.

//getting an instance of mongoose
var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;

//Setting up a mongoose model
module.export = mongoose.model(‘User’, new Schema({

name:String,
password:String,
admin: Boolean
}));

//getting an instance of mongoose

var mongoose = require(‘mongoose’);

var Schema = mongoose.Schema;

//Setting up a mongoose model

module.export = mongoose.model(‘User’, new Schema({

name:String,

password:String,

admin: Boolean

}));

Config.js File:

To store the input provided by user, we need to create an database. Since we are using mongodb service for this project. So we must configure the database in mongodb from here we’ll get URI string and key to access it from code.

module.exports = {
‘secret’ : ‘mysecretkey’,
‘database’ : ‘URI’
};

module.exports = {

‘secret’ : ‘mysecretkey’,

‘database’ : ‘URI’

};

Index.js File:

For using other modules we should include following packages in our index.js file. We are including these dependencies for using them in our code.

//packages needed in program
var express = require(‘express’);
var app = express();
var BodyParser = require(‘body-parser’);
var morgan = require(‘morgan’);
var mongoose = require(‘mongoose’);

var jwt = require(‘jsonwebtoken’);       // For creating and verifying tokens
var config = require(‘./config’);          // get config file
var user = require(‘.app/model/user’);  //get mongoose model

var port = process.env.PORT || 8080;
mongoose.connect(config.database);     //Connecting to database
app.set(‘secret’,config.secret);

//for getting information from POST or URL parameters
app.use(BodyParser.urlencoded ({ extended:false }));
app.use(BodyParser.json());
app.use(morgan(‘dev’));

// Creating a basic route
app.get(‘/’, function(req,res) {
  rs.send(‘Server is running at <a href="http://localhost">http://localhost</a>: ’ +port + ‘/api’);
});

//packages needed in program

var express = require(‘express’);

var app = express();

var BodyParser = require(‘body-parser’);

var morgan = require(‘morgan’);

var mongoose = require(‘mongoose’);

var jwt = require(‘jsonwebtoken’); // For creating and verifying tokens

var config = require(‘./config’); // get config file

var user = require(‘.app/model/user’); //get mongoose model

var port = process.env.PORT || 8080;

mongoose.connect(config.database); //Connecting to database

app.set(‘secret’,config.secret);

//for getting information from POST or URL parameters

app.use(BodyParser.urlencoded ({ extended:false }));

app.use(BodyParser.json());

app.use(morgan(‘dev’));

// Creating a basic route

app.get(‘/’, function(req,res) {

rs.send(‘Server is running at <a href="http://localhost">http://localhost</a>: ’ +port + ‘/api’);

});

//Start the server
app.listen(port);
console.log(‘running at port: ‘ +port);

//Start the server

app.listen(port);

console.log(‘running at port: ‘ +port);

Defining Routes API:

Create route for APIs with following methods :

1). GET method http://localhost:8080/api : This is a protected route which requires token. It will display a random message.

2). GET method http://localhost:8080/api/users : It will list all the users.

3). We’ll create a /setup route for creating a sample user in database because http://localhost:8080 is not protected and open to the world.

Create User:

Now we have created server so it’s time to add routes which will create user of our choice. So add this code in main index.js file.

app.get(‘/setup’, function(req,res) {
// creating new user
var obj = new User({
Name:’ abcdef’,
password : ‘abcabc’
admin : true
});

//saving user
obj.save(function(err) {  
If (err) throw err;
console/log(‘user saved’);
res.json({ success : true });
});
});

app.get(‘/setup’, function(req,res) {

// creating new user

var obj = new User({

Name:’ abcdef’,

password : ‘abcabc’

admin : true

});

//saving user

obj.save(function(err) {

If (err) throw err;

console/log(‘user saved’);

res.json({ success : true });

});

Now if we go to URL http://localhost:8080/setup in our browser then we’ll get to see console displaying log message stated user saved and a json message saying true in our browser.

Displaying User:

//getting router instance for api routes
var routes = express.Router();
// route for showing random messages at localhost:8080/api/
routes.get(‘/’, function(req, res) {
res.json({ message: ‘Enjoy your code’ });
});

//to return all users
routes.get(‘/users’, function(req,res) {
user.find({ }, function(err, users) {
res.json(users);
});
});

//applying routes in our application with /api as a prefix
app.use(‘/api’, routes);

//getting router instance for api routes

var routes = express.Router();

// route for showing random messages at localhost:8080/api/

routes.get(‘/’, function(req, res) {

res.json({ message: ‘Enjoy your code’ });

});

//to return all users

routes.get(‘/users’, function(req,res) {

user.find({ }, function(err, users) {

res.json(users);

});

//applying routes in our application with /api as a prefix

app.use(‘/api’, routes);

Now check both the GET/POST method routes in Postman. On using GET method for URL http:localhost:8080/users we will see result containing list of all the users.

Execution:

For executing our web app write keyword node followed by main file name in console.

$node index.js

1	$node index.js

It will show output:

Server is running at 8080.

Final Thoughts:

Now you have successfully developed a MEAN stack application. For developers to stay relevant, it is important that they learn the skills that are important today, and Mean Stack is one such a language.

More MEAN Stack and Related Tutorials: