How To Deploy a React Application with Nginx, PM2 on Debian 12

To deploy a React application with Nginx and PM2 on Debian 12, you can follow these steps:

Step 1 : Install Nginx:

- Refer to this guide for installing Nginx on Debian 12

Step 2 : Install PM2:

- Refer to this guide for installing PM2 on Debian 12

Step 3 : Create a new React application:

- Run the following command to create a new React application using Create React App:

npx create-react-app my-app

Replace my-app with the desired name for your application.

Step 4 : Build your React application:

- Change the directory to the newly created React application:

cd my-app

- Build the application by running npm run build. This will generate optimized static files in a build directory within your React application's director

npm run build

Step 5 : Start your React application with PM2:

- In your React application's directory, use PM2 to start your application, you can run the following command:

  pm2 serve ./build 3000 --name "my-app" --spa

- Open your web browser and visit http://localhost:3000 to see your React application.

Step 6 : Configure Nginx to serve the React application:

- Create a new Nginx server block configuration file for your React application. For example, you can create a file named my-app.conf in the /etc/nginx/conf.d/ directory:

sudo nano /etc/nginx/conf.d/my-app.conf

- Add the following configuration to the file, replacing your-domain.com with your domain or IP address:

server {
    listen 80;
    server_name example.devtutorial.io;
     location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

- Save the file and exit the text editor.

Step 7 : Verify the Nginx configuration and restart Nginx:

- Validate the Nginx configuration to check for syntax errors:

sudo nginx -t

- If the configuration is valid, restart Nginx to apply the changes:

sudo systemctl restart nginx

Step 8 : Test your React application:

- Open a web browser and enter your domain or IP address in the address bar. Nginx should serve your React application, and you should see your application's user interface.

Congratulations! You have successfully deployed your React application with Nginx and PM2 on Debian 12. Nginx will act as a reverse proxy, forwarding requests to your React application and serving static files efficiently. PM2 will ensure your application stays running and can be easily managed.