MERN stack project VPS hosting

Let's start Deploy MERN project using simple steps:
 

Log in to Your VPS in Terminal:

ssh root@your_vps_ip

In my Case:

ssh [email protected]

Enter [email protected]'s password:

And hit Enter.

Now change root to simple User:

su your_username

In my Case:

su theagleye

 

Update and Upgrade Your System

sudo apt update

sudo apt upgrade -y

 

Install Node.js and npm 

Download Node.js 20.x LTS

sudo curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -

If it asks for password then fill up the user password. It asks only for one time.

Install Node:

sudo apt-get install -y nodejs

From here a new phase is coming we will start adding our project on the VPS.
There are multiple ways to do this. But we use the most recommended way to add our project on VPS server.
By using GitHub.

Let's Install git.

sudo apt install -y git

 

All set, now let's deploy the project using git.

I have a project here on Git Hub.

https://github.com/banvro/mern-todo-evergreen-project

This is on local now.

I want to host this Ever Green todo project on VPS server. With frontend and backend, both are connected.

Before cloning the project first make some DB configuration as we set here.

Go to Backend server.js. 
Change the MongoDB uri with the created URI. If you don't know how to do click here.

 

In initial stage, it looks like:

mongoose
  .connect("mongodb://127.0.0.1:27017/your_database_name")
  .then(() => console.log("MongoDB connected..."))
  .catch((err) => console.log(err));

Change this to the created URI.
In my case, it looks like:

mongoose
  .connect("mongodb://todomaker:todomaker%[email protected]:27017/todoProjectdb")
  .then(() => console.log("MongoDB connected..."))
  .catch((err) => console.log(err));

But wait, they are easily accessible by anyone so let's hide this use .env file to protect this database configuration.

So change this to:

mongoose
  .connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("MongoDB connected..."))
  .catch((err) => console.log("Error connecting to MongoDB:", err));

After these changes, now push the changes to git.

Now we set all the DB configurations let's clone the project:
let's go back to our VPS server.
and run these commands:

 

Make a directory where we store our project

sudo mkdir /var/www

Move to  /var/www using:

cd /var/www

 

Now clone the repo (your project)

sudo git clone your_project_link

In my case:

sudo git clone https://github.com/banvro/mern-todo-evergreen-project.git

Remember: If your git repo is public then it simply getting clone. But if the repo is private then you have to pass your GitHub credentials.

 

If you want to check project is getting cloned or not then simply use command.

ls

theagleye@srv691477:/var/www$ ls
mern-todo-evergreen-project
theagleye@srv691477:/var/www$

The name of the folder is little weird, let's make the name little good:
 

sudo mv old_folder_name new_folder_name

In my case.

sudo mv mern-todo-evergreen-project  greentodo

Now, check whether the file is renamed or not.

ls

 

Move inside the directory.

cd folder_name

In my case

cd greentodo

Now there are two folders. Name frontend and backend.
Shows like:

theagleye@srv691477:/var/www/greentodo$ ls
backend  frontend

 

Let's first run/Host backend:

Move to the backend folder:

cd backend

Install Dependencies

sudo npm install

 

Create .env file & configure Environment Variables

sudo nano .env

and add this in file:

PORT=5000
MONGO_URI=mongodb://todomaker:todomaker%[email protected]:27017/todoProjectdb

It looks like:

 

Then save the .env file and its changes by pressing:
ctrl + x, 
then Y and 
hit Enter.

 

Installs PM2 globally for Node.js management. To keep backend running continuously.

sudo npm install -g pm2

Starts the backend server (server.js)

sudo pm2 start Server.js --name project-backend

It looks like this:

theagleye@srv691477:/var/www/greentodo/backend$ sudo pm2 start Server.js --name project-backend
[PM2] Starting /var/www/greentodo/backend/Server.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ project-backend    │ fork     │ 0    │ online    │ 0%       │ 40.4mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

 

start all managed processes automatically every time.

sudo pm2 startup

sudo pm2 save

Allowing backend port in firewall

sudo ufw status

If firewall is disabled then enable it

sudo ufw enable

Press y and hit enter.

sudo ufw allow 'OpenSSH'

My backend is running on 5000 port. check your port and allow that too.

sudo ufw allow 5000

 

The backend is all set.

Now let's Deploying the React Frontends.

Go to your frontend folder.

Currently, i am inside the backend folder.
Go one step back.

cd ..

Check:

ls

It looks like:

theagleye@srv691477:/var/www/greentodo$ ls
backend  frontend

Go to the frontend folder:

cd frontend

Install packages.

sudo npm install

Create build of the project:

sudo npm run build

 

The front end and backend are hosted. Still, this is not working.
Till we set Nginx proxy.