Introduction to MEAN Stack

MEAN Stack is one of the most popular Technology Stack. It is used to develop a Full Stack Web Application. Although it is a Stack of different technologies, all of these are based on JavaScript language.

MEAN Stands for:

  1. M – MongoDB
  2. E – Express
  3. A – Angular
  4. N – Node.js

This stack leads to faster development as well as the deployment of the Web Application. Angular is Frontend Development Framework whereas Node.js, Express, and MongoDB are used for Backend development as shown in the below figure.

What is MEAN Stack

Flow of Data in MEAN Stack Application: Here, each module communicates with the others in order to have a flow of the data from Server/Backend to Client/Frontend.



Flow in MEAN Stack Application

Getting Started with each Technology with examples: The description of each Technology in this Stack as well as the links to learn them are given below:

1. Node.js: Node.js is used to write the Server Side Code in Javascript. One of the most important points is that it runs the JavaScript code outside the Browser. It is cross-platform and Open Source.

  • Pre-requisites to learn Node.js- JavaScript/TypeScript
  • Go to Node.js Downloads and click Download button to get the latest version and Install as per your Operating System.
  • Verify whether it is installed correctly by checking the version:
    node -v

    If no version is obtained then it is not installed correctly.

  • Check the version of npm (It is installed by default with node):
    npm -v
  • Create an index.js file inside your project folder and copy the following code to it:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var http = require("http");
      
    http.createServer(function (request, response) {
         
       response.writeHead(200, {'Content-Type': 'text/plain'});
         
       // Send the response text as "Hello World"
       response.end('Hello World\n');
    }).listen(3100);
      
    console.log('Server running at http://127.0.0.1:3100/');

    chevron_right

    
    

  • Now open terminal and execute the following command:
    node index.js
  • You will see on Terminal console a log which says:
    Server running at http://127.0.0.1:3100/
  • Go to the browser and type the URL: http://127.0.0.1:3100/ you will see an output as below:
    Node Hello World Output
  • Links to learn more about Node.js:
    1. Introduction to Node.js
    2. Node.js Tutorials
    3. Get Knowledge of Latest Release of Node.js

2. AngularJS: Angular is a Front-end Open Source Framework developed by Google Team. This framework is revised in such a way that backward compatibility is maintained (If there is any breaking change then Angular informs it very early). Angular projects are simple to create using Angular CLI (Command Line Interface) tool developed by the Angular team.

  • Pre-requisites to learn Angular:
    1. TypeScript
    2. CSS Preprocessor
    3. Template Code (Angular Material, HTML 5, etc)
  • Installing Angular CLI – Command Line Interface using npm (Node Package Manager)
    npm install -g @angular/cli
  • Now check whether it was installed correctly using below command:
    ng --version

    It should show something like:
    Angular Installed

  • Now, create a new project using below command:
    ng new project_name
  • Go to project Directory using below command:
    cd project_name
  • Start the Angular Application using below command:
    ng serve
  • Application will start on http://localhost:4200, you will see the following:
    Angular Hello World
  • Now make changes in app.component.html file and save the file, the application will reload automatically and corresponding changes will be reflected.
  • Links of related Angular articles:
    1. AngularJS
    2. Angular 7 Introduction
    3. Angular 7 Installation
    4. Angular 7 Data Services and Observables
    5. Angular 7 Simple To do App
    6. Get Knowledge of Latest Release of Angular

3. MongoDB: MongoDB is a NoSQL Database. It has JSON like documents. It is document oriented database.

4. ExpressJS: Express is a web Framework build on Node.js and used to make API and to build Web Applications.

  • Pre-requisites to learn Express:
    1. JavaScript/ TypeScript
    2. Node.js
  • Initialize a Project by typing the following command on terminal:
    npm init
  • It will ask some questions, Press enter in order to set all the default options. This will create package.json file as shown below:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    {
      "name": "gfg-express",
      "version": "1.0.0",
      "description": "Basic Express Node.js Application",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
    }

    chevron_right

    
    

  • Install the express using below command:
    npm install express --save

    Express install Successful

  • Now, the package.json file will be changed to add the dependencies as shown below:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    {
      "name": "gfg-express",
      "version": "1.0.0",
      "description": "Basic Express Node.js Application",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "express": "^4.17.1"
      }
    }

    chevron_right

    
    

  • Create index.js file and add the below code to it:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    const express = require('express')
    const app = express()
    const PORT = 3000
      
    app.get('/', (req, res) => 
            res.send('Hello World!'))
      
    app.listen(PORT, () => console.log(
    `Example app listening at http://localhost:${PORT}`))

    chevron_right

    
    

  • Start the express server using below command:
    node index.js
  • Go to http://localhost:3000 to see the output as below:
    Hello World Express
  • Links to learn ExpressJS:
    1. Introduction to Express
    2. Design first Application using Express

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.