---
title: "How to Deploy a React App on Cyberpanel: A Step-by-Step Guide"
description: Deploying a React App on CyberPanel 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/how-to-deploy-react-app-on-cyberpanel/"
updated: "2025-01-28"
category: Cyberpanel
---

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

Deploying a React App on CyberPanel 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 CyberPanel.

---

### Prerequisites

Before you begin, ensure you have the following:

1. A React app ready for deployment.
2. Access to a CyberPanel account with a hosted domain or subdomain.
3. Basic knowledge of file management in CyberPanel.

---

### Step 1: Add the Homepage (Domain) URL to Your package.json File

First, open up your React app project. Locate and open your `package.json` file. Add a “homepage” attribute as shown below:

```
{
  "homepage": "http://yourdomainname.whatever"
}
```

Replace `http://yourdomainname.whatever` with your domain or subdomain.

---

![](https://truehost.com/support/wp-content/uploads/2025/01/R2-1.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/R3-1024x576.png)

You’ll notice a new directory named `build` in your project. The `build` folder contains optimized files ready for deployment.

Now, generate a ZIP file of the `build` folder to prepare it for upload.

---

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

### Step 3: Access CyberPanel and Create a Website

1. Log in to your CyberPanel account.
2. Navigate to **Websites > Create Website**.
3. Fill out the required fields (domain name, email, and PHP version) and click **Create Website**.

If your domain or subdomain already exists, skip this step.

---

### Step 4: Upload and Extract the Build Folder

1. In CyberPanel, go to **Websites > List Websites** and select **File Manager** for your domain.
2. Navigate to the root directory of your domain (e.g., `/public_html`).
3. Upload the ZIP file containing your `build` folder.
4. Once uploaded, extract the ZIP file.
5. Move all files from the `build` folder to the root directory of your domain (e.g., `/public_html`).

---

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

### Step 5: Add an .htaccess File for Routing

To handle client-side routing with React Router, create an `.htaccess` file in the root directory (`/public_html`) 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>
```

This ensures proper routing and prevents 404 errors when accessing other pages of your React app.

---

### Step 6: Test Your Deployment

Visit your domain or subdomain in a browser to see your React app live. If you encounter a 404 error, double-check the `.htaccess` file and ensure all files are correctly placed in the root directory.

---

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

### Additional Guide: Automating Deployment with GitHub Actions

For seamless deployment, consider automating the process using GitHub Actions. This allows you to push updates to your repository and automatically deploy them to your server.

---

### Conclusion

Deploying a React app on CyberPanel is simple and efficient. By following this guide, you can have your app up and running in no time. Share your experience or questions in the comments below!

All done. Congratulations! You’ve successfully hosted your React app on CyberPanel.

Happy Hosting!!