140

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?

Community
  • 1
  • 1
tscizzle
  • 9,753
  • 15
  • 51
  • 82
  • 2
    Did you find a solution to this issue? – user1521567 Aug 16 '17 at 03:45
  • I use express on my server. I resolved the issue by having my client served from the built-in dev server that create-react-app gives you (connecting on your standard localhost:3000), but then also spinning up my express server on localhost:9000 and having my client point API calls to that port when in development. So index.html, assets, etc. served by create-react-app's built-in server, and API calls served from my own server on a different port. So I have 2 servers going in development. But on prod, my express server serves the client (index.html, assets, etc.) from the build directory. – tscizzle Aug 16 '17 at 14:06

4 Answers4

100

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

Andrew McLachlan
  • 329
  • 1
  • 14
sudo bangbang
  • 23,736
  • 11
  • 71
  • 75
  • 35
    The answer doesn't match the question. – Denis Zhbankov Oct 12 '18 at 12:42
  • 4
    This is not recommended by react guys... https://github.com/facebook/create-react-app/issues/1487#issuecomment-277727669 – Nadeem Jamali Mar 19 '19 at 14:39
  • 5
    @NadeemJamali A few comments after that one they mention officially releasing this feature https://github.com/facebook/create-react-app/issues/1487#issuecomment-278871994, but note that it doesn't work well with client side routing. – Rohmer Mar 20 '19 at 02:28
  • It looks like this article gets homepage to work with client side routing: https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1 – Rohmer Mar 20 '19 at 02:53
  • @Rohmer, you're right. They did have a pull request for it. I'm not sure about client side routing with CRA. It has always been a pain for me. – sudo bangbang Mar 20 '19 at 13:22
  • @Rohmer, I was running in this issue due to the port number in my URL. After all, I included the port number in the value of "homepage", then it starts working... – Nadeem Jamali Mar 21 '19 at 04:56
47

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"
    // ...
  }
  // ...
}
Andre Miras
  • 3,183
  • 45
  • 46
  • I've been trying this and while it seems to work to some extent (app is now hosted at "/"), anywhere in my code that referrs to %PUBLIC_URL% or process.env.PUBLIC_URL still gets the value set in the "homepage" attribute in package.json. However if I change it in a .env file, it does change those variables. Any idea what I'm doing wrong? – Richard Jul 03 '20 at 15:32
  • this worked for me! gh-pages requires the homepage value in package.json so it's kinda annoying that it breaks other things but this worked! –  Jul 11 '20 at 23:09
  • 2
    Works fine. When I npm start, the browser opens pointing to this variable. Thanks! – julianm Sep 03 '20 at 20:53
  • 1
    On my Windows setup PUBLIC_URL=/ is translated to %2520, so I just write PUBLIC_URL= (empty space) and it works – Yvain Apr 26 '21 at 10:16
8

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

y_nk
  • 1,887
  • 2
  • 16
  • 26
6

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
Matthieu G
  • 744
  • 7
  • 9