htaccess for React app using React router hosted on cpanel

Question

So I have a react single page application that I am hosting on cpanel. I have a pretty common issue from what I have been researching but none of the post in SO have helped me so far.

I am using React Router which I know is purely client-side routing. The problem is when the user refreshes the page on a url such as https://example.com/privacypolicy I get the stand Not Found error 404.

My folder structure in cpanel is as follows:

home/mysite
public_html
  all the folder from build folder (after npm run build locally)
  index.html(important for the post)
  .htaccess(important for the post)

The htaccess file is as follows:

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

I was hoping this was going to redirect all the requests to index.html and therefore react would know which component to render once that has been redirected.

It isn't and I'm a bit lost on what I'm doing wrong.

Any help is appreciated :)

Answer 1

To host ReactJS website on cPanel it is important to use homepage attribute in your package.json. For example, you can use:

"homepage": "http://example.tld"

Once you are done with setting up the homepage attribute, then run the npm build command to compile your code.

npm run build

This command will generate a folder named build in your project's root folder. Then upload the build folder contents to cPanel and use the below .htaccess file configuration.

<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>