Using `“homepage”` in package.json, without messing up paths for localhost

97
votes

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?

4
reactjscreate-react-app
Did you find a solution to this issue? – user1521567
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

4 Answers

71
votes

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

33
votes

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

For instance, problem can be because the 'index.html' file pointed to "/static/js/...js" and that will work if we release the application in the root folder, but if you have various static developments in the same machine using the same Apache Server you have a problem.

Configure Package.json with:

"homepage": "."

That will make use of relative paths instead of using absolute paths in the current folder. i.e. "./static/js/...js" Most common mistake while doing this change is inserting "./" and not "."

Further if you are not using react-router i.e. no client routing, you should be safe to go without this hack..

4
votes

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