Deploy/Host your React App with Hostrain’s cPanel(Shared Hosting) in Simple Steps

What is React App?

React is a JavaScript library which created and released by Facebook,React is also called as User Interface (UI) library too,React is a tool which used for building UI components for you Website Design.

React applications are usually built around a single HTML. React developers often call this the root node (root element).

How to deploy/host your React app in Shared hosting on cPanel?

Here we Explain Easy simple step to host your react app on cpanel

Method 1:

Step 1: Buy Domain and Hosting Plan

If you planned to host your React app online, first you need to register a domain name for your website and Hosting space to host your files, To buy Domain and Hosting(Click here)

Step 2: Add Homepage to your package.json file

Now open your react app, find Package.json file in your react app, and add/edit code(attributes) line of homepage on package.json

Step 3: Create the Build file for your react app!

On your application’s root directory, The command you’ll run is yarn build (npm install and npm build work, too).

You’ll notice this creates a new directory in your project called build. The build folder is essentially a super-compressed version of your program that has everything your browser needs to identify and run your app.

Step 4: Upload Built file to Cpanel

Now login to your Client area and find your Cpanel detail, and log in to the Cpanel control panel provided by Hostrain. (Click here to learn “How to access Cpanel in hostrain“)

Now navigate to “File Manager” upload your built file into Public_html ,Add the Build File Contents to public_html

Step 5: Create and Upload the .htaccess File

In order for the route your React app, you need to add a .htaccess file. In the public_html folder, or top right corner click gear symbol for setting, then mark the “show hidden file” and save, now .htaccess file will appears or add a new file and name it .htaccess.

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Save .htaccess file,here you finish all steps,Happy Hosting With HostRain

Method 2: