How to Deploy a React App on cPanel

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

So, you’ve built an awesome React app, and now you’re ready to share it with the world. But how do you get it from your local machine to the web? If your hosting provider uses cPanel, you’re in luck – deploying a React app on cPanel is easier than you might think.

In this guide, we’ll walk you through the process step by step, from building your app to uploading it to cPanel. Whether you’re a coding newbie or a seasoned developer, you’ll have your React app live in no time. Let’s dive in!

Step 1: Build Your React App

Before you can deploy your app, you need to create a production-ready build. Here’s how:

1. Open your terminal and navigate to your React project directory.
2. Run the following command:

npm run build  

This creates a build folder in your project directory, containing all the optimized files needed for deployment.

Step 2: Access Your cPanel Account

1. Log in to your hosting account and open cPanel.
2. Look for the File Manager option under the Files section and click on it.

Step 3: Upload Your Build Files

1. In the File Manager, navigate to the directory where you want to host your React app (e.g., public_html or a subfolder).
2. Click the Upload button and select the files from your build folder.
   • Alternatively, you can compress the build folder into a ZIP file, upload it to cPanel, and extract it using the Extract tool

Step 4: Configure Your .htaccess File

React apps use client-side routing, which can cause issues when users try to access specific routes directly. To fix this, you’ll need to configure your .htaccess file:

1. In the File Manager, create a new file named .htaccess in the same directory as your build files.
2. Add the following code to the .htaccess 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>

This ensures that all routes are redirected to index.html, allowing React Router to handle them.

Step 5: Test Your App

1. Open your browser and navigate to your domain (e.g., https://yourdomain.com).
2. If everything is set up correctly, your React app should load perfectly.

Troubleshooting Tips

• 404 Errors: Double-check your .htaccess file and ensure it’s in the correct directory.
• Blank Page: Make sure all files were uploaded correctly and that the paths in your index.html file are accurate.
• Slow Loading: Optimize your app’s performance by compressing images and enabling gzip compression in cPanel.

Final Thoughts

Deploying a React app on cPanel doesn’t have to be intimidating. With this step-by-step guide, you can get your app live quickly and confidently. Whether you’re showcasing a portfolio, launching a side project, or building the next big thing, cPanel makes it easy to share your work with the world.

So, what are you waiting for? Go ahead and deploy that React app – the internet is waiting!