Deploy a React.js App on cPanel : Step-by-Step Guide

Deploying a React.js app on cPanel may sound like a technical task, but with the right steps, it’s simple and straightforward. Whether you’re a developer deploying your app for the first time or someone managing a website, this guide will walk you through the process in easy-to-follow steps. Let’s get started!

Step 1: Get Your Hosting Ready

Before diving into deployment, you’ll need a reliable hosting provider. At HahuCloud, we offer robust web hosting solutions that are perfect for deploying React.js apps. If you don’t already have an account, head to HahuCloud, choose a hosting package, and get your account ready.

Step 2: Add the Homepage to package.json

The first step in configuring your React app for deployment is to define your app’s homepage. Open your React app project and locate the package.json file. Inside the file, add a new attribute called homepage:

Replace https://your-example-domain-name.com with your actual domain name (e.g., http://my-website.et).

Step 3: Prepare the Build File

To prepare your React app for deployment, you’ll need to create a production-ready build:

1. Open your code editor and launch the terminal.

2. Ensure you are in your project’s root directory.

3. Run the following commands:

This will generate a build folder in your project. The build folder contains a compressed, optimized version of your app that is ready for deployment.

Step 4: Zip the Build Folder

To upload your app, you’ll need to zip the contents of the build folder:

1. Navigate to the build folder created in the previous step.

2. Open the folder, and zip only its contents (not the folder itself).

3. Make sure to exclude unnecessary files—only include what’s in the public directory.

Save the zipped file for later.

Step 5: Upload the Build File to cPanel

Now that your build file is ready, it’s time to upload it to your hosting account:

1. Log in to your cPanel account on HahuCloud.

2. Open File Manager and navigate to the public_html directory.

3. Click Upload, and select the zipped build file you prepared earlier.

4. Once the upload is complete, right-click on the zip file and select Extract to unzip it in the public_html folder.

Step 6: Create and Upload the .htaccess File

React apps often use routes, and to ensure they work properly, you need to add an .htaccess file. In the same public_html directory:

1. Click + File to create a new file.

2. Name it .htaccess (including the dot at the beginning).

3. Edit the file and add the following code:

Save the changes.

Step 7: Test Your App

With everything in place, it’s time to test your app:

1. Open your browser.

2. Navigate to your domain name (e.g., https://your-example-domain-name.com).

If everything was done correctly, you should see your React app running live!

Conclusion

Deploying a React.js app on cPanel is a straightforward process when broken down into steps. From preparing your hosting account with HahuCloud to building and uploading your app, you now have all the knowledge needed to take your app live.

Ready to launch your React app? Get started with HahuCloud and enjoy secure, reliable hosting today!