Deploying React Apps

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.

By admin

Linux admin, JS / React / Python / Perl developer.