Installing a React website on a standard cPanel hosting
Installing a React website on a standard cPanel hosting account involves creating a production build on your local machine and then uploading those static files to your server. Our servers don't need any special changes; this is the standard procedure for all cPanel based servers. Following are easy step by step instructions to do so:
1. Prepare Your Production Build
React code must be converted into standard HTML, CSS, and JavaScript that web browsers can read.
- Set Homepage: Open your package.json file and add "homepage": "." or "homepage": "http://yourdomain.com" to ensure file paths resolve correctly after deployment.
- Run Build Command: In your project's terminal, execute npm run build (or yarn build).
This generates a build/ folder (or dist/ if using Vite) containing your production-ready files.
- Compress Files: Navigate into the build/ or dist/ folder, select all files inside, and compress them into a single .zip archive.
2. Upload to cPanel
- Access File Manager: Log in to your cPanel account and open the File Manager.
- Select Directory: Navigate to the public_html directory for your main domain, or the specific folder for a subdomain.
- Upload and Extract: Use the cPanel Upload tool to upload your .zip file. Once uploaded, right-click the file and select Extract.
3. Configure Client-Side Routing
If your app uses React Router, you must redirect all traffic to index.html to avoid 404 errors on page refreshes.
- Create .htaccess: In the same directory as your uploaded files, create a new file named .htaccess
- Add Rules: Paste the following boilerplate code into the file and save:
<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>
