How to Host a React Vite App on NGINX

Hosting your React Vite app on NGINX allows you to serve your production build efficiently. This guide walks you through the steps to set up and configure NGINX for your React Vite app.

✅ Step 1: Build the Vite App

Before deploying your app, you'll need to create a production-ready build of your Vite app. This generates optimized files that will be served by NGINX.

Run the following command:

npm run build

This will create a dist/ folder in your project, which contains the files required to host your app.

✅ Step 2: Install & Configure NGINX

Install NGINX

If NGINX is not already installed on your server, you can install it using the appropriate commands for your operating system:

🔹 On Ubuntu/Debian: 

sudo apt update && sudo apt install nginx -y

🔹 On CentOS: 

sudo yum install nginx -y

🔹 On macOS (Homebrew): 

brew install nginx

Once NGINX is installed, we can proceed to configure it.

✅ Step 3: Configure NGINX for Vite

Now, let's set up an NGINX configuration to serve your Vite app.

  1. Create a new NGINX configuration file: 
sudo nano /etc/nginx/sites-available/vite-app
  1. Add the following configuration to the file: 
server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/vite-app/dist;
    index index.html;

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

    error_page 404 /index.html;
}

This configuration does the following:

  • Listens on port 80 (default HTTP port).
  • Serves files from the /var/www/vite-app/dist directory.
  • Handles requests with the try_files directive, falling back to index.html for client-side routing in your React app.

Note: Replace yourdomain.com with your actual domain name or server IP address.

✅ Step 4: Enable the Configuration

To enable the configuration, run the following commands:

  1. Create a symbolic link to the NGINX sites-enabled directory: 
sudo ln -s /etc/nginx/sites-available/vite-app /etc/nginx/sites-enabled/
  1. Test the configuration for any syntax errors: 
sudo nginx -t
  1. Restart NGINX to apply the changes: 
sudo systemctl restart nginx

✅ Step 5: Deploy Your Vite App

Now, it's time to move your production build files to the appropriate NGINX directory.

  1. Create the web root directory if it doesn't exist: 
sudo mkdir -p /var/www/vite-app
  1. Copy the build files from your dist folder to the NGINX web root: 
sudo cp -r dist/* /var/www/vite-app/
  1. Set the correct ownership of the files: 
sudo chown -R www-data:www-data /var/www/vite-app

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

For added security, you can enable HTTPS with Let’s Encrypt SSL certificates. Here's how to set it up:

  1. Install Certbot and its NGINX plugin: 
sudo apt install certbot python3-certbot-nginx -y
  1. Run Certbot to generate and install the SSL certificate: 
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

This will automatically configure your NGINX server for HTTPS, securing your app with SSL.

🎯 And You're Done!

Congratulations! 🎉 Your React Vite app is now hosted and live on NGINX. You’ve successfully configured your server to serve your optimized Vite app build, and optionally secured it with SSL.

Let me know if you need any further assistance! 🚀