DEV Community

Mehedi Hasan
Mehedi Hasan

Posted on

How To Deploy a React Application with Nginx on Ubuntu

#react #vite #nginx #aws

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

🔹 On CentOS: 

sudo yum install nginx -y
Enter fullscreen mode Exit fullscreen mode

🔹 On macOS (Homebrew): 

brew install nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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;
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode
  1. Test the configuration for any syntax errors: 
sudo nginx -t
Enter fullscreen mode Exit fullscreen mode
  1. Restart NGINX to apply the changes: 
sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

✅ 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
Enter fullscreen mode Exit fullscreen mode
  1. Copy the build files from your dist folder to the NGINX web root: 
sudo cp -r dist/* /var/www/vite-app/
Enter fullscreen mode Exit fullscreen mode
  1. Set the correct ownership of the files: 
sudo chown -R www-data:www-data /var/www/vite-app
Enter fullscreen mode Exit fullscreen mode

✅ 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
Enter fullscreen mode Exit fullscreen mode
  1. Run Certbot to generate and install the SSL certificate: 
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
Enter fullscreen mode Exit fullscreen mode

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! 🚀

Top comments (0)