How to Deploy a React application on a cPanel

post is about how to deploy React app in a sub-directory on cPanel. So, for this, you need a React Application setup and a cPanel ready for deployment. You can host React app on Firebase or any free hosting as well. That, I will cover in another post.

React App

cPanel/WHM

Once, you are ready, let’s start the deployment steps.

Deploy React App in a Sub Directory in cPanel Root Domain

In the very first step, we will create a sub-directory in the root domain directory. So, by default, we have the public_html directory for a domain that is mapped inside the cPanel. Now, assuming, you have a domain named example.com having a public_html root directory. But, we want to host React application in a sub-directory named app inside the public_html.

Hence, we will create a sub-directory named app inside the public_html (Root domain directory). So, the URL will become example.com/app for the React Application.

After creating the sub-directory, we will come to the React Application for some app-level configuration.

Configure React App to Host on a cPanel Sub Directory

At the application level, we will need to configure our sub-directory which we have created on the cPanel.

In the initial step, open the project in any editor (VS Code recommended). After that, you need to navigate to the package.json file available in the root of the project directory.

Then add an attribute named homepage as shown below.

"homepage: "/sub-directory"

So, in our case, after adding the directory name (app), it will become like this.

{
  "name": "react-blog-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/app",
  "dependencies": {
    ....
  },

We have specified the folder name as an attribute named homepage with the directory name in the package.json object.

Update React Router DOM For Basename Router

In the next step, we will need to update BrowserRouter. As we will already have the React Router DOM for routing management for the React app.

Now, we will be adding the basename attribute in <Router> component. In the basename attribute, we will pass our sub-directory name (app) as shown below.

import React from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { AppRouter } from './components/AppRouter';
import './App.scss';

export const App = () => {
  return (
    <Router basename={"/app"}>
      <AppRouter />
    </Router>
  );
};

The basename props will help the request to look into the specified directory as we added the app.

Build React App to Deploy in Production

In the next step, we need to make a build of the application so that we can deploy it on production. For making a build, hit the below command in the terminal.

npm run build

Create a .htaccess File For Sub Directory

Once we will deploy React app to the server, we can access the app. If you will try to access the app through the root domain followed by the directory (example.com/app), it will return 404. It won’t be an accessible directory through the URL. So, in order to manage the redirection, you’ll need to add a simple .htaccess file to tell the server to fall back to our index.html file. This is the same configuration we would use if the application was on the server root, just with a different absolute path to our index file.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /app/index.html [L]
</IfModule>

That’s it. Now, you can refresh the page and try to access the application URL (example.com/app).