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

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.