Deploy & Host a React Application on NGINX with Ubuntu

Prerequisites

1. Ubuntu Machine
2. Nginx on Ubuntu
3. Node and NPM on local device and ubuntu
4. Template React App
5. GitHub

Flow

• Deploy Ubuntu machine on any cloud provider if you dont have setup on local device

• On Ubuntu, run following cmd to install nginx

• Update package index: Before installing any new software, it's a good practice to update the package index to ensure you're getting the latest versions.
  sudo apt update

• Install Nginx: Use apt to install Nginx.
  sudo apt install nginx

• Start Nginx: Once installed, Nginx should start automatically. If not, you can start it manually.
  sudo systemctl start nginx

• Enable Nginx to start on boot: If you want Nginx to start automatically whenever your instance is rebooted, you can enable it.
  sudo systemctl enable nginx

• On local device, run this cmd

• npx create-react-app react-app
  NOTE: I have use react-app as a name of my react-app, you can keep whatever name you want

• Push this code on github

• On Ubuntu, run this cmd

• git clone https://github.com/exampleuser/example-repository.git
  Note: Above URL is example, you need to provide you repo URL

• npm run build

• cd /etc/nginx/sites-available

• sudo vim react-app

Paste below code in vim editor

server { 

        listen 80; 

        listen [::]:80;  

        root /var/www/react-app; 

        index index.html; 

}

• cd /var/www/
• sudo mkdir react-app
• sudo chmod –R 755 /var/www/react-app
• sudo chown –R www-data:www-data /var/www/react-app
• cd $HOME
• sudo cp -r react-app/build/* /var/www/react-app/
• sudo unlink /etc/nginx/sites-enabled/default
• sudo ln –s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
• sudo systemctl restart nginx
• sudo nginx –t (check the output on cmd – it should be successfull)

Now open the Public Ip of Ubuntu machine if deployed on cloud, if launch on local open localhost:80

Bye!! 👋

Comments

[Zhunisali Shanabek]

Make sure you type the dash (-) from keyboard. So we will just copy past, and it'll work. Please!
Otherwise we face error, when copy paste.

sudo chmod –R 755 /var/www/react-app 

chmod: invalid mode: ‘–R’
Try 'chmod --help' for more information.