CODEWITHSUNDEEP
reactjscreate-react-app
tscizzle
tscizzle

Reputation: 12251

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

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?

Upvotes: 184

Views: 230718

Answers (8)

Haroon
Haroon

Reputation: 305

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

Upvotes: 0

Shyji John
Shyji John

Reputation: 1

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.

Upvotes: 0

Ryan Maki
Ryan Maki

Reputation: 51

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.

Upvotes: 5

Rider Cogswell
Rider Cogswell

Reputation: 1

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!

Upvotes: 0

y_nk
y_nk

Reputation: 2275

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

Upvotes: 23

sudo bangbang
sudo bangbang

Reputation: 28229

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

Upvotes: 126

Matthieu G
Matthieu G

Reputation: 814

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

Upvotes: 9

Andre Miras
Andre Miras

Reputation: 3840

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

Upvotes: 65

Related Questions