How to Build a MEAN Stack Enviornment

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- MongoDB: cross platform document-oriented database
• E- Express.js: back end web application framework
• A- Angular: open source front end framework
• N- Node.js: cross platform back end java script runtime environment

How does the MEAN stack work

npm package initialization

create a project folder, enter the folder through the terminal, then run the following command:

npm init -y

after that, you will get something link this:

Here you can see the project package.json file.

Installing dependencies

Now, I add some dependencies.

npm i express mongoose body-parser cors

type this command and press enter,You will see something like this:

• body-parser allows us to get the data throughout the request
• express is our main framework
• mongoose is used to connect with MongoDB
• cors is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.

Now I want to add nodemon. if you don’t want to add this,you can skip it —it’s optional.

npm i nodemon

nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

After that, your package.json should look like this:

Implement the Server

Now create a file named server.js

Then paste the code below:

// server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello world!'));
const PORT = 3038;
const port = process.env.PORT || 3038;
app.listen(PORT, function(){console.log("Server running on port : " + PORT);});

Now, run the command

npm run server

You will see your server running on port 3038.You can also check it from the browser: open the browser and enter http://localhost:3038 .

Install Angular CLI

npm install -g @angular/cli

after that you will check the angular version following command:

ng --version

after run above command you can see like this:

Create Angular project

ng new PROJECT-NAME

Answer all questions like below which we will add Angular Routing and use SCSS or CSS as a stylesheet.

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS or CSS             

Initial project structure

Inside the project directory, our initial file structure should look like this:

Next,go to the angular new project folder

cd PROJECT-NAME

after,

run the Angular application using following command

ng serve

After running this command you can see like this:

Then Open the browser then go to this URL `localhost:4200` and you will see this Angular landing page.

To be continued.. Thank you!