Reactjs App Deployment On Server

 Deploy your React App on server.

To deploy your application, Vercel platform is recommended to deploy your application. Its is highly optimized specifically Nextjs application. It provide bunch of features that our app need to run smoothly. Like Api(route) support feature work if your application run on vercel. Secondly we have getServerSideProps hook only support/run on production, if your app is running on vercel.

Source to deploy on vercel server from githup repository
Link: Deploy Nextjs On vercel

To run your React js App or for installing any js package, you need to have Nodejs environment setup and npm package installed.

Follow this video

Link: Deploy Reactjs App on VPS

Step 1.

Setup Node environment on server

Now we will start installing following packages using commands

-sudo apt install nodejs npm git 

After successful installations check these packages versions to verify.

Note: For installing latest/specific version on nodejs. we will use mvn package.

this is github official installation guide
https://github.com/nvm-sh/nvm

By using nvm command we can install nvm package. Its a Node Version Manager

-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

To verify run command 

-nvm //hit enter

If it not found than close the terminal and re-login 

-nvm install node

Step 2.

Get pull of git project on your server.

you can go to your directory

.cd root

By this command your project will be download from your git repository to your server directory.

Inside root: -git pull your-project-url.git 

Step 3.

Go to the project root directory. Install node module in your project.

-npm install

or install latest on os recommend while npm install

npm install -g npm@10.8.3

Step 4.

Make build of your application by this command

-npm run build

After successful build made than run this application by using command

-npm run preview 

It will run the application on localhost:4173

But you can access this app out side the local machine.

You need to host to expose this app. This command will host the app to public ip

npm run preview -- --host

https://your-ip:4173/

Step 5.

Make sure 4173 or any other port on which your project start must be open in firewall

this command will show the open ports in firewall.

-sudo ufw status 

To allow port

-sudo ufw allow 4173

After that restart the node application by preview command

Access your application : https://yout-ip:4173

Stop/Block port 

-sudo ufw deny 4173

Note: But here is the problem. This running app can be crashed or stopped as the terminal close.

We need to run this app as an service that can run in background

Step 6.

Install pm2 package. This package will run your application as an service in background.

-npm install -g pm2

Now run your application

-pm2 start npm --name "react-todo-app" -- run preview
To run my app
-pm2 start npm  --name 'bsms_frontend_app' --run start

List services running with pm2

-pm2 list

Delete/Stop service

-pm2 delete 1 // 1 is id

Step 7 Now Run/Access/Host the next app using NGINX

sudo apt install nginx

For further process.

Note: Make sure your app is stopped in pm2 service and NGINX is also stopped.

Step 7

Start NGINX

sudo systemctl start nginx

sudo systemctl status nginx

start nginx as an service

sudo service nginx start

Step 8

NGINX configuration

go to /etc/nginx directory

open sites-available directory and create a file, add this configuration.

server{

listen 80;

root /root/react-ts-todo/dist;

## try_files is declarative

## $uri is default route, $uri/ is matching route and which route doesn't match will go to 404

location / {

    try_files $uri $uri/ = 404;

}

}

save this file with name ip.conf

Step 9

Now you need to Enable your site.

got to /etc/nginx/sites-enable directory

This dir already having default.conf file

lets create a symbolic link the ip.conf file here.

-ln -s ../site-available/ip.conf

systemctl restart nginx

test everything is fine

-sudo nginx -t

-systemctl restart nginx

What is the purpose of using NGINX

It works as an reverse proxy. Bcoz before we are accessing direct server by server ip address.
It works as an layer/middleware between ip address and App.It provide securities. 

We can also create multiple server in the same place. Just we need to add our Applications in sites-available in nginx configurations. Than nginx will manage which request transfer to which service app.

It is also act like load balancer.

Step 10

We are accessing out application through ip address. What if we have domain?

Than we will create config file in sites-available directory with doamin name. than create symbolic link

Further you can google and chat GPT

Step 11

Secure your domain
first update you repo
-sudo apt update
-apt install certbot python3-certbot-nginx

sudo certbot certonly --nginx -d your-domain-name -d www.your-domain-name

Note: certificate will not issue to ip addresses, it only work on domain names.