Introduction to MEAN Stack - GeeksforGeeks

22 Jun, 2020
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:
M – MongoDBE – ExpressA – AngularN – Node.js
M – MongoDB
E – Express
A – Angular
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.
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.
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 -vIf no version is obtained then it is not installed correctly.
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
npm -v
Create an index.js file inside your project folder and copy the following code to it: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/');
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/');
Now open terminal and execute the following command:node index.js
node index.js
You will see on Terminal console a log which says:Server running at http://127.0.0.1:3100/
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:
Links to learn more about Node.js:1. Introduction to Node.js2. Node.js Tutorials3. 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:TypeScriptCSS PreprocessorTemplate Code (Angular Material, HTML 5, etc)
TypeScriptCSS PreprocessorTemplate Code (Angular Material, HTML 5, etc)
TypeScript
CSS Preprocessor
Template Code (Angular Material, HTML 5, etc)
Installing Angular CLI – Command Line Interface using npm (Node Package Manager)npm install -g @angular/cli
npm install -g @angular/cli
Now check whether it was installed correctly using below command:ng --versionIt should show something like:
ng --version
It should show something like:
Now, create a new project using below command:ng new project_name
ng new project_name
Go to project Directory using below command:cd project_name
cd project_name
Start the Angular Application using below command:ng serve
ng serve
Application will start on http://localhost:4200, you will see the following:
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. AngularJS2. Angular 7 Introduction3. Angular 7 Installation4. Angular 7 Data Services and Observables5. Angular 7 Simple To do App6. Get Knowledge of Latest Release of Angular
3. MongoDB: MongoDB is a NoSQL Database. It has JSON like documents. It is document oriented database.
Pre-requisites to learn MongoDB:What is DatabaseDisadvantages of SQL Database
What is DatabaseDisadvantages of SQL Database
What is Database
Disadvantages of SQL Database
Creating a database:use database_name;
use database_name;
Create a collection:db.createCollection("first_collection");
db.createCollection("first_collection");
Insert a record in the Collection:db.first_collection.insertOne(
    {name:"Geeks For Geeks"}
);
db.first_collection.insertOne(
    {name:"Geeks For Geeks"}
);
Print all the records in a collection:db.first_collection.find()
db.first_collection.find()
Links regarding MongoDB:1. MongoDB Introduction2. MongoDB Getting Started3. Defining, Creating and Dropping a MongoDB collection4. How MongoDB works ?5. Get Knowledge of Latest Release of MongoDB
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:JavaScript/ TypeScriptNode.js
JavaScript/ TypeScriptNode.js
JavaScript/ TypeScript
Node.js
Initialize a Project by typing the following command on terminal:npm init
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:{  "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",}
{  "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",}
Install the express using below command:npm install express --save
npm install express --save
Now, the package.json file will be changed to add the dependencies as shown below:{  "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"  }}
{  "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"  }}
Create index.js file and add the below code to it: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}`))
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}`))
Start the express server using below command:node index.js
node index.js
Go to http://localhost:3000 to see the output as below:
Links to learn ExpressJS:1. Introduction to Express2. Design first Application using Express
AngularJS-Misc
MongoDB
Node.js-Misc
JavaScript
MongoDB
Node.js
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Upload and Retrieve Image on MongoDB using Mongoose
Spring Boot JpaRepository with Example
Mongoose | findByIdAndUpdate() Function
Login form using Node.js and MongoDB
Aggregation in MongoDB