Create-react-app: Cannot serve built static assets from external CDN

[EnoahNetzach]

Description

We have a SPA served from an AWS server (e.g. "https://s3.eu-central-1.amazonaws.com/...") but used on our domain (e.g. https://www.mydomain.com/...); we have some .svg files bundled within and our _package.json_ "homepage" is set to the AWS url.

The .js and .css assets are retrieved correctly from AWS, but the browser tries to retrieve the .svg files from our domain, and of course it fails since they are hosted on the AWS server.

Expected behavior

Assets built in build/static/media/* are resolved from the domain specified in the _package.json_ "homepage" value (i.e. "https://s3.eu-central-1.amazonaws.com/...").

Actual behavior

Static assets are resolved from the domain where the main.[hash].js is being loaded from (i.e. "https://www.mydomain.com/...").

Environment

• npm ls react-scripts: [email protected]
• node -v: v6.8.0
• npm -v: 3.10.8
• Operating system: any OS
• Browser and version: any browser
  

  Reproducible Demo

Basic CRA setup with external files imported.

[gaearon]

I’d take a PR that implements this via reading PUBLIC_URL env variable. Please see https://github.com/facebookincubator/create-react-app/pull/694#issuecomment-250737866.

[EnoahNetzach]

That's perfect, so PUBLIC_URL=https://s3.eu-central-1.amazonaws.com/... npm run build would work as we expect, right?

btw: thank y'all for your work, time & dedication!

[mars]

How about namespacing this as REACT_APP_PUBLIC_URL so that it's automatically white listed into process.env along with other custom environment vars?

[EnoahNetzach]

@mars would work for me, @gaearon, any downsides?

[EnoahNetzach]

Any news on this issue?

[gaearon]

How about namespacing this as REACT_APP_PUBLIC_URL so that it's automatically white listed into process.env along with other custom environment vars?

It is already available as process.env.PUBLIC_URL, as documented. I don't want to namespace it because it has a special meaning not defined by the user.

[sjmueller]

Is there a clear explanation of how this will work? Here's what I tried:

1. cloned the @EnoahNetzach's fork: https://github.com/EnoahNetzach/create-react-app
2. npm link the forked version of react-scripts
3. npm linked into my app
4. create dist with PUBLIC_URL=https://s3.us-east-1.amazonaws.com/ npm run build
5. ran with pushstate-server build

Expected

All references to static media would be structured with absolute references (i.e. https://s3.us-east-1.amazonaws.com/static/media/icon-1234.png)

Actual

All links were still relative: /static/media/icon-1234.png

[EnoahNetzach]

@sjmueller in my experience it won't work after a npm link, the build dir is created in the create-react-app repo.

The steps to follow to reproduce in your case are:

• unlink react-scripts if still linked
• install react-scripts from the folder (in my case it is something like "file:../create-react-app/packages/react-scripts/")
• run the build with PUBLIC_URL env var

[EnoahNetzach]

@gaearon if I could ask, why this issue is in the 0.9.0 milestone while the related PR is in the 0.8.0 one?

[gaearon]

Sorry, both should be tagged as 0.9.0 now.
I remember about it and it won't skip another minor again.

[EnoahNetzach]

@gaearon ahah sorry for the psychological terrorism!

[Timer]

Resolved in #937 and #1504.

[Timer]

Hi @EnoahNetzach! This is out in 0.9.0.