reactjs - Using `"homepage"` in package.json, without messing up paths for localhost

Question

This question actually follows directly from my answer on a previous question.

I added a "homepage" to my package.json because it is a React app that I hosted on Github Pages. The output of npm run build say that the /build directory can now be deployed, and it assumes the project is being hosted at /project_name/.

But on localhost, the project is not being hosted at /project_name/, so the paths being requested for js and css are messed up (looking for /project_name/static/... instead of /static/...) and the app broken.

How can one have the homepage field in package.json so that they can deploy to Github Pages (for example) while still develop locally with a working app?

Answer 1

Docs for create-react-app explains how to serve same build from different relative paths.

If you put homepage as

"homepage": ".",

assets will be served relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

For development purposes, serving using yarn start or npm start is good enough. App will be available in localhost