How to host react.js (client) app on cpanel
Tags: javascript, react, node, tutorial
Published: 2022-02-25 08:47:23

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

{% youtube F0ORxJWZ_D8 %}

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

![Cpanel File Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9huym0965sqdd3tjlz5v.png)
- 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**

![File Manager supablog.supatechie.ga](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3452axbh8kogoh3nkpwo.png)

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

![cpanel upload button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o5no6vif7cm54nyulyj.png)
- 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.

![cpanel upload files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9lhparx3zy8gzekik9y.png)

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

{% youtube ZO-DPIhZ2Fo %}