Before you begin, ensure you have the following:<\/p>\n\n\n\n
- \n
- A React app ready for deployment.<\/li>\n\n\n\n
- Access to a cPanel account.<\/li>\n\n\n\n
- Basic knowledge of file management in cPanel.<\/li>\n\n\n\n
- <\/li>\n<\/ul>\n\n\n\n
Step 1: Add the Homepage(domain) URL to your package.json File<\/strong><\/h3>\n\n\n\n
First, open up your React App. Open up your
package.json <\/strong><\/code>file and add a “homepage<\/strong><\/code>” attribute as shown below in the screenshot:<\/p>\n\n\n\nThe format should be\u00a0
\"homepage\": \"http:\/\/yourdomainname.whatever\"<\/code><\/p>\n\n\n\n![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-38.png\")
<\/figure>\n\n\n\nStep 2 : Create the\u00a0
build<\/code>\u00a0folder<\/strong><\/h3>\n\n\n\nTo create a production-ready build of your React app, run the following command in your project directory:<\/p>\n\n\n\n
npm run build<\/code><\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-39.png\")
<\/figure>\n\n\n\nYou’ll notice this creates a new directory in your project called\u00a0
build<\/code>. 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.<\/p>\n\n\n\nNow generate a zip file of the build folder ready for the next step. Upload to cPanel. <\/p>\n\n\n\n
<\/h4>\n\n\n\n
Step 3: Access cPanel<\/strong><\/h3>\n\n\n\n
Log in to your cPanel account and navigate to the\u00a0File Manager<\/strong>. This is where you\u2019ll upload your React app.<\/p>\n\n\n\n
Navigate to the root directory of your domain, that is “
public_html<\/code><\/strong>” for the main domain or a folder with the same name as your domain(addon domain) or subdomain e.g “your-otherdomain.com<\/strong><\/code>” or “subdomain.domain.com<\/code><\/strong>” folder<\/p>\n\n\n\n<\/p>\n\n\n\n
In my case, I’ll be using a subdomain.<\/p>\n\n\n\n
![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-40-1024x373.png\")
<\/figure>\n\n\n\nUpload the Zip file and Extract.<\/p>\n\n\n\n
![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-41-1024x457.png\")
<\/figure>\n\n\n\nNavigate to the build folder and select all files and move them to the root directory of your domain or subdomain.<\/p>\n\n\n\n
<\/p>\n\n\n\n
![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-42-1024x383.png\")
<\/figure>\n\n\n\nYou should have in your file manager something close or similar to the one below.<\/p>\n\n\n\n
![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-43-1024x452.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Step 4: Add
.htaccess<\/code> file for Routing
<\/strong><\/h3>\n\n\n\nTo handle client-side routing with React Router, add an
.htaccess<\/code><\/strong> file to the public_html directory with the following content:<\/p>\n\n\n\n<IfModule mod_rewrite.c>\n RewriteEngine On\n RewriteBase \/\n RewriteRule ^index\\.html$ - [L]\n RewriteCond %{REQUEST_FILENAME} !-f\n RewriteCond %{REQUEST_FILENAME} !-d\n RewriteRule . \/index.html [L]\n<\/IfModule><\/em><\/strong><\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-44-1024x338.png\")
<\/figure>\n\n\n\n\n
NOTE: The Above code (rewrite rule) also prevents your React App from displaying Error 404 on accessing other pages. Ensure it is added.<\/em><\/strong><\/p>\n<\/blockquote>\n\n\n\n
Step 5: Test Your Deployment<\/strong><\/h3>\n\n\n\n
Visit your domain in a browser to see your React app live. If you encounter a 404 error, refer previousstep 4. <\/code><\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/truehost.com\/support\/wp-content\/uploads\/2025\/01\/image-45-1024x522.png\")
<\/figure>\n\n\n\nAdditional Guide.<\/strong><\/h4>\n\n\n\n
To easily manage, your app deployment, you may also consider automating this process using Github Actions. See guide below.<\/p>\n\n\n\n