reactJS routing, errors 500 & .htaccess: rewrite rules not working on sub-routes

Question

I built a react app based on create-react-app.

In the package.json, I used '.' as value for the homepage:

{
    ...
    "homepage": ".",
    ...
}

But when deployed, I had 500 server errors; which I fixed by adding some htaccess stuff; on the top of a rewrite rule to force HTTPS:

<IfModule mod_rewrite.c>

    #force HTTPS
    RewriteEngine On 
    RewriteCond %{HTTPS} off 
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    #fix 500 errors
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /$1 [L]

</IfModule>

This seems to works for urls like

mywebsite.com

mywebsite.com/component

but not for sub-routes like

mywebsite.com/component/something

Those do fire various errors like for instance

Uncaught SyntaxError: Unexpected token '<' - main.8f4fdfb2.chunk.js:1

I noticed that opening this file (or any asset) on the server loads in fact the index.html file; because of the rewrite rule of the .htaccess, I suppose.

How should I update my .htaccess file so it only redirects the "main" request to index.html and not the assets ?

Thanks !

Answer 1

I finally fixed it by changing

"homepage": ".",

to

"homepage": "",

in my package.json.

Also found out interesting informations about that problem in this article: An elegant solution of deploying React app into a subdirectory, where they suggest to add

<base href="%PUBLIC_URL%/">

in the <head/> section of your index.html; but in my case it seems to work without this line.

For the record, this gist has been useful too.