Steps to Deploy React Application on NginX with Ubuntu

Hey all, I’m back with a blog on how to deploy your react application on NginX.

step 01: Update the package index by running following command:

sudo apt update

step 02: Install NginX by running following command:

sudo apt install nginx

welcome screen on localhost will indicate that your server is running correctly

Image by Author

step 03. Adjusting the Firewall:

sudo ufw app enable

step 04. Enable traffic on port 80

sudo ufw allow 'Nginx HTTP'

(sudo ufw status — you can verify the change using the command:

step 05. Checking status of NginX

sudo systemctl status nginx

step 06 . To create and run a react app using following command:

npx create-react-app react-app
cd react-app
npm start

step 07 . To create a production build, run the following command:

npm run build

step 08 . navigate to /etc/nginx/conf.d/ path in your react project.

cd /etc/nginx/conf.d/

step 09 . Use following command to add a configuration file:

sudo nano domain.conf

step 10. add following configurations and assume the build path as /home/user/files/ascend/build,

server {
listen 80;
 listen [::]:80;
root /home/user/files/ascend/build;
 index index.html index.htm index.nginx-debian.html;
location / {
 try_files $uri $uri/ =404;
 }
}

(use ‘pwd’ command to locate the path of build file)

step 11. restart NginX using following command:

sudo service restart nginx

(you should be able to see your app running in localhost:80 port.

If you get a error as: Job For Nginx. Service Failed Because The Control Process Exited With Error Code

Sudo -u www-data stat /home/user/files/ascend/build;
gpasswd -a www-data
sudo chmod 755 /home/user/files/ascend/build
sudo chmod 755 /home/user/files/ascend/
sudo chmod 755 /home/user/files/
sudo chmod 755 /home/user/

Will meet again with another blog. Till then stay safe and bye..!