Let’s Learn about MERN Stack

MERN Stack is a Javascript stack for deploying full-stack web applications more easily and quickly.It’s intended to make the development process go more smoothly and efficiently.It is made using 4 technologies. Each of these four powerful technologies provides an end-to-end framework for developers to work in, and they all play an important role in web application development.

MERN stands for;

M: MongoDB - Document oriented No-SQL database used to store application data

E: Express -It is a NodeJs web framework which used in building the backend

R: React.js -It is a client side Javascript framework created by Facebook. It’s used to develop UI components for the single-page web application’s user interface.

N: Node.js -The runtime environment for JavaScript. It’s used to run JavaScript on a computer instead of in a browser.

How does MERN stack work?

The MERN design makes it simple to build a three-tier architecture (frontend, backend, and database) using only JavaScript and JSON.

How to get started?

Create a new project folder. Then enter to the folder and type ‘cmd’ command to navigate in to the terminal. Then type the below

npm init -y

Then you get these commands and you can see the package.json file.

Install dependencies

Install the required modules for the backend setup. Then type the following command and press enter.

npm install express mongoose body-parser --save

or

npm i express mongoose body-parser 

Then if you want add nodemon. you can install it;

nodemon : Nodemon is a tool that aids in the development of node.js apps by automatically restarting them when file changes in the directory are detected.

This is optional but it’s better to have nodemon installed.

npm install --save-dev nodemon

or

npm i nodemon

Now the pacakage.json look like this

Let’s Install dotenv.

Dotenv is a zero-dependency module that loads process.env with environment variables from a .env file. type in the terminal

npm i dotenv

Implement the server

Create a folder name backend and then create a file name server.js and then type the following

const express = require('express');
const dotenv = require ('dotenv');
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);});

Type the following in the package.json

"scripts": {
"start":"node backend/server",
"server": "nodemon backend/server"
},

but if you npm version is above 14 we can type as below as well

Type this command in the package.json

"type": "module";

and then we can type in the server.js

import express from 'express'
import dotenv from 'dotenv'

Now,run the command

npm run server

Now the server starts running. You can check this using the browser and entering http://localhost:3038

To be continued….

Thank you!