---
title: "How to Deploy a React App on cPanel: A Step-by-Step Guide"
description: "Deploying a React app on cPanel is a straightforward process that can be completed in just a few steps. Whether you're a beginner or an experienced developer, this guide will walk you through the entire process, from building your React…"
url: "https://truehost.com/support/knowledge-base/deploy-react-app-on-cpanel/"
updated: "2025-01-13"
category: Cpanel
---

# How to Deploy a React App on cPanel: A Step-by-Step Guide

Deploying a React app on cPanel is a straightforward process that can be completed in just a few steps. Whether you're a beginner or an experienced developer, this guide will walk you through the entire process, from building your React app to making it live on cPanel.

---

## **Prerequisites**

Before you begin, ensure you have the following:

- A React app ready for deployment.
- Access to a cPanel account.
- Basic knowledge of file management in cPanel.
-

### **Step 1: Add the Homepage(domain) URL to your package.json File**

First, open up your React App. Open up your `package.json`file and add a "`homepage`" attribute as shown below in the screenshot:

The format should be `"homepage": "http://yourdomainname.whatever"`

![](https://truehost.com/support/wp-content/uploads/2025/01/image-38.png)

### **Step 2 : Create the `build` folder**

To create a production-ready build of your React app, run the following command in your project directory:

**`npm run build`**

![](https://truehost.com/support/wp-content/uploads/2025/01/image-39.png)

You'll notice this creates a new directory in your project called `build`. 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.

Now generate a zip file of the build folder ready for the next step. Upload to cPanel.

####

### **Step 3: Access cPanel**

Log in to your cPanel account and navigate to the **File Manager**. This is where you’ll upload your React app.

Navigate to the root directory of your domain, that is "**`public_html`**" for the main domain or a folder with the same name as your domain(addon domain) or subdomain e.g "`your-otherdomain.com`" or "**`subdomain.domain.com`**" folder

In my case, I'll be using a subdomain.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-40-1024x373.png)

Upload the Zip file and Extract.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-41-1024x457.png)

Navigate to the build folder and select all files and move them to the root directory of your domain or subdomain.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-42-1024x383.png)

You should have in your file manager something close or similar to the one below.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-43-1024x452.png)

### **Step 4: Add `.htaccess` file for Routing**

To handle client-side routing with React Router, add an **`.htaccess`** file to the public_html directory with the following content:

```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

![](https://truehost.com/support/wp-content/uploads/2025/01/image-44-1024x338.png)

> ***NOTE: The Above code (rewrite rule) also prevents your React App from displaying Error 404 on accessing other pages. Ensure it is added.***

### **Step 5: Test Your Deployment**

Visit your domain in a browser to see your React app live. If you encounter a 404 error, refer previous **`step 4.`**

![](https://truehost.com/support/wp-content/uploads/2025/01/image-45-1024x522.png)

#### **Additional Guide.**

To easily manage, your app deployment, you may also consider automating this process using Github Actions. See guide below.

> [How to push changes to your code on cpanel using github actions and FTP.](https://truehost.com/support/knowledge-base/how-to-push-changes-to-your-code-on-cpanel-using-github-actions-and-ftp/)

[“How to push changes to your code on cpanel using github actions and FTP.” — ](https://truehost.com/support/knowledge-base/how-to-push-changes-to-your-code-on-cpanel-using-github-actions-and-ftp/embed/#?secret=oNIYiqi3B1#?secret=FtozpfYWAg)

#### **Conclusion**

Deploying a React app on cPanel is a simple and efficient process. By following this guide, you can have your app up and running in no time. Give it a try and share your experience in the comments below!

All Done. Congratulations. You've successfully hosted your react App on cPanel.

Happy Hosting!!