How to Deploy a React application with NGINX (Step-by-Step Guide) ๐
Prerequisites:
A basic React project to deploy.
A Linux machine or server.
Domain name (optional).
So, you've mastered web development and created a fantastic webapp using react, Now, you're eager to share it with the world. But how do you deploy it on the internet? Fear not; I'm here to guide you through the process.
To get started, you'll need a Linux machine or VM. (how to create one?)
Step 0 - Connect to your VM (if using cloud)
connect to your virtual machine using any of the following ways so we can start installing and configuring NGINX server on it.
A. Connect using ssh-
ssh ashutosh@192.168.1.7 โฉ๏ธ
fingerprint(yes) โฉ๏ธ
yourpassword โฉ๏ธ
this will start a shell session like-
ashutosh@yourvm:~$
B. You can use VNC / RDP, for more info google vnc with your cloud provider term.
You can skip above step if you are setting up NGINX on a local server.
Step 1 - Update Your Packages ๐
First things first, ensure your system is up-to-date by running this command:
sudo apt update && sudo apt upgrade
๐กPro tip: If you're feeling lazy, you can use sudo su
to avoid typing sudo
twice!
Step 2 - Install NGINX Server ๐
Let's get NGINX on board. Run this command:
sudo apt install nginx
Now, technically, NGINX should be installed and running. To test this, let's execute the following command:
curl localhost
This should give the following output:
bloguser@blogvm:~$ curl localhost
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style></style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
If you are getting this output, it means NGINX is installed and up and running.
Step 3 - Enable and Configure firewall๐ฅ๐งฑ
Currently NGINX is running locally, if you try to open the VM's ip in browser it will not show anything, which is obvious as have not enabled http (80)
and https(443)
ports from firewall.
sudo ufw enable
sudo ufw status
sudo ufw allow 'Nginx Full'
sudo ufw status
Step 4 - Install NodeJs๐
Execute following command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Reload the configuration
source ~/.bashrc
test the installation with nvm -v
you should see version number.
finally install NodeJs with nvm install 21.0.0
more on NodeJs installation and NVM here.
Step 5 - Verify Your Setup โ
After this, your webpage should show up, it's time to see if everything's working. You can do this by typing your server's Public IP address in your web browser.
Step 6 - Creating a simple Website ๐
By default, NGINX comes with a basic site enabled. You can customize its content, which is located at /var/www/html
.
Lets modify default page with our content.
Step 1 - Navigate to default directory
cd /var/www/html/
ls
sudo rm -r index.html index.nginx-debian.html
ls
sudo nano index.html
//if you don't have nano
vim index.html -> i
paste this sample html file-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
save and exit
nano -> ctrl+x -> y -> enter.
vim -> :wq -> enter.
Restart the NGINX server
nginx -t //to check the configuratin
sudo systemctl restart nginx //to restart nginx
Then refresh you webpage, it will look something like this-
So this is how you setup a simple static web server with NGINXโจ
How to host your React web app here?
Now, letโs deploy your React application using NGINX. Follow these steps:
Step 7 - Clone Your React Project to NGINX Root Directory ๐
First, clone your React project into the NGINX root directory.
You can choose /var/www/
or any other directory.
cd /var/www/
sudo git clone https://github.com/yourusername/your-react-project.git
cd your-react-project
Step 8 - Install Dependencies and Build the Project ๐ฆ
Navigate to your project directory, install dependencies, and build your React application.
cd /var/www/your-react-project
npm install
npm run build
The build
command will create a build
directory with your optimized React application.
Step 9 - Configure NGINX to Serve Your React Application โ๏ธ
Next, configure NGINX to serve your React application. Edit the NGINX configuration file:
sudo nano /etc/nginx/sites-available/default
Replace the contents with the following configuration:
server {
...
root /var/www/your-react-project/build;
index index.html index.htm;
...
}
Save and close the file
Step 10 - Restart NGINX Server ๐
Finally, restart the NGINX server to apply the changes:
sudo nginx -t # To check the configuration
sudo systemctl restart nginx
Step 11 - Access Your React Application ๐ฅณ
Your React application should now be live. Open your browser and navigate to your serverโs public IP or domain name:
http://yourdomain.com
You should see your React app running! ๐
That's it! You've successfully deployed your React application with NGINX. For adding a domain name, stay tuned for our next blog post.
for any issues you can always reach me out on Linkedin
Happy Hacking! โ๏ธ๐