How to Deploy React.js Applications in cPanel?

Deploying a React.js application on cPanel is straightforward if you follow these steps. This guide covers building your React app locally and uploading it to your hosting account.

Prerequisites

• The application must work perfectly in the local environment.
• A domain or subdomain must be connected to your cPanel or web hosting.

---

Step 1: Build Your React Application

Open your project folder on your local machine and run:

npm run build

This will create a build/ folder containing all the optimized static files needed for deployment.

---

2. Log in to cPanel

• Access your cPanel dashboard using your hosting credentials.
• Open File Manager.

---

3. Upload the Build Files

• Go to the public_html folder (or the domain’s root folder if you are using an addon domain).
• Make sure the directory is empty; delete any old files and folders if they exist.
• Upload the contents of the build/ folder (not the folder itself, only its contents).

---

4. Set Default Index File

Ensure your app’s entry file is named index.html inside public_html.

• React build generates it automatically.
• This will be the default file your domain loads.

---

5. Configure .htaccess (Optional for Routing)

If your app uses React Router for navigation, add the following to your .htaccess file in public_html:

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

This ensures all routes point back to index.html.

---

Final Check

• Visit your domain in a browser.
• Your React.js application should now load successfully. 🎉

---

Quick Summary:

1. Run npm run build
2. Upload build files to public_html
3. Ensure index.html is present
4. (Optional) Add .htaccess for routing