How Frontend Developers Can Easily Deploy a Project on VPS (Beginner Friendly)

Rakibul islam — Sat, 01 Aug 2026 05:25:35 +0000

Many frontend developers think VPS deployment is difficult and only for backend or DevOps engineers.

But the truth is - Frontend developers can easily deploy their own projects on a VPS.

In this article, I’ll show you a simple step-by-step guide to deploy a frontend project (React / Next.js) on a VPS using PM2, Node.js, and GitHub - no advanced backend knowledge required.

We’ll cover both npm and pnpm.

Who is This Guide For?

Frontend Developers
React / Next.js Developers
Beginners who want to deploy without DevOps complexity

Not required: Docker, Nginx, CI/CD

Requirements

Before starting, make sure you have:

A VPS (A2 Hosting, DigitalOcean, AWS, etc.)
VPS IP Address
Username & Password
A frontend project on GitHub
Node.js installed on VPS
npm or pnpm installed
PM2 installed globally

Install PM2

Using npm:

npm install -g pm2

Using pnpm:

pnpm add -g pm2

Step 1: Login to VPS Using Termius

Open Termius (or any terminal) and login to your VPS using:

IP Address
Username
Password

After successful login, you will get terminal access.

Step 2: Go to Project Directory

cd /var/www

/var/www is the standard location for web projects on most VPS.

Step 3: Check Existing Files

ls

Step 4: Clone Project from GitHub (Using SSH)

git clone git@github.com:YourUsername/YourProject.git

Important Notes:

Your GitHub repository must have SSH key set up
VPS SSH key should also be configured

Step 5: Verify Project Folder

ls

You should now see your project folder (for example: my-project).

Step 6: Enter Project Directory

cd my-project

Step 7: Install Dependencies

Using npm:

npm install

Using pnpm:

pnpm install

Step 8: Build the Project

Using npm:

npm run build

Using pnpm:

pnpm build

Step 9: Open Port in VPS Firewall

sudo ufw allow 3000

Step 10: Reload Firewall

sudo ufw reload

Step 11: Start Project Using PM2

Using npm:

pm2 start npm --name "my-project" -- start -- --port 3000

Using pnpm:

pm2 start pnpm --name "my-project" -- start -- --port 3000

Explanation:

my-project → Process name
3000 → Port number (you can change it)

Step 12: Check PM2 Process List

pm2 ls

Step 13: Restart Project (Safe Practice)

pm2 restart my-project

Step 14: Access Live Project in Browser

Open your browser and visit:

http://YOUR_VPS_IP:3000

Congratulations!

Your frontend project is now live on the VPS.

Final Tips

Always use PM2 so that your project keeps running even if you close the terminal.
You can change the port number according to your need.
For custom domain, you can later add Nginx (optional).
Prefer pnpm if you want faster installs and less disk space usage.

If you found this guide helpful, feel free to check out more of my work here:

Portfolio: https://rakibulislamdev.me

Original Article: https://rakibulislamdev.me/blog/how-frontend-developers-can-easily-deploy-a-project-on-vps-beginner-friendly

DEV Community: Rakibul islam

How Frontend Developers Can Easily Deploy a Project on VPS (Beginner Friendly)

Who is This Guide For?

Requirements

Install PM2

Step 1: Login to VPS Using Termius

Step 2: Go to Project Directory

Step 3: Check Existing Files

Step 4: Clone Project from GitHub (Using SSH)

Step 5: Verify Project Folder

Step 6: Enter Project Directory

Step 7: Install Dependencies

Step 8: Build the Project

Step 9: Open Port in VPS Firewall

Step 10: Reload Firewall

Step 11: Start Project Using PM2

Step 12: Check PM2 Process List

Step 13: Restart Project (Safe Practice)

Step 14: Access Live Project in Browser

Congratulations!

Final Tips