How To Deploy React JS App On cPanel

In this tutorial, I will show you how to deploy React JS app on cPanel.

The process is a bit technical, but with this hands-on guide, I have tried to simplify the whole set of steps involved so you can quickly and easily deploy your React.js app on cPanel. To get started, you need to purchase a domain and hosting. Once you have completed these, you will be able to access your cPanel.

Let’s get started.

READ MORE: How to deploy a Next JS app on cPanel

How To Deploy React JS App On cPanel

1. Go to your project directory and create a react app using the Terminal/CMD. You can do this by running ‘npx create-react-app my-app’.
2. Open the React app. Then open the package.json file and add a “homepage” attribute with your domain name using this format:

“homepage” : “http://yourdomainname.com”

3. In your project directory, go to the public folder and add a .htaccess file to the project you want to deploy.
4. Open the .htaccess file and insert the following configurations:

<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>

 

Note: This is for if your index.html and .htaccess file are in the same directory. But if your react app is in a different folder, set the “RewriteRule” to ./anotherfolder/index.html

5. In the root directory of your react application, run the yarn install or npm install. After the installation, depending on your choice, run yarn build or npm build. A new directory will be created in your project called build.

The build directory is a very compressed version of your react app, containing everything about your app. This is the folder that you will deploy in your cPanel.

6. Log into your cPanel. Then under the Files section, select File Manager.

7. In the File Manager, go to the public_html folder and upload the build directory.

8. Save the file. 

Now, drink some water. Take a deep breath and relax. You have successfully deploy React JS app on cPanel.