Repository navigation
Allow more customization to homepage option #1279
Description
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 👍
Activity
benknight commentedon Dec 19, 2016
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:
benknight commentedon Dec 20, 2016
Ah, what I forgot to mention is that I then set a global variable
window.$ASSET_URLto 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 commentedon Dec 21, 2016
@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 commentedon Feb 11, 2017
Hi there!
react-scriptsv0.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!