How to Host/Deploy ReactJs Apps on cPanel

Hosting a React.js app on cPanel involves building the app and configuring it to serve static files. Follow these steps:

1. Build Your React App

Run the following command in your React project directory to generate the production build:

sh

npm run build

This will create a build folder containing the static files.

2. Upload the Build Folder to cPanel

1. Log in to your cPanel.
2. Go to File Manager.
3. Navigate to the public_html directory (or create a subfolder if needed).
4. Upload the contents of the build folder (not the folder itself) to public_html.

3. Set Up .htaccess (Fix Routing Issues)

Create a .htaccess file in public_html and add the following content:

apache

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

This ensures that React’s client-side routing works correctly.

4. Configure the cPanel Settings

1. Go to Domains > Addon Domains (if hosting in a subdomain).
2. Set the document root to public_html (or the subfolder where you uploaded the files).

5. Verify and Test

• Visit your domain (e.g., yourdomain.com).
• If there are issues, check File Manager to confirm files are correctly placed.

Bonus: Set Up a Node.js Server (Optional)

If your React app needs a backend with Express.js:

1. Use cPanel’s Node.js App feature.
2. Deploy your backend in a separate directory.