Deploy a React Application on Ubuntu VM with Nginx

This guide provides step-by-step instructions to deploy and run a This React application on an Ubuntu VM using Nginx, making it accessible from a public IP.

---

1. Install Node.js and npm

Since React requires Node.js and npm, install them first:

sudo apt update
sudo apt install -y nodejs npm

Verify the installation:

node -v
npm -v

---

2. Install Nginx

Update package lists and install Nginx:

sudo apt install -y nginx

Start and enable Nginx:

sudo systemctl start nginx
sudo systemctl enable nginx

Check Nginx status:

systemctl status nginx

---

3. Clone the React Application from GitHub

Navigate to a temporary directory and clone the repository:

git clone https://github.com/pravinmishraaws/my-react-app.git
cd my-react-app

Open the App.js file

Navigate to your React app’s source folder:

cd my-react-app/src

Open the App.js file in a text editor:

nano App.js

(or use vi/vim if you prefer)

Modify the content

<h2>Deployed by: <strong>Your Full Name</strong></h2>
<p>Date: <strong>DD/MM/YYYY</strong></p>

Update your details like: Your Full Name & Date

---

4. Install Dependencies and Build the React App

Install required dependencies:

npm install

Build the React application:

npm run build

This will generate a build/ folder with production-ready static files.

---

5. Deploy Build Files to Nginx Web Directory

Remove any existing files in the Nginx web directory:

sudo rm -rf /var/www/html/*

Copy the React build files to /var/www/html/:

sudo cp -r build/* /var/www/html/

Set proper permissions:

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

---

6. Configure Nginx for React

Nginx configuration file:

echo 'server {
    listen 80;
    server_name _;
    root /var/www/html;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;
}' | sudo tee /etc/nginx/sites-available/default > /dev/null

Restart Nginx to apply the changes:

sudo systemctl restart nginx

---

7. Find Your Public IP and Access the Application

Retrieve the public IP of your Ubuntu VM:

curl ifconfig.me

Now, students can access the React application in a browser using:

http://<your-public-ip>

For example, if the public IP is 203.0.113.25, visit:

http://203.0.113.25

---

8. Verify the Deployment

Ensure Nginx is correctly serving the React app:

curl <your-public-ip>

If successful, your React app is live!

---

Your React App is Now Live on Ubuntu with Nginx!

Now your React application is deployed on an Ubuntu VM with Nginx, accessible from a public IP.