Setting Up a Basic Server for the MERN Stack

MERN Tech Stack

Running a Node.js server and React application on a single Ubuntu server.

Introduction

The MERN stack, consisting of MongoDB, Express.js, React, and Node.js, is a powerful combination of technologies that allows developers to create robust and dynamic web applications. In this guide, we will walk you through the steps to set up a basic server for your MERN stack application on an Ubuntu server.

Prerequisites

Before we dive into the setup, make sure you have the following:

An Ubuntu server: This can be a physical server or a virtual machine.
Basic knowledge of command-line interface: Familiarity with Linux commands will be beneficial.
Access to a terminal: You’ll be executing various commands to install and configure the necessary components.

Step 1: Update and Upgrade the System

Start by updating your package lists and upgrading your existing packages to ensure everything is up-to-date.

sudo apt update
sudo apt upgrade -y

Step 2: Install Node.js and NPM

Node.js is the backbone of your server, allowing you to run JavaScript code on the server side. NPM (Node Package Manager) comes bundled with Node.js and is essential for managing your project’s dependencies.

sudo apt install -y nodejs npm

Verify the installation by checking the versions:

node -v
npm -v

Step 3: Install MongoDB

MongoDB is a NoSQL database that stores data in JSON-like documents. It’s highly scalable and flexible, making it a great choice for modern applications.

To install MongoDB, follow these steps:

Import the public key used by the package management system:

 wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

Create a list file for MongoDB:

 echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list

Reload the local package database:
```
 sudo apt update
```
Install MongoDB:
```
 sudo apt install -y mongodb-org
```
Start MongoDB:
```
 sudo systemctl start mongod
```
Verify that MongoDB has started successfully:
```
 sudo systemctl status mongod
```
(Optional) Enable MongoDB to start on boot:
```
 sudo systemctl enable mongod
```

Step 4: Install PM2 to Manage Node.js Applications

PM2 is a process manager that will help you manage your Node.js application processes, making it easier to keep your application running smoothly.

Install PM2 globally using NPM:

sudo npm install -g pm2

You can now start your Node.js application with PM2:

pm2 start app.js

To make sure PM2 starts on boot, run:

pm2 startup systemd
pm2 save

Step 5: Set Up NGINX as a Reverse Proxy

NGINX can act as a reverse proxy, forwarding client requests to your Node.js application. This adds an extra layer of security and allows you to easily manage multiple applications.

Install NGINX:
```
 sudo apt install nginx
```

Configure NGINX to proxy requests to your Node.js application. Open the default configuration file:

 sudo nano /etc/nginx/sites-available/default

Replace the contents with the following configuration:

 server {
     listen 80;

     server_name your_domain_or_IP;

     location / {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
         proxy_set_header Host $host;
         proxy_cache_bypass $http_upgrade;
     }
 }

Save and exit the file, then test the configuration:
```
 sudo nginx -t
```
If there are no errors, reload NGINX:
```
 sudo systemctl reload nginx
```

Step 6: Deploy Your React Application

Now that your server is set up, it’s time to deploy your React application. Follow these steps:

Build the React Application

Navigate to your React application directory and build the application for production:
```
 npm run build
```
This will create a `build` directory containing the optimized production version of your React app.

Configure NGINX to Serve the React App

Configure NGINX to serve the static files generated by your React app. Edit the NGINX configuration file:

 sudo nano /etc/nginx/sites-available/default

Update the configuration to look like this:

 server {
     listen 80;
     server_name your_domain_or_IP;

     location / {
         root /path/to/your/build;
         try_files $uri /index.html;
     }

     location /api/ {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
         proxy_set_header Host $host;
         proxy_cache_bypass $http_upgrade;
     }
 }

Replace `/path/to/your/build` with the actual path to the `build` directory of your React app.

Save and exit the file, then test the configuration:
```
 sudo nginx -t
```
If there are no errors, reload NGINX:
```
 sudo systemctl reload nginx
```

Your React application is now being served by NGINX!

Step 7: Test Your Setup

With everything configured, it’s time to test your setup. Navigate to your server’s IP address or domain name in a web browser. You should see your React application running, and any API requests should be handled by your Node.js backend.

Conclusion

Congratulations! You’ve successfully set up a basic server for the MERN stack and deployed a React application. This setup provides a solid foundation for deploying your web applications. As you continue to develop your application, you can expand on this setup by adding SSL certificates, setting up a CI/CD pipeline, and optimizing your server’s performance.

Feel free to ask any questions or share your experiences in the comments below. Happy coding!

Tags: MERN Stack MongoDB Tech Stack Express.js React.js Node.js React