Asset Fingerprinting

[paganotoni]

In order to avoid cache issues for Buffalo applications, buffalo apps should fingerprint its assets based on file contents.

Probably rails documentation explains this better than me.

[paganotoni]

@markbates thoughts ?

[markbates]

This would require two different things. 1) WebPack would need to be configured to do this sort of finger printing. 2) some sort of assetPath helper that would return the path to an asset with the correct fingerprinting on it.

It may also require changes to packr.

[paganotoni]

I think we can start by adding the assetPath helper which could be a separate story. Im also thinking that this should be one of those opt-out things that as a developer you could disable if you don't want to have in your app.

[paganotoni]

@markbates i would love to work on this one if its ok to work on this now, WDYT ?

[markbates]

Knock yourself out kid. ;)

[frederikcreemers]

I think you could use a plugin like webpack-manifest-plugin to generate a manifest JSON file, which maps JavaScript file names to the file names of the corresponding output file. Then, the helper can just read that JSON file. If I'm not mistaken, Packr can pack up an entire, directory, so it can just pack up the entire output directory.

[paganotoni]

@markbates @bigblind i did an initial attempt at fingerprinting here:

https://github.com/apaganobeleno/app/tree/feature-assets-sample

So far it works and Webpack does the heavy-lifting, however while implementing this (outside buffalo) solution it made me notice somehow when rendering css we need to provide users this helpers as well, so inside a css rule like:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

body {
  background: url("some_image.png"),
}

Users can do something like url(<%= assetPath("some_image.png") %>) and use the fingerprinted version of the image.

[frederikcreemers]

In webpack, file-loader and url-loader take care of this. In the webpack config file that buffalo generates, there are already rules for font files, and for my own project, I've added a rule for png images as well:

{
    test: /\.png$/,
    use: "url-loader?limit=10000&mimetype=image/png" + fileLoaderPath
 }

Given your example background image, this will put a file named "some_image.fq0hx5bh4dx0d.png", and replace the url in the css file with the correct path.

But they'd still need a helper if they ant to reference these resources outside of the webpack-generated bundle.

[paganotoni]

thanks @bigblind !

[paganotoni]

@bigblind one question regarding the png rule you've set, what did you assigned into fileLoaderPath?

[frederikcreemers]

fileLoaderPath = "&publicPath=/assets"

I have a slightly wonky frontend setup, and I experimented with this setting and the useRelativePath setting.

[paganotoni]

Added in #583

[sbry]

There is a simpler solution for asset-fingerprinting. Instead of parsing the manifests json from the app, HtmlWebpackPlugin can process the application.html template like this:

...
 output: {
        filename: "application.[chunkhash].js",
        path: __dirname + "/public/assets",
        publicPath: "/assets/"
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: __dirname + "/public/assets/application.html",
            template: '!!raw-loader!templates/application.html',
        }),
        new ExtractTextPlugin({
            filename: "application.[contenthash].css"
        }),
...

The only other change is referencing the new path in actions/render.go HTMLLayout: "../public/assets/application.html".

[markbates]

That solution makes a lot of assumptions, the biggest of which is that the only place assets are going to be called is from application.html file. It also assumes there are only the application.css and application.js files, and not others. It also moves the application.html file out of the templates directory, which means it isn't in the templates box, so it wouldn't be can't be found by the template engine. Thanks for the suggestion though, but I don't think that's the best approach.

…

----------- Mark Bates

On Aug 29, 2017, 4:36 AM -0400, Justin Salisbury ***@***.***>, wrote: There is a simpler solution for asset-fingerprinting. Instead of parsing the manifests json from the app, HtmlWebpackPlugin can process the application.html template like this: ... output: { filename: "application.[chunkhash].js", path: __dirname + "/public/assets", publicPath: "/assets/" }, plugins: [ new HtmlWebpackPlugin({ filename: __dirname + "/public/assets/application.html", template: '!!raw-loader!templates/application.html', }), new ExtractTextPlugin({ filename: "application.[contenthash].css" }), ... The only other change is referencing the new path in actions/render.go HTMLLayout: "../public/assets/application.html". — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.