How to Deploy a React App on cPanel: A Step-by-Step Guide -

Deploying a React app on cPanel is a straightforward process that can be completed in just a few steps. Whether you’re a beginner or an experienced developer, this guide will walk you through the entire process, from building your React app to making it live on cPanel.

Prerequisites #

Before you begin, ensure you have the following:

A React app ready for deployment.
Access to a cPanel account.
Basic knowledge of file management in cPanel.

Step 1: Add the Homepage(domain) URL to your package.json File #

First, open up your React App. Open up your package.json file and add a “homepage” attribute as shown below in the screenshot:

The format should be "homepage": "http://yourdomainname.whatever"

Step 2 : Create the `build` folder #

To create a production-ready build of your React app, run the following command in your project directory:

npm run build

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

Now generate a zip file of the build folder ready for the next step. Upload to cPanel.

#

Step 3: Access cPanel #

Navigate to the root directory of your domain, that is “public_html” for the main domain or a folder with the same name as your domain(addon domain) or subdomain e.g “your-otherdomain.com” or “subdomain.domain.com” folder

In my case, I’ll be using a subdomain.

Upload the Zip file and Extract.

Navigate to the build folder and select all files and move them to the root directory of your domain or subdomain.

You should have in your file manager something close or similar to the one below.

Step 4: Add `.htaccess` file for Routing
#

To handle client-side routing with React Router, add an .htaccess file to the public_html directory with the following content:

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

NOTE: The Above code (rewrite rule) also prevents your React App from displaying Error 404 on accessing other pages. Ensure it is added.

Step 5: Test Your Deployment #

Visit your domain in a browser to see your React app live. If you encounter a 404 error, refer previous step 4.

Additional Guide. #

To easily manage, your app deployment, you may also consider automating this process using Github Actions. See guide below.

How to push changes to your code on cpanel using github actions and FTP.

Conclusion #

Deploying a React app on cPanel is a simple and efficient process. By following this guide, you can have your app up and running in no time. Give it a try and share your experience in the comments below!

All Done. Congratulations. You’ve successfully hosted your react App on cPanel.

Happy Hosting!!