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

udoyhasan · Accepted Answer · 2022-06-10 15:33:37Z

6

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>

answered Jun 10, 2022 at 15:33

udoyhasan

2,14611 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jorge Guerreiro Over a year ago

The homepage attribute was already set to my website, I tried updating the htaccess to yours and still nothing, any other ideas @udoyhasan

udoyhasan Over a year ago

Can you please share your website url?

Jorge Guerreiro Over a year ago

sintrawelcomecentre.com

udoyhasan Over a year ago

You can try the hash history method as you are hosting on cPanel. Instead of using example.com/about you can simply use example.com/#/about. For more information please refer to this answer

Jorge Guerreiro Over a year ago

I saw that approach, I'm not the biggest fan but I might end up doing that, thanks for the info

|

Collectives™ on Stack Overflow

htaccess for React app using React router hosted on cpanel

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related