Allow more customization to homepage option

[lucasavila00]

The current setup doesn't allow to use CRA and a CDN if index.html isn't in the same url as the other assets.

Setting the homepage on package.json to "https://somethig.com" will pass "/" as publicPath to webpack.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L38
That's fine.

But I'd like to serve all assets at a CDN (Firebase) and render "index.html" dynamically elsewhere (AWS Lambda) to add custom meta tags per route, as suggested here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server.
But then I have to set my publicPath to use Firebase's link.

At webpack's docs they say they support it:
https://github.com/webpack/docs/wiki/configuration

And a more complicated example of using a CDN and hashes for assets.

config.js

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

I wouldn't like to eject just for this, so, what do you guys think about letting me skip this logic https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L44 and set the publicPath I want?

Perhaps escaping the homepage field with a special char like "@https://foo.firebaseapp.com/" will disable https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L44

Proposed POC for this "fix" I came up with: #1280

Thanks for the great work you've been doing on this project 👍

[benknight]

I was able to get around this by setting my homepage to the unique string "$ASSET_URL" and then doing a find/replace on this string in a postbuild script:

{
  // ...
  "homepage": "$ASSET_URL",
  "devDependencies": {
    // ...
    "replace": "^0.3.0"
  },
  "scripts": {
    // ...
    "postbuild": "npm run replace",
    "replace": "replace '\\$ASSET_URL/static' '..' build -r -s --include='*.css' & replace '\\$ASSET_URL' '\"+window.$ASSET_URL+\"' build -r -s --include='*.js' & replace '\\$ASSET_URL/' '/' build -r -s --include='*.html'"
  },
}

[benknight]

Ah, what I forgot to mention is that I then set a global variable window.$ASSET_URL to whatever the CDN path is to the assets. It's a bit specific to my implementation (in this case a Visualforce site) but I'm sure you can tweak this basic idea to your needs. It's definitely a hack though and it would be nice to have some more customization ability around this.

[lucasavila00]

@benknight Your initial solution would do it for me, but I get the further idea.
I guess the contributors are already thinking about this issue. After posting my issue and PR I saw another PR that aims to solve this issue with env variables but people weren't so fond of teaching env vars to beginners.
I'll keep watching this project until they give an answer on the subject, and if they don't allow this configuration of CRA I'll steal your code as it's better to keep in versioning control.
As of right now I'm hacking react-scripts on all PCs I use and put the code I mentioned at #1280

I have given second thoughts on this topic and didn't came up with a better idea on how to allow this configuration cleanly and easy...
Anyway, bring the popcorn and let's watch how this unfolds hahah

[Timer]

Hi there! react-scripts v0.9.0 was just released which adds support for building for relative paths. You may read how to do so here.

Please test it and don't hesitate to reach out if this doesn't solve your specific use case!