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

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.example to http://mywebsite.example/relativepath or even http://mywebsite.example/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

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"
    // ...
  }
  // ...
}

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 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

Adding on to what the top answer said, the homepage: "." option works if using create-react-app, but not if you are using Vite. For Vite, you have to add base: "./" to the vite.config.js and it will have the same effect.

I had a similar situation where an image would not appear once I added 'homepage' to my package.json and deployed it to gh-pages. After trying many different solutions, I finally solved this by taking the image out of the public folder and into the src folder. Then I switched:

<img src="/img/image.JPG" alt="image" />

to

<img src={require('../../assets/image.JPG')} alt="image" /> 

This seemed to do the trick for me!

Keep the 'homepage' key in the package.json file pointing to the github pages or your website URL.

Only then the relative path will be set to the 'Public' directory and all paths becomes relative to the assets used.

To avoid localhost problem, create .env file in the project directory with the following content PUBLIC_URL="." this will make sure the localhost paths are not messed up.

In my case I was using ViteJS. So I need to add base in vite.config.js and package.json.

/* File: vite.config.js */
export default defineConfig({
  //...
  base: "/github-repo-name/",
});

/* File: packages.json */
{
 //...
"scripts": {
 //...
 "build": "vite build --base=/github-repo-name/",
 //...
}

Hope this help someone...