MongoDB, Express, AngularJS (1.6) and Node.js (MEAN)

Building Scalable Web Applications Using MEAN Stack

Introduction

Welcome to the first tutorial of this series, which will explain the basics of setting up a MEAN project. If you’re already comfortable setting up a MEAN project, feel free to move on to the next tutorial. However, if you’re a beginner to the MEAN stack, I’m hoping that you'll pick up a thing or two from this 

Why MEAN:

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

MongoDB:

MongoDB is a non-relational, NoSQL database written in C++. In other words, it's a database that stores data as objects, where each object has a unique _id, as opposed to storing data in tables, used by relational databases. Generally, non-relational databases are easy to use and require little technical expertise.

Express.js:

Express.js is a Node.js web application framework. It lets us add some back-end functionalities to our plain JavaScript application.

AngularJS:

AngularJS is a front-end framework that allows us to 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 many other useful features that can make our HTML views dynamic.

Node.js:

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

How They All Work Together

We're going to develop our application using AngularJS as the front-end framework to fine-tune our DOM, Node.js as the back-end engine, Express.js as the server-side communication platform, and MongoDB as the data store. Easy, huh!

Dependency Setup

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

• Node.js 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:

Node.js: 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'll create a project directory and navigate to it in our terminal using the following unix command:

mkdir mean-project && cd mean-project

Then, we'll initialize 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 changes to the generated file later.

After that, we'll install Node dependencies for our project. To do this, we'll run:

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

This command will install our dependencies. Notice that we used the --save flag to ensure that the package.json file is updated with the changes. We also installed Mongoose to enable us to 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 should look 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're now ready to create our scripts to serve our application from the back-end server using Express.

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

In the next tutorial, we will set up the Express server, create static files, and run a sample application in the browser.

Feel free to drop your comments below — I’ll be happy to get back to you!

This post is originally published by the author here. This version has been edited for clarity and may appear different from the original post.