Deploy React App on Nginx Ubuntu Guide

My main purpose of this blog is to showcase the ease of using bash (shell script) on Ubuntu and deploy a React app (static) on Nginx. Normally, any beginner dev would perform these steps on a Microsoft Windows-based environment, but here I want to share with my community that it is indeed very simple to replicate the same steps in a Linux-based environment.

You can follow the steps below to produce the same results. In this tutorial, I am using Ubuntu via WSL (Windows Subsystem for Linux), an underrated, powerful platform for us Windows users to unlock the full potential of Linux.

To install WSL on your system, you can follow the steps provided in Microsoft's documentation link here: https://learn.microsoft.com/en-us/windows/wsl/install

Once installed we can continue the steps below:

  ******@DevAshura:~/Nginx_React$ mkdir Nginx_React
  ******@DevAshura:~$ cd Nginx_React/
  ******@DevAshura:~/Nginx_React$ mkdir Nginx_React

At root dir of your ubuntu system, create a directory/use one to creae a react app.

```
  npm create vite@latest react-nginx
  cd react-nginx
    npm install
    npm run dev
```
Create the scaffolding react app using vite, then chang to the app dir, install dependiceis and run the app.
```
  *******@DevAshura:~/Nginx_React/react-nginx$ code .
```
Open vs code/any editor and edit the App.jsx/tsx page with any text.

  *****@DevAshura:~/Nginx_React/react-nginx$ npm run build

Build the react app. Now the main process starts

  # 1. Update package list
  sudo apt update

  # 2. Install Nginx
  sudo apt install nginx -y

  # 3. Enable Nginx to start at boot
  sudo systemctl enable nginx

  # 4. Start Nginx service
  sudo systemctl start nginx

  # 5. Check Nginx status
  sudo systemctl status nginx

Commands to install Nginx by: update package lsit, install nginx, enable nginx on start boot, check status and stat service.

  mkdir NginxFiles /var/www 
  sudo cp -r dist/* /var/www/NginxFiles/
  ls /var/www/NginxFiles/

first cmd creates a dir called NginxFiles on /var/www which gets built after nginx is installed. Second cmd copies the build files “dist” from react rot app to /var/wwwNginxFiles. 3rd cmd shows you list of files copied, used to check if copy was succesful.

```
  sudo chown -R www-data:www-data /var/www/NginxFiles
  sudo chmod -R 755 /var/www/NginxFiles`
```
These steps gives Ngix user ownersip to read files and (2nd cmd) ensure Nginx can read/execute the files
```
  sudo nano /etc/nginx/sites-available/tutorial
```
The MOST IMP STEP…We open the tutorial named file on nano editor provided by Linux to change config.
```
  nginx
  server {
      listen 80;
      server_name localhost;

      root /var/www/NginxFiles; 
      index index.html;

      location / {
          try_files $uri /index.html;
      }
  }
```
Paste this config file in nano editor then to save: ctrl+ O; exit : ctl+X
Here the line : root /var/www/NginxFiles is crucial as it points to the NginxFiles containing build of react app and location / { try_files $uri /index.html; } } — imp for react router.

  sudo ln -s /etc/nginx/sites-available/tutorial /etc/nginx/sites-enabled/
   sudo rm /etc/nginx/sites-enabled/default
    sudo nginx -t
    sudo systemctl reload nginx 
    sudo systemctl status nginx

These cmds in order are: wnable the new nginx site whch contains rect build app), disable defaut nginx welcome site, reload nginx, check status of nginx

Go to : localhost:8080 or simply localhost.

That’s it. I hope this blog preovided a friendly starter’s guide to apply/deploy React static app on Nginx server via Linux/Ubuntu.
Happy hacking devs! 😁

How to Deploy a Static React App on Nginx Using Ubuntu

Comments

Command Palette

Comments