JavaScript

How to set up the Node server in MERN Stack development

In MERN stack development, the tier which is present in between the MongoDB database and the React.js front-end is the “Express.js”. It can be described as a minimalist, unopinionated, and fast Web framework for Node.js. Express.js framework operates the Node.js server inside it. You can connect to the Express.js functions from your application front-end by sending the POSTs, GETs, or HTTP requests. These specified functions are then utilized to change or access the MongoDB data either via Promises or callbacks. Express.js also offers powerful models for handling HTTP responses, requests, and URL routing.

This write-up will guide you in creating, setting up, and running the Node server in MERN Stack development. Moreover, the procedure of installing the required dependencies will be also provided. So, let’s start!

How to set up the Node server in MERN Stack Development

As we have already mentioned, in MERN Stack development, “Node.js” is used to develop the application’s backend. The JavaScript Environment provided by the “Node.js” permits users to execute the code on the server. It also offers enormous useful packages which can be downloaded with the help of “npm” or the node package manager.

To set up the Node server in MERN Stack development, the first thing you need to do is to download Node.js on your system through its official website:

Next, use the downloaded file to complete the installation of Node.js. After completing the specified operation, execute the below-given in your Command Prompt:

>node -v

The above-given “node” command with the “-v” option will print out the current version of the “Node.js” which is installed on your system:

After installing Node.js, we will move towards the server’s development procedure. For this purpose, firstly, we will create a base folder and then install all of the required packages or dependencies for the Node server development.

For the specified operation, you can use also Command Prompt. However, we will utilize the “Visual Studio Code” terminal, making it easy to work in the Node Server files.

In the next step, we will open up our base folder by using the “Open Folder” option of the “File” menu:

We have selected the “Employee-mern-project” folder for storing the files related to the Node server of the MERN stack:

Now, press “CTRL+SHIFT+`” to open a new terminal window in the Visual Studio code. You can also utilize the “Terminal” menu for this purpose:

In the next step, we will create a “backend” folder inside our “Employee-mern-project” root or base folder. To do the same, you can execute the below-given “mkdir” command in the opened terminal:

>mkdir backend

After doing so, we will move into the newly created “backend” folder to add the server related file and packages in it:

>cd backend

Inside the “backend” folder, we will create a “package.json” file. The package.json file is the core element of a Node server in the MERN stack development. It comprises your MERN stack project’s metadata and defines the functional attributes that the npm can utilize for executing scripts and installing dependencies.

To create a new package.json file for your Node server, type out the following command:

>npm init -y

How to install dependencies for Node server in MERN Stack Development

This section will demonstrate the procedure of installing essential dependencies such as “express”, “cors”, “mongoose”, and “dotenv” for your Node server in the MERN Stack Development. The node package manager or “npm” can be used for installing the specified dependencies in the following way:

>npm install express cors mongoose dotenv

Here:

  • “express” is added to install “Express” which is a lightweight web framework for Node.js. It also supports many middlewares, which assists in making the code easier and shorter to write.
  • “cors” is an acronym for Cross-Origin Resource Sharing. This package permits AJAX requests to access the resources from the remote hosts.
  • “mongoose” is added to install the “mongoose” package. The mongoose package helps the Node server interact with MongoDB in MERN stack development.
  • Lastly, the “dotenv” package will load the environment variables from the “.env” to the “process.env” file. It also manages the database credentials in a collaborative environment.

For our Node server, another package that we will install is “nodemon”. It automatically restarts the node application when you make some changes in the file while developing the Node.js based application:

>sudo npm install -g nodemon

How to run the Node server in MERN Stack Development

Till this point, we have installed Node.js, the required packages, and dependencies. Now it’s time to create and run the backend Node.js server. To do so, click on the “backend” folder, and from the drop-down menu, select the “New File” option:

Here, you can a new “server.js” JavaScript file is added in the backend folder:

Now, in the “server.js” file, we will create an “express” server, then we will attach the “express.json” middleware and “cors”. The “express.json” middleware will send and receive “JSON”. Also, the Node.js server will be permitted to listen on the “5000” port:

const express = require('express');

const cors = require('cors');

require('dotenv').config();


const app = express();

const port = process.env.PORT || 5000;


app.use(cors());

app.use(express.json());

app.listen(port, () =>{

    console.log(`Server is running on port: ${port}`);

});

After adding the above-given code in the “server.js” file, press “CTRL+S” to save the changes and then run your Node server using “nodemon”:

>nodemon server

From the output, you can see that our server is successfully running on port “5000”:

Conclusion

You will need to set up a Node server to compile your JavaScript code before running it on the backend. Express.js is an HTTP framework that resides in the Node.js server and has a lot of out-of-the-box features. With the help of Express.js, fully functional APIs are developed using minimal code. This write-up guided you in creating, setting up, and running the Node server in MERN Stack development. Moreover, the procedure of installing the required dependencies is also provided.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.