How to identify the generated CSS and JS files during Meteor build

help
1

We are creating an AMP version of the dynamic public pages of our app. The goal is to make first delivery very fast while warming the main app in the background using a service worker.

During the install part of the service worker, we need to precache the js and css bundles. Since the service worker is outside of meteor, we have to identify the filenames and locations of the created js and css bundle and write it to a json file that the service worker can read

Where is the best place to hook into meteor to create the list of the generated files?

2

I’ve previously used this to find the CSS:

const fs = require('fs');
let cssPath = __meteor_bootstrap__.serverDir.replace('/server','/web.browser');
cssPath += "/"+fs.readdirSync(cssPath).find(file => file.slice(-4)==".css");

The same should work for the js.

One suggestion: instead of writing the paths to a json file (which would require two round trips) you could serve them directly from a fixed url using WebApp.connectHandlers, with the service worker adding a cache-busting timestamp on the url (or with no-cache headers on the response).

1 Like
3

@wildhart, fantastic idea on serving them through WebApp.connectHandlers

Brilliant!