Search code examples
javascriptreactjsapachecreate-react-app

How does Create React App deployed in subdirectory works with url parameters?


Regarding the documentation, deploying create react app into Apache subfodler involve:

Adding these lines inside .htaccess file:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Adding this line in package.json file:

"homepage": "/mySubdirectory/"

Adding this line in the Router:

basename={"/mySubdirectory/"}

From what I understand, this should display the app at https://www.example.com/mySubdirectory/.

Regarding this setup, I think that we tell the server we want to display index.html that is created during npm run build, and we tell the application to do a javascript redirect to "https://www.example.com/mySubdirectory/" before mouting the app.

Am I right?

What should happen if we try to access the application with parameters in the URL (for tracking purpose)? For example, if we want to access "https://www.example.com/mySubdirectory/?source=campaign1?

When I try this setup on Amazon S3, Heroku, Netlify, - note that they obviously don't need the Apache redirection - the parameters are saved. When I try it on Apache server (with the redirection), parameters are lost and I don't understand why.

Maybe I misunderstand what happen with the server redirection, the JS redirection or both of them.

Do you guys have any idea?


Solution

  • Problem solved! For some reason, there were a 301 redirect from https://www.example.com/mySubdirectory/ to https://www.example.com/mySubdirectory/index.html set on apache server. With the redirect, parameters were lost (Still don't know why...). Without it, everything works as intented. So if people are interested, the setup above is working on Apache server.