Hacker News new | ask | show | jobs
by thearrow 3255 days ago
How do people go about sending Link headers / configuring server push for resources with a changing hash in their filenames?

For example if you have your app.ab9a9a09fe9.js file, but then the next deploy you have your app.ba293dcde.js file... can you just set the resource to app.*.js somehow?

3 comments

You can make it part of your build process to generate a file with the headers needed, and during deploy it gets copied and/or configures the web server/platform you're running on.
If you can write a <script> tag that references app.ab9a9a09fe9.js, presumably you can write a HTTP header that references that same file, no?
For example: a SPA webpack setup using html-webpack-plugin which generates the <script> tags in index.html for the different assets, later served by nginx or similar.

How does one tell nginx the names of the files to push if they are generated dynamically? You have to put the names in a separate file and then somehow configure the server using that file?

this webpack plugin might help you: https://gist.github.com/Kamshak/35630ec21df8dca27de3bb915f2d...

I have no idea why the original comment by the author is shadow banned.

What about a static website served through nginx, for example?
I'm actually just doing that right now (changing my static website to work with Netlify's Push). Presumably, your base HTML looks something like this:

  <link href="{{ "main.css"|asseturl }}" rel="stylesheet" type="text/css" />
Then, your _headers.j2 file should look like this:

  /*
    Link: <{{ "main.css"|asseturl }}>; rel=preload; as=stylesheet
Which will just be replaced with the correct value, same as in your HTML template.
I suppose you are using webpack, i have just written a small plugin for this (assumes an SPA, writes the same js/css to /*): https://gist.github.com/Kamshak/35630ec21df8dca27de3bb915f2d...