We can deploy and host a react app in Firebase hosting, GitHub pages, Netllify, etc for Free. But if it’s a professional project, then opt for a dedicated cloud server. But deploying a react app on a cloud server is not an easy process. Here in this article, we are going to discuss the steps to deploy a react app on a cloud server with NGINX configuration in 9 simple steps.
After completing this article, you will get in exact idea about,
- The reasons for opting a dedicated cloud server for hosting our react application
- Creating a simple react app
- Using Git for simplifying our project workflow
- Creating and configuring a cloud server
- Deploying the react app on a cloud server.
- Buying a domain and directing it to our server
- Setting up an SSL certificate and configure it to renew automatically.
We are using a Vultr cloud server for deploying the react app and Godaddy for purchasing a domain name.
Remember that the domain name I am using here is mynewblog33.com. You have to change this with your name.
Why do we opt for a cloud server to host a React app
So we must understand the free hosting plans have some bandwidth limits. Also if we check the SSL certificate allocated to our website hosted in free hosting providers, it might be the one that is allocated for other domains.
A lot of free hosting providers are there like Firebase hosting, GitHub pages, Heroku, Netlify, etc. Some of them are really good for hosting static websites.
But for a professional project, try to use a dedicated server to host it. Because when choosing a cloud server, we have the freedom to choose the limits.
Deploy a react app on Cloud server
We are going to create a react app using the create-react-app tool first and deploy it in the Vultr cloud server.
This is not an easy task but the below steps make it easier for us.
1. Create a react application
A simple react app can be created using create-react-tool easily. So, install Node.js on our system, and using npx, we can create an app.
Open the project with Visual Studio Code after creation.
The below commands will do these processes.
npx create-react-app sample-app cd sample-app code .
2 Add the .htaccess file
Here we have created a simple react app and it can be deployed and works well. But the issue is that if our app contains any trailing paths such as https://mynewblog33.com/posts, the app will return 404.
Because in the case of React, index.html is the only file that will be returned with any paths. So our server do not understant this logic because it tries to find some other html files containing the pathname. This is the reason for this error.
The solution is that we will need to add a .htaccess file in public direcrory with the code below.
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
It will be copied to build folder after npm run build command from our server.
3. Add the project to a Git repository
Some people are still using FTP clients for copying the project from the local system to the server. But understand that react applications contain a node_modules directory that contains a lot of files that make the FTP process harder. So the best method is to add the code to a git repo.
Some of the best Git service providers are GitHub, Bitbucket, and Gitlab. Here we are choosing GitHub.
I already have an article explaining the steps of adding a project to GitHub and Bitbucket which I have given below.
So refer that article and add the react app we created to a git repository.
Adding An Existing Project To GitHub Or Bitbucket
The important steps to add the project to a GitHub repo are provided below. But to get a repository URL like https://github.com/syamjayaraj/simple-app, you have to refer the above article and create a repository first.
git add .
git commit -m "first commit"
git remote add origin https://github.com/syamjayaraj/simple-app
git push -u origin master
4. Create a cloud server
Creating a cloud server is an easy task. I am skipping this step because an article is there in Techomoro explaining the steps. The link to this article is given below.
How To Set Up Your Own Cloud Server On Vultr (VC2)
So after creating a cloud server, we can access our server’s terminal using ssh. Now we get a terminal window to execute commands in our server like below.
5. Configure the cloud server
To run a react app in an Ubuntu server, we must install some tools and configure it. Refer to the below steps and execute them in the cloud server terminal.
5.1 Install Nodejs and npm
React is a Node.js library and it requires Node.js and npm to be installed on our server.
Note:- The Node.js tool is only needed for making a build of the react app. If you are closing the build folder, then Node.js is not needed.
The below commands will install the latest version of Nodejs.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs
5.2 Setup Firewall
We need to enable the firewall. The following command enables the firewall.
sudo ufw enable
Now, configure the firewall to allow HTTP, HTTPS, and SSH access.
sudo ufw allow http sudo ufw allow https sudo ufw allow ssh
Note: For the Lightsail server, you need to enable, SSH, HTTP, and HTTPS from the Networking tab in the Lightsail dashboard.
5.3 Setup NGINX
NGINX is a free, open-source, high-performance HTTP server and reverse proxy. So, Install NGINX to configure a reverse proxy for our application.
sudo apt-get install nginx
5.4 Create an NGINX configuration
Now, we need to edit the default configuration of NGINX. So, using the nano editor, open the default configuration file.
sudo nano /etc/nginx/sites-available/default
From the nano editor, remove all the lines using Backspace and add the below lines to it.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
Nano editor tips:-
Use the keyboard shortcuts below to save the file.
1. Ctrl + O (Write out)
2. Enter
3. Ctrl + x (exit)
Now create a SampleApp.conf file inside the sites-available directory which describes the configuration of the react app we are going to deploy.
sudo nano /etc/nginx/sites-available/SampleApp.conf
Insert the below lines in nano editor and change the domain name with yours.
server {
root /var/www/html/sample-app/build;
index index.html index.htm index.nginx-debian.html;
server_name mynewblog33.com www.mynewblog33.com;
location / { try_files $uri /index.html; }
}
Nano editor tips:-
Use the below keyboard shortcuts to save the file.
1. Ctrl + O (Write out)
2. Enter
3. Ctrl + x (exit)
Enable the configurations we have made.
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled sudo ln -s /etc/nginx/sites-available/SampleApp.conf /etc/nginx/sites-enabled/
5.5 Checking Your Configuration File
Whenever you make changes to your Nginx configuration file, it’s important to check whether you’ve left behind any syntax errors. This can be done by running the following command.
sudo nginx -t
If there are errors in your configuration file, the command’s output will tell you exactly where in the file the error was found.
Conversely, if there are no syntax errors in any of your NGINX config files, you will see output similar to the following.
Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
5.6 Restart NGINX server
If the test is successful, restart NGINX using the below command.
sudo service nginx restart
6. Clone and Build the React App
We already created a GitHub repository and pushed the code. Now, clone the repository to our server.
We will deploy this this cloned react app in our cloud server.
So from the GitHub repository, click on Code button, and clone the react app with the below command.
The below command will make a clone of this app in our server. We have to remember that the project must be cloned to /var/www/html directory in our server.
cd /var/www/html git clone https://github.com/syamjayaraj/SimpleApp.git
Now enter into the project and install the dependencies using the below commands.
cd SimpleApp npm i
We have to create a build version first. The domain will be directed to this build folder.
npm run build
7. Connecting domain
So the react app is ready. Now we can connect a domain. The steps for purchasing a domain name from Godaddy and configuring it for directing it to our server is given below.
7.1. Buy a domain
We can buy a domain from any Domain registrar service. Some of them are listed below.
Here I am choosing Godaddy to purchase the domain.
7.1.1. Search for a domain
Log on to https://www.godaddy.com/ and search for a domain. If it’s available add it to cart.
7.1.2. Choose the bundle options
Godaddy will force you to buy domain privacy protection, email address, and hosting with the domain. Here I prefer skipping those bundle options.
7.1.3. Complete the purchase
Complete the purchase by entering the billing information and payment details. You can purchase the domain for a minimum of 1 year to 5 years. Here I am buying it for 1 year.
7.1.4. Change the DNS
Now from the top menu, select My Products. You can see the purchased domain there.
Click on the DNS and add two new records.
- A record with name @ and value Server IP address.
- CNAME record with name www and value @
8. Set up an SSL certificate
An SSL(Secure Sockets Layer) certificate, creates a secure link between your website and a visitor’s browser. So that the data sending from the user’s browser to our server get encrypted. This won’t allow intruders to read the data. All the browsers nowadays show a warning if the site doesn’t have an SSL certificate.
So we are going to set up an SSL certificate for our blog. Let’sEncrypt provides an easy way to set up a free SSL certificate.
So follow the steps to set up an SSL certificate for the blog we are going to create.
8.1. Add the repository
Add the Certbot repository to our system first.
sudo add-apt-repository ppa:certbot/certbot
8.2. Update system packages
The below command updates the package lists for upgrades for packages that need upgrading, as well as new packages that have just come to the repositories.
sudo apt-get update
8.3. Install Certbot
Now install Certbot from the new repository.
sudo apt-get install python3-certbot-nginx
8.4. Setup SSL certificate
Now with certbot we can create an SSL certificate for our app.
You can set up a single SSL certificate that is valid for multiple domains or subdomains. In our case, we also need to set up www.mynewblog33.com. So set up an SSL certificate for it too.
sudo certbot --nginx -d mynewblog33.com -d www.mynewblog33.com
- Replace the domain name with yours.
8.5. Setup auto-renew for SSL certificate
Let’s Encrypt certificates only last for 90 days. But a single command can auto-renew the certificate.
sudo certbot renew --dry-run
8.6. Restart NGINX server
All set up will reflect in our server after restarting Apache2.
sudo service nginx restart
9. Access our app
Our React app is now live and the public can access it with the domain address below.
https://www.mynewblog33.com
Summary
In this article, we discuss the 9 steps to deploy a react app on an ubuntu cloud server with NGINX configuration. We also learned to connect a domain name to access our app and also secured it using a free SSL certificate provided by Let’sencrypt. We also configured the server to renew the certificate when it expires.
