We can deploy and host the reactive application for free on Firebase, GitHub, Netllify, etc. sites. However, if it concerns a professional project, choose a dedicated cloud server. But deploying a reactive application on a cloud server is not an easy process. In this article we discuss the steps to follow to install the reactive application on a cloud server configured by NGINX in 9 easy steps.

As soon as this article is ready, you will have an exact picture of

  1. Reasons to choose a dedicated cloud server to host our reactive application
  2. Create a simple reactive request
  3. Use Git to simplify our projects
  4. Create and configure a cloud server
  5. Implement a reactive application on a cloud server.
  6. Buy a domain and forward it to our server.
  7. Configure the SSL Certificate and update it automatically.

We use the Vultr cloud server to deliver the answering application and Godaddy to purchase a domain name.

Don’t forget that the domain name I use here is my new blog33.com. You have to change that with your name.

Why we chose a cloud server to host Response

So we need to understand that free hosting plans have certain limitations in terms of bandwidth. If we also check the SSL certificate of our website, which is hosted by free hosting providers, it may be a certificate for other domains.

Many free hosts, such as Firebase, GitHub pages, Heroku, Netlify, and others. Some of them are really good for hosting static websites.

But for a professional project you should try using a dedicated server to host it. Because if we choose a cloud server, we have the freedom to choose our limits.

Deployment of the Jet application on the cloud server

First we will use the Application Response Tool to create a reactive application and deploy it on the Vultr server in the cloud.

This is not an easy task, but the following steps will make it easier.

1. Creating a JetApplication

A simple reactive application can easily be made with a reaction tool. So install Node.js on our system, and with npx we can create an application.

Open the project with the code of Visual Studio after creation.

These processes are executed with the following commands.

npx Copy
CD Copy
Application Code .
.

2 Add the .htaccess file

Here we have created a simple reactive application that can be used and works well. However, the problem is that if our request contains escape routes such as https://mynewblog33.com/posts, the request returns 404.

In the case of React, index.html is indeed the only file returned with random paths. Our server does not underestimate this logic, because it tries to find other html files with pattern names. That’s the reason for this mistake.

The solution is to add the .htaccess file with the code below to the public directory.

RewriteAngine On
RewriteCond %{ROOT_DOCUMENT}%{REQUEST_URI} -f [OR] RewriteCond %{ROOT_DOCUMENT}%{REQUEST_URI} -d
Rewrite line ^ – [L] Rewrite line ^ ^ ./index.html

It is copied to the build directory after npm has executed the build command from our server.

3. Adding a project to the git repository

Some still use FTP clients to copy the project from the local system to the server. Note, however, that responsive applications contain the node_modules directory, which contains a large number of files that complicate the FTP process. So the best method is to add code to the git-repo.

Some of the best Git providers are GitHub, Bitbucket, and Gitlab. Here we choose GitHub.

I already have an article explaining the steps to add a project to GitHub and Bitbucket listed below.

So refer to this article and add the reactive application we created to the Git repository.

Adding an existing project to GitHub or Bitbucket

Here are the important steps for including your project in the GitHub repo. However, in order to get a repository URL such as https://github.com/syamjayaraj/simple-app, you must first refer to the above article and create a repository.

Add Git.
git -m capture first
git remote add origin https://github.com/syamjayaraj/simple-app
git push -u origin master

4. Creating a cloud server

Creating a cloud server is an easy task. I miss this step because there’s an article explaining the steps. The link to this article is below.

How can you configure your own cloud server on Vultr (VC2)?

This way we can access our server terminal with ssh after the creation of the cloud server. We now get a terminal window to execute commands on our server, as shown below

5. Cloud ServerConfiguration

To run the reactive application on the Ubuntu server, we need to install and configure some tools. Read the following steps and follow them in the cloud server terminal.

5.1 Setting knots and speed per minute

React is the Node.js library, and it requires Node.js and npm to be installed on our server.

Note:- The Node.js tool is only needed to create a reactive application. If you close the construction file, you don’t need Node.js.

With the following commands you can install the latest version of Nodejs.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash –
sudo apt – get installation -y nodejs

5.2 Firewall configuration

We need to activate the firewall. The following command contains a firewall.

sudo ufw

Now configure the firewall to allow access via HTTP, HTTPS and SSH.

sudo ufw let http
sudo ufw let https
sudo ufw let ssh

5.3 Setting the 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 Creating an NGINXconfiguration

We now need to change the default configuration of NGINX. So open the default configuration file with the NANO editor.

sudo nano /etc/nginx/sites available/standard

In the NANO Editor, delete all lines with the backspace key and add the lines below.

Server {
listen 80 default_server;
listen [:]:80 default_server;
root /var/www/html;
index.html index.html.nginx-debian.html;
server_name _;
location / {
try_files $uri/ = 404;
}
}.

Tips from the nano-editor:-

Use the shortcut keys below to save the file.

1. Ctrl + O (tender)
2. Enter
in 3. Ctrl + x (output).

Now create the file SampleApp.conf in the directory of available sites, describing the configuration of the answering application that we will deliver to you.

sudo nano /etc/nginx/sites-available/SampleApp.conf

Paste the lines below into the Nano Editor and change the domain name with your own name at the same time.

Server {
root /var/www/html/sample-app/build;
index.html index.html;
server_name mynewblog33.com www.mynewblog33.com;
location / { try_files $uri /index.html; }
}.

Tips from the nano-editor:-

Use the shortcut keys below to save the file.
1. Ctrl + O (tender)
2. Enter
in 3. Ctrl + x (output).

Turn on the configurations we’ve made.

sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-acabled

