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