How To deploy React App on Shared Hosting(cPanel)?

What is ReactJs?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. While there are many good options for deploying React app, Shared hosting remains the most affordable one to start for small and experimental project.

While it remains the cheapest way to deploy the React app it certainly not the easiest, But as a developer one should always try and learn new things.

In this article we’ll understand how to deploy react app on Shared hosting Step by Step.

React App on your local machine runs on localhost i.e: localhost:port

STEP 1: Replacing localhost with domain name (the URL on which you want to run your React App)

To deploy the React app on Shared hosting we need to replace this local address with your domain name.

In package.json file of your react app add a new property “homepage”

"homepage": "http://yourdomainname.com"

(in our case URL is https://ravee.in/tools/ToDoList/ )

STEP 2: Generate a optimized build of the React App

In order to deploy react App on Shared hosting we need to generate a optimized build of the app. Run the following command:

npm run build

In your project directory it will create a build folder, that contains all your static files of the project.

STEP 3: Upload files on hosting either using FTP (FileZilla, WinSCP) or directly using your cPanel of shared hosting. (I’ll upload using cPanel)

Upload everything from build directory to the domain directory i.e., https://ravee.in/tools/ToDoList/

STEP 4: Configure your .htaccess file in the domain directory

(where you have just uploaded the build files)

This is the most important part i.e., .htaccess configuration, this file contains configuration of which file to serve when someone visit the domain, if you have followed above steps , copy and paste the below code in .htaccess file

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

If you don’t have .htaccess file in your domain directory then create a fresh .htaccess file and copy-paste the upload lines of code.

Note: ./index.html when your index.html and .htaccess in same folder. if you have put your react app in some other folder then ./someotherfolder/index.html

For example: (in my case following is the .htaccess file code)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /tools/ToDoList/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /tools/ToDoList/index.html [L]
</IfModule>

And Finally our React App is Live!