0

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

Jorge Guerreiro
  • 682
  • 6
  • 22

1 Answers1

2

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>
udoyhasan
  • 1,527
  • 5
  • 19
  • The homepage attribute was already set to my website, I tried updating the htaccess to yours and still nothing, any other ideas @udoyhasan – Jorge Guerreiro Jun 10 '22 at 16:55
  • Can you please share your website url? – udoyhasan Jun 11 '22 at 08:35
  • https://www.sintrawelcomecentre.com – Jorge Guerreiro Jun 12 '22 at 16:28
  • 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](https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually#:~:text=Bypassing%20the%20problem%20altogether%3A%20Hash%20History)*** – udoyhasan Jun 13 '22 at 05:29
  • I saw that approach, I'm not the biggest fan but I might end up doing that, thanks for the info – Jorge Guerreiro Jun 13 '22 at 07:42
  • There is one alternative way. You can use **[Vercel](https://vercel.com)** or **[Netlify](https://netlify.com)** to host your this react app. They both have free plan and will work good with react router and also you don't need to change the url structure. – udoyhasan Jun 14 '22 at 08:34
  • yeah, I had it hosted in Netlify and was working well but the email is structured on the company that provides us the cPanel and we can't change – Jorge Guerreiro Jun 14 '22 at 08:57
  • You can do one thing, you can host the site on Netlify but don't change any nameserver then go to the cPanel DNS zone editor and you will find 2 records for your domain: ***`sintrawelcomecentre.com A XX.XX.XX.XX`*** & ***`www.sintrawelcomecentre.com CNAME something.tld`*** Change this to: ***`sintrawelcomecentre.com A 75.2.60.5`*** & ***`www.sintrawelcomecentre.com CNAME .netlify.app`***. In this way, you will be able to use the email on cPanel and also can use Netlify to host only the frontend. And all will be functional :) – udoyhasan Jun 14 '22 at 18:07