How to Deploy React & Node.js on DigitalOcean

Disclosure: We earn commissions when you shop through the links below, at no additional cost to you.

Deploying a React and Node.js application to production can feel complicated if you are doing it for the first time. There are servers, domains, environment variables, security, and performance considerations. After deploying multiple projects myself, I found DigitalOcean to be one of the simplest and most developer-friendly platforms, especially for frontend and full-stack developers.

In this guide, I will walk you through how to deploy a React frontend and a Node.js backend on DigitalOcean step by step. This article is written for developers who want a clean, production-ready setup without unnecessary complexity.

Why Choose DigitalOcean for React and Node.js

DigitalOcean is popular among developers for several reasons. The platform is simple, pricing is transparent, and the documentation is excellent.

Some key benefits include:

• Easy to create and manage servers called Droplets
• Affordable pricing starting at a few dollars per month
• Excellent performance for small to medium applications
• Built-in firewall, monitoring, and backups
• Perfect for React, Node.js, and full-stack JavaScript apps

If you are running a blog, SaaS, portfolio, or client project, DigitalOcean is more than enough for production use.

Before starting the deployment, make sure your server is properly prepared. I’ve created a complete DigitalOcean droplet setup checklist for Node.js apps that walks through security, firewall, and server configuration steps.

Application Architecture Overview

Before deployment, let us quickly understand the structure we are deploying.

Frontend:
React application built using Vite or Create React App

Backend:
Node.js with Express handling APIs

Server:
Ubuntu Droplet on DigitalOcean

Web Server:
Nginx used as a reverse proxy

Process Manager:
PM2 to keep the Node.js app running

Step 1: Create a DigitalOcean Droplet

After logging into your DigitalOcean account, create a new Droplet.

Choose the following options:

• Image: Ubuntu 22.04 LTS
• Plan: Basic Shared CPU
• Size: 1GB RAM is enough for starting
• Authentication: SSH Key recommended
• Datacenter: Choose closest to your audience

Once created, copy the public IP address of your server.

Step 2: Connect to Server Using SSH

From your local machine, connect to the server using SSH:

ssh root@your_server_ip

After login, update the system:

apt update && apt upgrade -y

Step 3: Install Node.js and npm

You can try installing Node.js using NodeSource for better stability:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
apt install -y nodejs

Verify installation:

node -v
npm -v

Step 4: Install and Configure PM2

PM2 keeps your Node.js app running even after server restarts.

Install PM2 globally:

npm install pm2 -g

Enable PM2 startup:

pm2 startup

Follow the command shown in output.

Step 5: Deploy Node.js Backend

Create a directory for your backend:

mkdir backend
cd backend

Upload your backend code using Git or SCP.

Install dependencies:

npm install

Create a .env file for environment variables:

PORT=5000
NODE_ENV=production
DATABASE_URL=your_database_url

Start the server using PM2:

pm2 start index.js --name backend-api
pm2 save

Your backend is now running in the background.

Step 6: Install Nginx

Nginx will act as a reverse proxy.

Install Nginx:

apt install nginx -y

Allow firewall access:

ufw allow 'Nginx Full'

Step 7: Configure Nginx for Backend API

Create a new Nginx config file:

nano /etc/nginx/sites-available/backend

Add the following configuration:

server {
    listen 80;
    server_name yourdomain.com;

    location /api {
        proxy_pass http://localhost:5000;
        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;
    }
}

Enable the config:

ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx

Step 8: Build and Deploy React App

On your local machine, build the React app:

npm run build

Upload the dist or build folder to the server:

/var/www/react-app

Step 9: Configure Nginx for React Frontend

Create another config file:

nano /etc/nginx/sites-available/frontend

Add:

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/react-app;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

Enable it:

ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx

Now your React app is live.

Step 10: Secure with SSL Using Certbot

Install Certbot:

apt install certbot python3-certbot-nginx -y

Run SSL setup:

certbot --nginx -d yourdomain.com

SSL will be automatically configured and renewed.

Step 11: Environment and Performance Tips

• Always use environment variables for secrets
• Enable gzip compression in Nginx
• Use PM2 monitoring for memory leaks
• Keep server updated monthly
• Enable DigitalOcean backups

Common Deployment Errors and Fixes

Even with a proper setup, deployment issues can still happen in production. If you face problems like 502 errors, PM2 crashes, or firewall blocks, check this guide on common DigitalOcean deployment errors and fixes to troubleshoot quickly.

React App Blank Page

Ensure try_files $uri /index.html is present.

API Not Working

Check firewall and Nginx proxy configuration.

PM2 App Stops

Run pm2 logs to debug.

If you want to avoid common production issues, follow this DigitalOcean droplet setup checklist for Node.js apps to prepare your server before deployment.

Frequently Asked Questions

Q1: How much does it cost to host a small React & Node.js app on DigitalOcean?

DigitalOcean is very affordable for small projects. You can start with a $5/month Droplet, which is enough for most personal apps or prototypes. As your app grows, you can upgrade to a larger Droplet for better performance. The pricing is transparent, so you won’t face unexpected bills.

Q2: Can I deploy both frontend and backend on the same Droplet?

Yes, you can. For small apps or development projects, hosting both React frontend and Node.js backend on a single Droplet works fine. Just make sure to use proper directories, configure Nginx correctly, and use a process manager like PM2 to keep your backend running.

Q3: Do I need a domain to deploy my app?

Technically, no. You can access your app using the DigitalOcean Droplet’s IP address. However, having a domain makes your app look professional, easier to remember, and is essential if you want SSL certificates for HTTPS.

Q4: What happens if my Node.js app crashes after deployment?

If your app crashes, you don’t have to worry. Using PM2 as a process manager ensures your backend restarts automatically. You can also check logs with pm2 logs to debug issues. Regular monitoring and keeping dependencies updated will prevent most crashes.

Q5: Can I scale my app if it gets more traffic?

Absolutely. DigitalOcean makes scaling straightforward. You can upgrade your Droplet to more CPU and RAM, add load balancers, or even use multiple Droplets with a database. For small apps, the default setup is enough, but you have options to grow as your traffic increases.

Final Thoughts

Deploying React and Node.js on DigitalOcean is straightforward once you understand the flow. This setup is production-ready, scalable, and cost-effective. It is perfect for developers who want full control over their infrastructure without the complexity of enterprise cloud platforms.

If you are serious about building and deploying real-world applications, DigitalOcean is a platform worth using.