MongoDB, Express, AngularJS (1.6) and NodeJS (MEAN)

Building scalable web applications using MEAN stack

Step 1: Introduction

This is the first tutorial of this series and it pretty much explains the basics of setting up a MEAN project, if you’re already comfortable setting up a MEAN project then you may find this long and boring. Feel free to move on to the next tutorial. But if you’re a beginner in the MEAN stack, I’m hoping you pick up a thing or two from this :)

Why MEAN

MEAN stands for MongoDB, ExpressJS, AngularJS and NodeJS. Let’s quickly walk through each of them:

MongoDB

MongoDB is a non-relational, NoSQL database written in C++. In plain language, a database that stores data as objects, where each object has a unique _id, as opposed to storing data in tables which is used by relational databases. Generally, non-relational databases are easy to use, requires little technical expertise, and scales out really well across machines.

ExpressJS

ExpressJS is a NodeJS web application framework. It enables us add some backend functionalities to our plain JavaScript application. It basically creates a REST server on NodeJS.

AngularJS

AngularJS is a front-end framework that allows us extend HTML attributes and functionalities to accommodate the use of logic-based expressions directly in the DOM. AngularJS enables us to use functionalities such as ng-if, ng-show, ng-repeat and a bunch of other useful features that can make our HTML views dynamic.

NodeJS

NodeJS is a cross-platform runtime environment for developing server-side and networking applications. NodeJS applications are written in JavaScript and the presence of abundant modules using NPM (Node Package Manager) makes it super-easy to develop applications using NodeJS.

How They All Work Together

In very simple terms, we are going to develop our application using AngularJS as the front-end framework to fine-tune our DOM, NodeJS as the backend engine, ExpressJS as the server-side communication platform and MongoDB as the data store. Easy stuff huh!

Step 2: Dependency Setup

To start developing our application, we need to have the following installed:

• NodeJS with NPM
• MongoDB which can be used online or downloaded, installed and used locally.

Run the following command on the terminal to verify your installation:

NodeJS: node -v (displays node version: i.e. v6.10.0)

NPM: npm -v (displays npm version: i.e. v5.0)

MongoDB (installed locally): mongod (starts mongodb server locally)

Once we have these setup, we can install the other dependencies using NPM on the command line.

Now, we create a project directory and navigate to the project directory in our terminal and initialise the node project using NPM by running:

npm init

This will prompt you with questions about the project, like the name and version to generate the package.json file, we’ll use the defaults for now, and make needed changes to the generated file later.

After that, we proceed to install node dependencies to be used in our project. To do this, we run:

npm install --save angular@1.6.4 express body-parser angular-route@1.6.4 mongoose

This command will install our dependencies, observe we used the - -save flag to ensure that the package.json file is also updated with the changes. We also installed mongoose to enable us use a structured model-schema framework for our application.

Now our project folder structure should look like this:

> node_modules
  --package.json

while our package.json file looks like this:

{
 "name": "angular-project",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Ethan",
 "license": "ISC",
 "dependencies": {
   "angular": "^1.6.4",
   "angular-route": "^1.6.4",
   "body-parser": "^1.17.2",
   "express": "^4.15.4",
   "mongoose": "^4.11.6"
 }
}

We are now ready to create our scripts to serve our application from the backend server using express.

I know this is a lot of boring theoretical stuff, but I promise we’ll write a bunch of code in the next tutorial.

In the next tutorial, we will setup express server, create static files and run a sample application in the browser.

Feel free to drop your comments, I’ll be happy to get back to you.

Interested in cryptocurrency investments? check out my post on buying and investing.

Visit my profile for other publications I’ve made.