How to install React.js on hosting


React.js is a type of javascript that works on the user interface side. This means that this type of javascript will make your website look more attractive and the data coding process is less heavy. You can still use CSS and HTML. Of the many types of javascript, what you need to know is that there are 2 types in general. Namely the type of javascript that can be run from the server side and the user interface side. For example, there is Node.js which works on the server side. Then there are React.js, Angular.js, Vue.js and many more that work on the user interface side. So, in this guide, we will explore more about React.js. Want to know more about what React.js is, what its advantages are, and how to install React.js on Hosting? Come on, follow the step by step.

Also Read: How to Create a Database on Hosting

What is React.js?

Before knowing how to install React.js on Hosting, make sure you know what React.js is first. Quoted from the official website, React.js is a Javascript library that functions to create a website user interface. In order to run, React.js needs Node.js server-side help. Don't know what Node.js is? Please read Building Websites with Node.js .

Strengths and Weaknesses of React.js

There are many advantages to React.js itself. Among them,
1. Has components that are simple and easy to use for beginners
2. Can add external plugins such as Markdown Library
3. Modular in nature. This means that you can build a website by combining several small pieces into one unit
. 4. React.js can be used for website and mobile viewing. To build a website, you need help from Node.js. Meanwhile, to build a mobile version, you need help from React Native.
5. Using JSX which is used to write HTML in Javascript
6. Very good if used to display data on a large scale

Preparation phase

There are several things you need to prepare in advance.
First , you must know how to access the server via SSH. This is very important, you know! When installing, everything is done via SSH via the console. So for those of you who are not familiar, please read How to Access SSH through the Terminal or PuTTy . Or for those of you who don't know what SSH is, please read What is SSH Server .
Second , because the installation process uses a lot of Linux commands, make sure you are familiar with various Linux commands. For those of you who don't know, you can read 10 Linux Commands You Need to Know .
Third, make sure you have installed Node.js on the Hosting server. This is because React.js can only run with the help of server-side Node.js. For guidance, you can check on How to Install Node.js on Hosting .
After all three preparations have been made, then you are ready to install React.js on Hosting :))

How to Install React.js on Hosting

Now, after the preparation stage is complete, it is time to install React.js on Hosting. This is very useful for those of you who want to move website files from localhost to hosting so that the website can go online. The way to install React.js is as follows.

1. Determine the Install Location

The first thing you have to think about is the location where React.js will be installed. Is it in the main domain? Is it on a subdomain? If in the main domain, please install it in public_html. If it's on a subdomain, please install React.js in its folder.
For example:
Main domain: websitesaya.com
Subdomain: reactjs.websitesaya.com
To create a subdomain, please follow the guide on How to Create a Subdomain on Hosting .

how to install react.js

2. Create a NodeJS App

Because React.js is a Node.js based web framework, you must first create a NodeJS App in cPanel. Please login cPanel and select menu Setup Nodejs App. Please make it according to the NodeJS Setting Guide .

Then select the version of NodeJS to use. We recommend using the latest NodeJS as it is stable. In Application mode, please select mode Production. On Application root, you can create a folder for the installation.

Note: avoid using folder names such as react, react-domand react-scripts. Why? Because there will be a crash and React Js won't install properly

In Application URL please select the domain / subdomain where the react installation file wants to run. After that click Create.

Wait a moment until it appears as shown. Make sure you have copied / copied the path in Enter to the virtual environment. This path will be used for the React.js installation. Don't forget to remember the name of the folder that you created. In this guide, the folder created is named react-app
Description:
The command is source /home/websites/nodevenv/react-app/10/bin/activateused to enter the virtual environment.
The command is cd /home/websites/react-app  used to enter the installation folder

3. SSH access via Terminal or PuTTy

Then all you have to do is access the server via SSH using the Terminal or PuTTy Software. For you Linux or Mac users, you can use the terminal. For you Windows users, you can use PuTTy software. If you don't know how, please read the SSH Access Guide . Please write the following command in Terminal / PuTTy.

 

ssh [email protected] -p 64000

Remember, SSH access can only be done at a minimum of the Super Hosting Package !

4. Installing React.js

Now to install React.js, please enter the virtual environment with the command,

 

source /home/websites/nodevenv/react-app/10/bin/activate

after that, please install react.js with the following command.

 

rm -rf react-app

npx create-react-app react-app

Wait a moment for the installation process to complete. Don't be surprised, yes, when the folder (install location) is filled with new dependencies / files. The npx command is used for executing the npm app and creating the Reactjs application.

5. Installing pm2

So that nodejs can run automatically and the process can be checked, then you can use pm2. What is pm2? PM2  is a package process manager from Keymetrics which aims to make the NodeJS project run continuously. For more details, please read How to Set NodeJS Using pm2 .

 

cd react-app

yarn add pm2 serve --save

Please wait until the pm2 installation process is complete.

6. Create an ecosystem.config.js file

Now go ahead and create an ecosystem.config.js file with the following command. You can use the command vim ornano

Then please copy and paste the following code,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

module.exports = {

apps: [

{

name: "react-app", // ubah sesuai nama aplikasi yang dibuat

script: "npx",

// ubah 63001 sesuai port yg dipakai di .htaccess

args: "serve -l 63001 build",

interpreter: "none",

watch: true,

merge_logs: true,

env: {

"NODE_ENV": "production",

}

}

]

}

7. Build Applications for Production

Now it's time to build the application for production. Please follow the orders,

8. Perform Start Service

Now is the time to start the pm2 service,

 

cd react-app

npx pm2 start ecosystem.config.js

To check the list, you can use the command,

To stop the pm2 service, you can use the command,

 

npx pm2 stop ecosystem.config.js

To restart the pm2 service, you can use the command,

 

npx pm2 restart ecosystem.config.js

9. Setting .htaccess in the Web-root Folder

In order for react js to work, you have to add the htaccess file in the folder where reactjs is located. Namely on a subdomain or in the main domain. If it's in the main domain, you can put it in a folder public_html. Please add the following code,

 

Options +FollowSymLinks -Indexes

        IndexIgnore *

DirectoryIndex

<IfModule mod_rewrite.c>

RewriteEngine on

# gunakan port yg sesuai seperti diatas

RewriteRule ^(.*)$ http://localhost:63001/$1 [P]

</IfModule>

Note:

1. For those of you who are not familiar with using vim, please copy the script above. Then write vim index.js. When a blank screen appears, please right click select paste. After that, to save the script, please press "Esc" on the keyboard. Then write: wq and enter.

2. If there is already an .htaccess file and the .htaccess file already has contents, then please add the code above to the bottom as shown below,

Also Read : How to Create an .htaccess File on cPanel Hosting

10. React.js Installation Process Successful!

Okay, try now to open a web browser then write according to your domain name. If using a subdomain, make sure to write the subdomain as well. And look what happened! React.js has been successfully installed on your hosting 😀

Conclusion

So for those of you who like javascript oprek, especially React.js, this guide is very useful, you know! Try to imagine when your website localhost runs smoothly. But when on Hosting, suddenly the website crashes and has problems just because the React.js service isn't running yet. Therefore, follow the guide on how to install React.js on Hosting step by step. Don't miss anything! KincaiHosting supports Node.js, PHP, Python and Ruby, you know! Do you want to try cheap hosting with the best quality from KincaiHosting? Let's order KincaiHosting Cheap Hosting

Also Read: How to Deploy a Python Website on Hosting

Published on: 3/2/21, 5:34 PM