When deploying React apps on Apache or nginx, in a sub-folder of the root / DocumentRoot, there are some issues to consider.
While the deployment guide suggests setting "homepage": "."
in package.json, others have advised against this. Taking that at face value, I used "homepage": "/react/react-hooks"
, which initially appeared to work.
However… static images from /images/ failed to load. The files exist in the correct folder. They would load with curl -i http://bclug.ca/react/react-hooks/canada.png
, but not in browser.
So, some conflict between <BrowserRouter basename="/react/react-hooks">
? (Note – the basename path was taken from package.json
‘s "build": "REACT_APP_RELATIVE_PATH=/react/react-hooks react-scripts build"
, and defaults to “”.)
In the end, and it took a long time to figure out, “homepage”: “.” is perfectly valid and works perfectly well. One can safely ignore the caveats against using it.
Now… let me tell you a story about deploying in a sub-directory on a web server where the same vhost has a WordPress install. A bad and dumb idea that hurt just as much as it ought to have.