[Solved]-Using `"homepage"` in package.json, without messing up paths for localhost-Reactjs

you can override the homepage setting using you dev shell environment:

$ export public_url=http://localhost:3000/ 
$ yarn start 

or if you prefer, remove your homepage setting and configure your env before building for production:

$ export public_url=http://example.com/subdir 
$ yarn build

for people coming here looking for an all-in-one answer which also covers react-router-dom:

1. add package.json['homepage'] to be your production url. to be noted, the cra build step removes the domain part of the url to leave only the path to index.

2. when building for localhost, do public_url=/ npm run build

3. add <base href="%public_url%" /> in your public/index.html page as proposed in this article ; it will provide support for assets (img, css) and will expose the %public_url% to be reused later.

4. in the component which creates your browserrouter (typically app.js or main.js), add:

   const basename = document.queryselector('base')?.getattribute('href') ?? '/'    
   

5. use as: <browserrouter basename={basename} />

you can use public_url environment variable to override the homepage for a specific build. even better have it set in your package.json, for instance:

{
  // ...
  "scripts": {
    "build": "react-scripts build",
    "build-localhost": "public_url=/ react-scripts build"
    // ...
  }
  // ...
}

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