We are creating a converter calculator based on React. Part 10: Deployment

a4cc6519f9cc95640fe49a53b11cea7c

Let’s move on to the final stage of developing a React-based program. We post the finished program on the Internet. We will consider in detail the instructions for deployment on the Timeweb Cloud server and on the Netlify platform.

Previous material: Calculator converter based on React. Part 9: Connecting Redux and Router

Deploy in Timeweb

This method is more complicated than deployment in special services like Firebase or Netlify, but it gives you full control over the application, because you will host it on your own server, which only you have access to. This is the most flexible configuration method and is ideal for hosting custom React applications.

We will analyze in detail each step of placing an application on the Timeweb server, so that even a beginner can cope with this task when developing his first project based on the React framework.

We rent a server

This step is necessary for those who do not yet have their own server. You can quickly rent a server on the Timeweb Cloud website:

  • Open the server control panel.

  • Sign up or sign in with your GitHub account.

  • Here we choose the type of server we want to rent. I suggest the Danny server with Ubuntu. It is the cheapest (by the way, it can be rented for timecoins earned in the Community for likes and articles).

Timeweb control panel

When we rent a server, Timeweb Cloud will send a login and password to manage it (they are unique to the server itself, not to the control panel as a whole).

We install the necessary components

Before publishing programs on the network, it is necessary to download additional utilities and programs to the hardware server, which are necessary for compiling the program and starting the software server, which supports programs and sites in working condition and allows access to your project by a specific domain.

To do this, you first need to connect to the server using the SSH protocol. This can be done directly from the Timeweb control panel.

  • Open the server settings.

  • Go to the “Console” tab.

  • Here you need to specify your login (by default it is root, but you can create other users in the future).

Console in the Timeweb control panel

  • Then you need to specify a password. It was sent to you by Timeweb Cloud. When entering the password, the characters are not displayed in the console.

  • Once connected, you will have full access to the server through the terminal. You can now install third-party components and the updated version of Python will be the first. For this, we will enter the command sudo apt install python 3.7

  • We download the curl utility – sudo apt install curl

  • To download, compile and run the application, it is necessary that a relatively recent version of Node.js is installed on the server. 14 will do because it causes the least errors, is compatible with the new JS syntax, and works on the OS of your choice. To install it, enter the command curl-sL | sudo bash –

  • Then enter the command sudo apt -y install nodejs to download the corresponding Node.js distribution to the system.

  • We may also need tools for building projects based on Node. They can be loaded into the system with one command: sudo apt -y install gcc g++ make

Configure nginx

An application server is required to place the application on the network and run it. This is a special utility that runs in the background and allows you to connect the local address of any site/app to a domain so that you can connect to it via a browser from the outside (as is usually the case).

We will use the nginx server because it is easy to configure.

  • We download nginx to the system – sudo apt-get -y install nginx

  • Open the server configuration file to change the forwarding parameters – sudo nano /etc/nginx/sites-available/default

  • Inside, we write new directives for forwarding from the domain to the local program:


    
    server 
     listen 80;
     server_name domain;
     location / 
     proxy_pass 
     proxy_set_header Host $host;
     }
    }

The word domain must be replaced with the used domain. It can be found in the server control panel.

We are making a project

We have a ready software and hardware server. You can now move on to creating a custom application build that can run on a VDS/VPS network.

Compiling and loading dependencies must be done on the server, otherwise component incompatibilities may occur. This is due to different versions of the software on the local machine where you were developing and on the server. Therefore, we will not transfer the entire project to the server.

  • First, download a program like Filezilla or Commander One to your computer. Both support connection to the server using the SFTP protocol. It allows you to transfer files over an encrypted channel.

  • Connect to our server by entering the login and password from our server in Filezilla or Commander One.

Commander One interface

  • We go there to the root directory (on the server).

  • In the parallel window, open the directory with our project on the local machine.

  • Select all directories except node_modules and copy them to the server to the root folder (usually copying is done by pressing F5).

When the file transfer process is complete, we will again need to return to the console launched in the Timeweb Cloud personal account.

  • We open the folder with the project in it. You can enter a command for this CD and specify the address where the application is located. But if you copied the files directly to the root, you don’t need to go anywhere.

  • Enter the command npm install. It will load into the project all the dependent elements necessary for its assembly and full launch. Timeweb VDS server console

  • Enter the command npm run build. It will start the process of compiling programs into a full-fledged React program that can be run on the server.

The resulting directory will eventually form the basis of our application.

Configuring ExpressJS

