Hosting a React.js website on a shared server with cPanel involves a series of steps to ensure a smooth deployment. Below is an easy guide on how to host a React.js website on a shared server using cPanel.

Prerequisites:

  1. Shared Hosting Account: Ensure you have access to a shared hosting account with cPanel.
  2. Node.js and npm: Make sure Node.js and npm are installed on your local machine.
  3. React App: Have your React.js application ready for deployment.

Step 1: Build Your React App

Before deployment, build your React app to create the production-ready build. Open your terminal and navigate to your project folder, then run:

npm run build

This command generates a build folder containing optimized and minified files.

Step 2: Access cPanel

  1. Log in to your cPanel account provided by your hosting provider.
  2. Navigate to the “File Manager” to manage your files.

Step 3: Upload Files to the Server

  1. In the “File Manager,” go to the public_html directory.
  2. Upload the contents of the build folder (excluding the folder itself) into public_html. You can use the cPanel file uploader or an FTP client.

Step 4: Create .htaccess File

  1. Create a new file named .htaccess in the public_html directory.
  2. Edit the file and add the following code to enable the server to handle React Router:
   Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.html [QSA,L]

Step 5: Set Up Node.js

  1. In cPanel, locate the “Setup Node.js App” option.
  2. Create a new Node.js application:
  • Choose the Node.js version.
  • Set the application root to public_html.
  • Set the application URL to your domain.
  1. Start the application.

Step 6: Update npm Packages

In the cPanel terminal, navigate to your public_html folder and run:

npm install --production

Step 7: Update Environment Variables

If your React app uses environment variables, update them in your cPanel account or directly in the .htaccess file.

Step 8: Test Your Website

Visit your domain in a web browser to test your React.js website. Ensure that routing works correctly.

Conclusion:

Hosting a React.js website on a shared server with cPanel involves uploading your build files, configuring the server to handle React Router, and setting up Node.js if needed. Follow the steps carefully to ensure a successful deployment of your React app.

Categorized in:

Web Hosting support,

Last Update: December 9, 2023