Part 5 — Deploying the React.js Frontend on Oracle Cloud (OCI)

Overview

Now that your Node.js backend API is live and running on Oracle Cloud, it’s time to deploy your React.js frontend.

In a production environment, your frontend (React build) will be served through NGINX, while your backend API continues running via PM2 on the same server.

This setup is ideal for:

• Full-stack web apps (Node + React combo)
• Fast static content delivery
• Simple configuration with one compute instance
• Low-cost hosting using OCI Free Tier

By the end of this tutorial, you’ll have your React.js website running on Oracle Cloud with a live connection to your Node.js API.

Step 1: Connect to Your Oracle Compute Instance

If your instance is already running, connect to it via SSH:

ssh -i ~/Downloads/oci-key.pem ubuntu@<your-public-ip>

Once connected, navigate to your home directory:

cd ~

Step 2: Install Node.js (If Not Installed Yet)

Since React requires Node.js to build, make sure it’s available:

node -v
npm -v

If not installed, run:

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

Step 3: Upload or Clone Your React App

You can either clone your project from GitHub or upload it manually.

Option 1: Clone from GitHub

git clone https://github.com/your-username/your-react-app.git
cd your-react-app

Option 2: Upload via SCP

If you have the project locally, upload it:

scp -i ~/Downloads/oci-key.pem -r ./your-react-app ubuntu@<your-ip>:/home/ubuntu/

Then navigate inside it:

cd your-react-app

Step 4: Install Dependencies and Build the App

Install all required npm dependencies:

npm install

Then, build your app for production:

npm run build

This will create an optimized build folder:

/build

Step 5: Move Build Files to NGINX Web Directory

We’ll use NGINX to serve the React static files.

1. Remove the default NGINX web directory:

   sudo rm -rf /var/www/html

2. Move your React build files:

   sudo mv build /var/www/html

3. Adjust permissions:

   sudo chown -R www-data:www-data /var/www/html
   sudo chmod -R 755 /var/www/html

Step 6: Configure NGINX for React Frontend

Now, edit your NGINX configuration:

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

Replace the content with:

server {
    listen 80;
    server_name _;

    root /var/www/html;
    index index.html index.htm;

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

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

💡 The /api/ block proxies backend requests to your Node.js API running on port 5000.

Step 7: Test NGINX Configuration

Check if the configuration is valid:

sudo nginx -t

If it passes, restart NGINX:

sudo systemctl restart nginx

Now open your browser and go to:

http://<your-public-ip>/

You should see your React app’s homepage live 

Step 8: (Optional) Enable HTTPS with Let’s Encrypt

To secure your site with SSL:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx

Follow the instructions to issue an SSL certificate for your domain.
Once complete, your site will be accessible via https://yourdomain.com.

Step 9: Backend + Frontend Integration Test

Make sure your React app communicates correctly with your backend.
Update your frontend .env file before building if needed:

REACT_APP_API_URL=https://yourdomain.com/api

Then rebuild:

npm run build
sudo rm -rf /var/www/html
sudo mv build /var/www/html
sudo systemctl restart nginx

Now your frontend should be able to fetch data from your backend without CORS issues.

Step 10: Verify Everything

✅ React app accessible via http://<public-ip> or your domain
✅ API requests routed to Node.js backend
✅ PM2 ensures backend runs continuously
✅ NGINX serves static frontend and proxies backend requests

You’ve successfully deployed a complete Node.js + React.js full stack app on Oracle Cloud! 🎉

Bonus Tips

• Use PM2 logs to monitor the backend:

  pm2 logs node-backend

• Use OCI monitoring for instance metrics like CPU & memory.
• Enable OCI Object Storage if you want to store media files.
• For scaling, use OCI Load Balancer to distribute traffic between multiple instances.

Summary

In this Part 5, you learned how to:

• Upload and build your React app on OCI.
• Serve it through NGINX.
• Connect it seamlessly with your Node.js API.
• Secure your website with HTTPS using Let’s Encrypt.

Your Node.js + React.js application is now fully deployed and production-ready on Oracle Cloud — fast, secure, and scalable.