To fully launch the program on the network, we will need one more component – Express. It is a utility for launching servers in a format suitable for various variations of Node.js applications, including those written using React.

  • Open the directory with our project in the terminal (you can do it before uploading the files to the server, or after).

  • Enter the command npm install express

  • After downloading Express, create a file called server.js in the root folder of the project. It will store the Express key configuration.

  • Open this file using the command nano server.js or any text editor of your choice.

  • Add the following code to the configuration:

ExpressJS settings

Here we do the following:

  1. We import the Express utility into the project.


    
    const express = require('express')

  2. We ask the path component.


    
    const path = require('path')

  3. We create a sample program using the command:


    
    const app = express()

  4. We define the port for connection (for us it is 3000, because we specified a similar port in the nginx parameters).


    
    const port = 3000

  5. We launch the programs and select the directory that will be used as the program to be launched on the server.


    
    app.use(express.static(path.join(__dirname, 'build')))

  6. Then we make a request to the base address and say where the client needs to be forwarded so that the router functions normally.


    
    app.get('/', function (req, res) {res.sendFile(path.join(__dirname, 'build', 'index.html'))})

  7. And then we include the application:


    
    app.listen(port)

Turn on the program on the server

The only thing left to do is to turn on Express. And for this, it is enough to go to the root directory of the project and implement the command node server.js. In a moment, your application will be running on the server and it will be available under a free domain issued by the administration of Timeweb.

You have the right to replace the domain in the future and also to connect the security certificate if it is necessary. Both are available in the Timeweb Cloud control panel.

We recommend that you familiarize yourself with the forever utility. This is a special program to support node programs in the background.

  • Enter the command npm install -g forever.

  • While in the root directory of the program, type forever start server.js

Now your project will be active even if you disconnect from the server.

The community is now in Telegram

Subscribe and stay up to date with the latest IT news

Sign up

Deploy in Netlify

Netlify is one of the best services for hosting websites and applications. The beauty of the platform is that it allows you to send a program of any kind to the network and make it work without any additional configuration in just a couple of clicks. Next, we will take a practical look at how to run our calculator in Netlify, and you will see how easy it is.

Setting up Netlify

Netlify does not require special installation. You just need to create an account there.

done We have a Netlify account. And for now, we will no longer need the official website of this project.

Connect the Netlify CLI utility

The main advantage of Netlify over publishing on your own server is quick setup. The process itself is easily given with the help of a specialized utility called Netlify CLI. It allows you to deploy directly from VS Code in literally 30 seconds. And you won’t need any knowledge in configuring servers for this.

  • Open the terminal in the root directory of the project (if VS Code is open, it is enough to press the Ctrl+` keys).

  • Enter the command npm install netlify-cli -g (Perhaps your system will complain about insufficient privileges and prohibit the global installation of the utility on the computer. To bypass this restriction, you need to enter the keyword before the command sudoand then enter the password from the account to the OS).

  • Then enter the command netlify deploy. She will probably also need superuser rights. If so, re-enter the command with the keyword sudo and enter the password.

  • After a few seconds, VS Code will ask you to open a browser to log in to the Netlify site. Let’s mix and authenticate, confirming that you allow the console utility to manage data in your Netlify profile. Sign in to Netlify

  • We return to the terminal and see an offer to add code to an existing program or create a new one. We create something new.

  • Enter the command npm run build, to make a ready-to-run application build. It will literally take a few seconds if the project is small. Options in netlify-cli

  • Then the utility will ask you to specify the directory from which to take the program assembly. In our case, this is the build folder created by the previous command. Let’s enter ./build

done In a moment, you will have your domain on Netlify with a running React application. To verify this, just copy the address that netlify-cli issued and paste it into the address bar of the browser. You will see that your calculator feels great there.

React calculator on Timeweb servers

Forwarding

In some cases, you may experience difficulties with Netlify. This is related to React Router and the correct choice of address to display the program. If the program does not work, you can try to fix it by configuring redirects.

To do this:

  • We create a configuration file netlify.toml in the root directory of the program.

  • We create a directive there [redirects].

  • We write the parameter inside from = “/*”. So we will let the application understand that we need to send a person from any address to the way we need.

  • Specify the parameter to = “/index.html”. This is how we make it clear where exactly the client needs to be redirected.

  • And we indicate the status – status = 200

This will help to debug the app with React Router installed.

Deployment in other services

You can use dozens of other platforms and servers to host your application online. You can read more about them in the official documentation for the Create React App utility.

Instead of imprisonment

That’s all. Now not only do we have a fully functional React-based application with useful libraries in the spirit of Redux and React Router, it is also hosted on the Internet, meaning it is available to millions of potential users.

If you encounter problems during setup, be sure to write about them in the comments, we’ll try to solve everything together.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2022 ZoNa365.ru - Theme by WPEnjoy · Powered by WordPress