Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Publishing a React Application with Nginx (Ubuntu) | Production Guide

Publishing React Application on Ubuntu with Nginx​

Going live with a React app is not just about copying files.
This guide describes a fast, secure and SPA-compliant publishing process.

What Will You Learn in This Guide?​

  • Creating production build for React application
  • Configure Nginx compatible with React Router
  • Increase performance with gzip and cache settings
  • HTTPS migration with Let's Encrypt
  • Simple CI/CD logic

1. Preparing and Compiling the React Project​

First, get the production output of the React project.

npx create-react-app react-deploy
cd react-deploy
npm run build
  • This command produces the optimized build/ folder.

2. Creating the Server Directory Structure​

  1. Connect to the server via SSH.

ssh kullanici@sunucu_ip
  1. Prepare the web root directory for React files.

sudo mkdir -p /var/www/ornek.com/html
sudo chown -R $USER:$USER /var/www/ornek.com
  • This directory is served by Nginx.

3. Uploading Build Files to the Server​

  1. Transfer the build output from the local machine to the server.

scp -r build/* kullanici@sunucu_ip:/var/www/ornek.com/html
  • This process brings the React application to live.

4. React Optimized Nginx Configuration​

  1. Fallback is mandatory for SPAs.

server {
    listen 80;
    server_name ornek.com www.ornek.com;

    root /var/www/ornek.com/html;
    index index.html;

    gzip on;
    gzip_types text/plain text/css application/javascript application/json;

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

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
}
  • try_files line is critical for React Router.

Test the configuration:


sudo nginx -t
sudo systemctl reload nginx

5. SSL (HTTPS) Setup​

  1. HTTPS is mandatory for SEO and security.

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d ornek.com -d www.ornek.com
  • This process automatically redirects HTTP → HTTPS.

6. (Optional) API Reverse Proxy​

  1. Frontend and backend can run under the same domain.

location /api/ {
    proxy_pass http://localhost:3001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
  • This structure eliminates CORS problems.

7. (Optional) CI/CD Logic (Short)​

  1. The most common approach in React projects:

-npm run build

  • /var/www/.../html with rsync

  • nginx reload

This process can be automated with GitHub Actions or GitLab CI.

Frequently Asked Questions (FAQ)​

1. Why do I get a 404 when I refresh the page? There is no SPA fallback. try_files /index.html is a must.

2. Does gzip really make a difference? Yes. Provides 60–80% reduction in JS files.

3. Where should React files be placed? In the /var/www/domain/html directory.

4. Nginx or Apache? Nginx is faster in React SPAs.

Result​

With this setup your React app:

⚡ Fast

🔐 Safe

🔁 SPA compatible

📈 SEO friendly

becomes.

You can immediately publish your professional React projects on the GenixNode infrastructure with this architecture.