React has taken the web development scene by storm, making it a go-to choice for developers. With its component-based architecture and efficient rendering. When combined with cPanel, a popular web hosting control panel known for its user-friendly interface, developers find deploying applications straightforward.

 

 

 

cPanel is recognized for simplifying website management, making it accessible to both beginners and seasoned developers. It allows for quick deployments, lessening the time and effort compared to traditional hosting.

In this guide, you will learn how to deploy your React application on cPanel step-by-step.

Building Your React App for Production

Before deployment, it’s crucial to prepare your React app for production. Use the command:

npm run build

This command compiles your app into static files, stored in a build or dist folders. 

The build folder includes several critical components:

• index.html: The main HTML file
• static/: Contains CSS, JavaScript, and image files
• manifest.json: Provides metadata for the application
• service-worker.js: Used for progressive web applications

Selecting a Suitable Hosting Package

Choose a hosting plan that fits your project’s needs. Consider factors like expected traffic, storage space, and server resources. Basic plans are often sufficient for smaller apps, while larger projects may require more robust options.

Considerations for Database Integration (if needed)

If your React app uses a database, cPanel supports MySQL and PostgreSQL. Set up your database through cPanel’s database management features, ensuring smooth integration for data retrieval and storage.

Uploading Your React Application to cPanel

Select all the files on the build folder and compress them using zip compression software and upload them using any of the below methods:

Using cPanel’s File Manager:

Using cPanel’s File Manager upload the files using these steps:

1. Log in to cPanel.
2. Click on “File Manager.”
3. Navigate to the public_html directory.
4. Click on “Upload” and select the compressed build file from your build folder.
5. Ensure all files are uploaded successfully.

Using FTP client like filezilla:

FTP clients like FileZilla or Cyberduck are excellent tools for transferring files. Here’s how to do it:

1. Download and install your preferred FTP client.
2. Connect to your cPanel account using your FTP credentials.
3. Navigate to the public_html directory.
4. Upload the compressed build file from your build folder.

 

Configuring Your Web Server (Apache or Nginx)

1. Apache Configuration: .htaccess File Tweaks

   Apache servers use an .htaccess file for configuration. You’ll need to set routing correctly. Here’s an example of a simple .htaccess file:

   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]

   This configuration ensures all routes are handled by your React app.

   2. Nginx Configuration: Server Block Setup

   For Nginx, a server block configuration is needed. Here’s a basic setup:

   server {
       listen 80;
       server_name yourdomain.com;
       root /path/to/build;
   
       location / {
           try_files $uri /index.html;
       }
   }

   Make sure to replace /path/to/build with the actual directory path.

Testing and Troubleshooting Your Deployed App

Now you can test your app by navigation to the domain name of your app. 

Common Deployment Errors and Solutions

After deployment, you may encounter errors like 404. Here’s how to troubleshoot:

• 404 Errors: Check your routes in React and ensure your .htaccess or Nginx config is correct.
• Incorrect Paths: Make sure that paths in your HTML or JS files are pointing to the right locations.