Setting homepage in package.json doesn't set PUBLIC_URL on build

Description

Following the docs here (Building for Relative Paths), so setting homepage field in package.json doesn’t set PUBLIC_URL during the build.

Expected behavior

%PUBLIC_URL% in build/index.html should be replaced with URL set in package.json’s homepage field.

package.json:

{
  ...
  "homepage": "https://example.com",
  ...
}

build/index.html:

...
<script type="text/javascript" src="https://example.com/static/js/main.ec7f8972.js">
...

Actual behavior

%PUBLIC_URL% will be replaced with nothing.

package.json:

{
  ...
  "homepage": "https://example.com",
  ...
}

build/index.html:

...
<script type="text/javascript" src="/static/js/main.ec7f8972.js">
...

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): 1.0.7
2. node -v: 8.1.2
3. npm -v: 5.0.3

Then, specify:

1. Operating system: macOS 10.12.5
2. Browser and version: Not relevant

Reproducible Demo

1. create-react-app my-app (I used create-react-app 1.3.1)
2. cd my-app
3. Add "homepage": "https://example.com" to package.json
4. yarn build
5. build/index.html doesn’t prepend URL to the paths in the script tag

But setting PUBLIC_URL=https://example.com in .env and build will produce the expected behaviour (adds URL to the script tag). Setting homepage in package.json should do the same.

[cbravo]

@Timer if this is the correct use of public_url what is the correct way of setting full URL for the meta tags that require it such as og:image?

[vaibhavhrt]

People like me who are looking for something like this in in build:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

1. Quick Solution

Build your project like this: (windows)

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build

(linux)

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

(mac) – not sure –

And you will get

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

in your built index.html

2. Permanent Solution

Create a file called .env at your project root(same place where package.json is located). In this file write this(no quotes around the url):

PUBLIC_URL=https://dsomething.cloudfront.net

Build your project as usual (npm run build) This will also generate index.html with:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3. Weird Solution

Add this in your package.json

"homepage": "http://://dsomething.cloudfront.net",

Then index.html will be generated with:

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Which is basically the same as:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

in my understanding.