sudo ln -s /etc/nginx/sites-available/SampleApp.conf /etc/nginx/sites-enabled/

5.5 Check configuration file

Every time you make changes to the Nginx configuration file, it is important to check for syntax errors. You can do this by executing the following command.

sudo nginx -t

If there are errors in your configuration file, the command output will indicate where exactly the error was found in the file.

Conversely, if none of your NGINX configuration files have syntax errors, you will get a result similar to the one below.

Inginx output : Configuration file /etc/nginx/nginx.conf Syntax in order
nginx : Configuration file /etc/nginx/nginx.conf Test successful

5.6 Rebooting the NGINX server

If the test was successful, restart NGINX with the following command.

restart sudo service nginx

6. Cloning and creating the Jetapplication

We’ve already created the GitHub repository and pushed the code. Now, clone the repository on our server.

We deliver this cloned answering application to our cloud server.

So, from the GitHub repository, press the Code button and clone the responding application with the following command.

The next assignment will clone this application on our server. We must remember that the project must be cloned in the /var/www/html directory of our server.

cd /var/www/html
git clone https://github.com/syamjayaraj/SimpleApp.git.

Now log in to the project and define the dependencies with the following commands.

cd SimpleApp
npm i

We have to make an assembly version first. The domain will be sent to this editing folder.

Production per minute

7. RangeConnection

Okay, jetpack’s ready. We can now connect the domain. The steps to buy a domain name from Godaddy and set up the redirection to our server are listed below.

7.1. DomainPurchase

We can buy a domain from any domain registrar. Some of them are listed below.

This is where I choose Godaddy to buy the estate.

7.1.1. Domain search

Log on to https://www.godaddy.com/ and search for the domain. If it is available, add it to the cart.

7.1.2. SelectPackaging options

Godaddy invites you to purchase a private domain, email address and domain hosting. I’d rather skip these package options here.

7.1.3. Complete purchase

Complete the purchase by entering invoice and payment details. You can buy a domain for a period of 1 to 5 years. Here, I’ll buy it for a year.

7.1.4. Modify DNS

Now select My products from the top menu. Here you can see the domain you bought.

 

Click on DNS and add two new items.

  1. Save with the @-name and the value of the IP address of the server.
  2. A CNAME record with the name www and the value @.

8. SSL certificate installation

SSL (Secure Sockets Layer) Certificate, which establishes a secure connection between your website and the visitor’s browser. This ensures that the data sent from the user’s browser to our server is encrypted. This prevents intruders from reading the data. Currently all browsers give a warning if the website does not have an SSL certificate.

So we are going to install an SSL certificate for our blog. Let sEncrypt offer an easy way to set up a free SSL Certificate.

So follow the instructions to configure the SSL certificate for the blog we are going to create.

8.1. Add deposit

Start by adding the Certbot repository to our system.

sudo add-apt-repository ppa:certbot/certbot

8.2. System package update

The following command updates the lists of packets to be updated and new packets just entered into the repository.

sudo apt-get update

8.3. Installing the Certbot

Now install Certbot from the new depot.

sudo apt-get install python3-certbot capacity

8.4. SSL CertificateConfiguration

With certbot we can now create an SSL certificate for our application.

You can set up a single SSL certificate valid for multiple domains or subdomains. In our case, we should also create www.mynewblog33.com. So also install an SSL certificate for him.

sudo certbot –nginx -d mynewblog33.com -d www.mynewblog33.com

  • Replace the domain name with your own name.

8.5. Configuring auto-renewal for SSL certificate

Let’s encrypt the certificates for 90 days. But an order can update the certificate automatically.

Renew sudo certbot – test

8.6. Rebooting the NGINX server

All settings will appear on our server after Apache2 has been restarted.

restart sudo service nginx

9. Access to our application

Our React application now works and is accessible to the public from the domain address below.

https://www.mynewblog33.com

Summary

In this article we discuss the 9 steps of installing a reactive application on a Ubuntu cloud server with an NGINX configuration. We also learned how to connect a domain name to access our application and secured it with a free SSL certificate from Let’sencrypt. We have also configured the server to update the certificate when it expires.

Here we go:

Like the download…

You might like this.

how to deploy react app to apache server,deploy react app nginx,deploy react app to windows server,deploy react app firebase,how to host react website,deploy react app aws,google cloud run react,hosting react app on google cloud,google sites react,react google cloud storage,gatsby google app engine,deploy mern app to google cloud,app.yaml for react app,how to deploy a react-app in gcp,google cloud hosting react,react with app engine,react native on google cloud,deploy react app to cpanel,react and cpanel,reactjs deploy godaddy,hosting react on godaddy,static react app,deploy react app to subdirectory,deploy mern app,linode web server,best web server setup,nginx configuration ubuntu,install nginx 1.18 ubuntu,heroku,nginx,linode,create-react-app,firebase hosting react-router,firebase change public directory,hosting react app,deploy react app to firebase hosting,firebase deploy blank page,firebase hosting setup complete after deploy,how to deploy react app locally,how to deploy a react app,deploy react app free,deploy react app to netlify,how to deploy react app to heroku

You May Also Like

🥇 Calculate the Cost of a Product in Excel  Step by Step Guide ▷ 2020

If you want to sell a product or offer a service to…

🥇 MICROSOFT POWERPOINT  What is it? + Alternatives ▷ 2020

One of the advantages of using Office software packages is that you…

Pytorch Image Augmentation using Transforms.

In-depth learning models generally require a lot of data for learning. In…

Fix: Google Photos not backing up on iPhone

For many iPhone users, Google Photos remains the first choice, even though…