How to host react.js (client) app on cpanel

#javascript #react #node #tutorial

In order to host your react.js app on cpanel, we will assume you have acquired a hosting package with cpanel accessible. In this article, we will be using namecheap shared hosting package but you can use any hosting plan.

Video Tutorial
If you are the visual type like me, go ahead and watch the video below.
Please don't forget to like, share, comment, subscribe and turn on notification as that will give me the motivation to do more awesome videos and tutorials like this.

Things to note before hosting your react.js app

Ensure your domain is linked to your hosting account.
If main domain is already in use, create a subdomain dedicated for this project.

In this article we will be using https://supablog.supatechie.ga but go ahead and replace it with your domain or subdomain.

Once you’ve all these ready, follow the instructions below;

Create a new directory called project on your desktop or in your drive.
If you don’t have a react.js app already, go ahead and open your command line prompt and navigate to the project directory and run

npx create-react-app@latest client

The above command will create a new react.js app with name client for you but if you already have one, go ahead and skip this step.

After the client app has been created, open the project directory in any code editor of your choice.
Within the client directory, open public directory and create a new file with the name .htaccess and copy & paste the configuration below and save your file.

<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>

Still within your client directory, open package.json file and add “homepage”: “your_domain_url” key value pair, e.g

"name": "supablog",
"version": "0.1.0",
"private": true,
"homepage": "https://supablog.supatechie.ga",

Save all the changes you have made.

Open your cmd and navigate to your client directory and run the command below to prepare the app for production.

npm run build

Once it’s done building assuming no error occurred, open your file explorer on your system and go to project/client directory and you should see build directory. Open the build directory and highlight all the directories and files and zip it. If you are on windows, you can simply install WinRAR in order to zip your files.
Next step is to open your browser and login to your cpanel, scroll to _Files _ section and click on File Manager. This will take you to the files directory.

If you’re using your main domain, go ahead and open public_html to host your app but if you created a subdomain, cpanel should automatically create a new empty directory with name of the subdomain for you in this case our directory will be called supablog.supatechie.ga

Open the directory and click on *upload * at the top navigation bar

This should take you to an upload page. Click on the select file and it should open your system’s file explorer for you. Navigate to your project/cliecnt/build/ and select the build.zip file.

Once the zip file is uploaded, click on the link below to go back to your cpanel File Manager.
You will locate the build.zip over there, select the file and click on extract file on the top right. Your files will be extracted successfully
Open a new browser tab and type your domain name and the site should be opened successfully

Congratulations if you have made it this far.

Now you have successfully hosted your react.js app on cpanel without losing any functionality.

P.S
If you want a full tutorial on how to build a react.js and node.js express RESTful API from the scratch and host it on cpanel, please follow this my playlist on Youtube thank you.

Top comments (3)

shubKibees • May 29 '23 • Edited

Hi Peter,

I hope this message finds you well. I wanted to reach out and discuss an issue I'm encountering while deploying my React app(include react-router-dom) on cPanel. I would greatly appreciate your assistance in resolving it.

Here's a brief overview of the problem:

I have built my React app using the npm run build command, resulting in a production-ready build folder.

I uploaded the contents of the build folder to the public_html directory on cPanel.

The app seems to be accessible when I visit the website, but it does not render anything in the browser. I inspected the network requests and noticed several 404 errors for the static assets and manifest file.

I have attempted to configure the .htaccess file using the following rules, but the issue persists:

perl
Copy code
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Additionally, I added the following entry to the package.json file:
json
Copy code
"homepage": "mywebsite.com/"
Despite these efforts, the app still does not render correctly.

Peter, I'm reaching out to seek your guidance on how to resolve this issue. Could you please review the provided information and offer any suggestions or insights? I would be grateful for your assistance in helping me get the React app working properly on cPanel.

Thank you in advance for your time and support.

Best regards,