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

reactjs create-react-app
tscizzle picture tscizzle · Mar 25, 2017 · Viewed 53.5k times · Source

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?

Answer

sudo bangbang picture sudo bangbang · May 18, 2017

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

Related questions

Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More
How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
The create-react-app imports restriction outside of src directory

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message. ./src/components/website_index.js Module not found: You attempted to import ../../…

Read More