61–68 of 68 posts
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…
Earlier quoted context omitted.
> plain JS ES2016 is "plain JS". If by "plain JS" you mean "jQuery plus ES5", I encourage you to learn what's happened in the last half a decade.
I see. I meant it as "things implemented in the browser", without any of the million and a half libraries.
The irony with all these frameworks, in many cases especially for small projetcs, it will be more efficient to code it from scratch than dealing with the whole stack thing. So much for not reinventing the wheel ...
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…
Use an env var
Earlier quoted context omitted.
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.
Why can't you put it in an env var before calling the bundler?
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/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-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 Which is cool!
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…
[1] https://webpack.js.org/configuration/output/#output-filename
[2] https://github.com/facebookincubator/create-react-app/blob/m...
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…
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 [2] https://github.com/facebookincubator/create-react-app/blob/m...
https://github.com/facebookincubator/create-react-app/blob/m...
Earlier quoted context omitted.
This was my biggest complaint with the Angular 2 cli generated app. I had to dig to even find out they were using webpack behind the scenes. And I know they just want to utilize it without troubling newbies, but I wish they had some means of customizing it. I think it's on their roadmap, or just being requested a lot on github. There's so much you can do with webpack that it's a shame it's hidden.
The inability to customize webpack was sometimes a pain point for me. There were a few things I wanted to do that would have been much easier if I could just play around with it. Fortunately, they've added the ability to get yourself a webpack config! https://github.com/angular/angular-cli/commit/7ac0d05 http://www.dzurico.com/angular-cli-with-the-super-powers/