4 ms·

One thing that seems to be missing from these SPA app utilities is an automatic way of pointing your root HTML file at an expirable root JS file. In development

by amk_ 10y ago

One thing that seems to be missing from these SPA app utilities is an automatic way of pointing your root HTML file at an expirable root JS file. In development it's ok to point at `application.js` but in production NGINX/S3/Apache/Cloudfront should be serving something like md5-digest-of-app-bundle.js such that when the bundle content changes you invalidate the cache. If you're using a CDN you'll also need to have a prefix step to change the root url for assets.

chatmasta 10y ago
Use an env var
- amk_ 10y ago
  Yes, you can put the CDN host in an env var, but the link rewriting and asset digesting still needs to be done by the bundler.
  - chatmasta 10y ago
    Why can't you put it in an env var before calling the bundler?
    - amk_ 10y ago
      Maybe I'm not explaining myself clearly. You can use an environment variable to point to a CDN host and use it as a prefix in your code. But you also need to make sure the CDN assets get expired. One approach is to use the stats plugin for Webpack, parse the manifest, and write a helper so that the right files get included in the HTML. Here is an example of how the webpack-rails gem does it: https://github.com/mipearson/webpack-rails/blob/master/lib/webpack/rails/manifest.rb https://github.com/mipearson/webpack-rails/blob/master/lib/w... And here is an explanation of why you would want to do that instead of using ETag headers on constant filenames: http://stackoverflow.com/questions/26272271/why-digest-are-used-in-rails-4-for-static-content-instead-of-etag http://stackoverflow.com/questions/26272271/why-digest-are-u... EDIT: In fact after looking into it, Neutrino does use html-webpack-plugin which does exactly that by templating index.html: https://www.npmjs.com/package/html-webpack-template https://www.npmjs.com/package/html-webpack-template Which is cool!
deleted 10y ago
[deleted]
cobralibre 10y ago
Webpack supports the former if you use [hash] (or [chunkhash]) in the output filename. [1] This is what create-react-app uses. [2] [1] https://webpack.js.org/configuration/output/#output-filename https://webpack.js.org/configuration/output/#output-filename [2] https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L78 https://github.com/facebookincubator/create-react-app/blob/m...
- amk_ 10y ago
  Yep, the tricky part is just rewriting your HTML so that it includes the right file. However, it looks look my comment was incorrect and most frameworks have considered that issue. Neutrino and create-react-app use html-webpack-plugin. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L232-L248 https://github.com/facebookincubator/create-react-app/blob/m...

by amk_ 10y ago

chatmasta 10y ago

Use an env var

amk_ 10y ago
Yes, you can put the CDN host in an env var, but the link rewriting and asset digesting still needs to be done by the bundler.
- chatmasta 10y ago
  Why can't you put it in an env var before calling the bundler?
  - amk_ 10y ago
    Maybe I'm not explaining myself clearly. You can use an environment variable to point to a CDN host and use it as a prefix in your code. But you also need to make sure the CDN assets get expired. One approach is to use the stats plugin for Webpack, parse the manifest, and write a helper so that the right files get included in the HTML. Here is an example of how the webpack-rails gem does it: https://github.com/mipearson/webpack-rails/blob/master/lib/webpack/rails/manifest.rb https://github.com/mipearson/webpack-rails/blob/master/lib/w... And here is an explanation of why you would want to do that instead of using ETag headers on constant filenames: http://stackoverflow.com/questions/26272271/why-digest-are-used-in-rails-4-for-static-content-instead-of-etag http://stackoverflow.com/questions/26272271/why-digest-are-u... EDIT: In fact after looking into it, Neutrino does use html-webpack-plugin which does exactly that by templating index.html: https://www.npmjs.com/package/html-webpack-template https://www.npmjs.com/package/html-webpack-template Which is cool!

deleted 10y ago

[deleted]

cobralibre 10y ago

Webpack supports the former if you use [hash] (or [chunkhash]) in the output filename. [1] This is what create-react-app uses. [2] [1] https://webpack.js.org/configuration/output/#output-filename https://webpack.js.org/configuration/output/#output-filename [2] https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L78 https://github.com/facebookincubator/create-react-app/blob/m...

amk_ 10y ago
Yep, the tricky part is just rewriting your HTML so that it includes the right file. However, it looks look my comment was incorrect and most frameworks have considered that issue. Neutrino and create-react-app use html-webpack-plugin. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L232-L248 https://github.com/facebookincubator/create-react-app/blob/m...