DEV Community

Cover image for Deploy & Host a React Application on NGINX with Ubuntu
Jay Sheth
Jay Sheth

Posted on • Updated on

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; 

}
Enter fullscreen mode Exit fullscreen mode
  • 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!! 👋

Top comments (0)