How to do versioned assets (like tailwind css)?

I’m using Phoenix LiveView with tailwind and deploying this to a server behind Cloudflare (free plan). Cloudflare doesn’t seem to respect etags (they support ‘weak etags’, ie they still cache, and ‘strong etags’ are only supported on higher level plans). After build and deploy, tailwind is especially impacted because of it’s JIT system, and so changes to the app CSS are not reflected until Cloudflare decides its time to check the origin.

To get around this, I think I’ll need to switch to versioned assets, and I am hoping that there is an existing automated way to make this happen. I see Plug.Static has some support for ?vsn, but it’s not clear how best to use this.

Any guidance would be appreciated :raised_hands:

Take a look at mix phx.digest


Thanks. I saw this, and played around with it as well. I can see that it generates the various assets (and it seems to be part of the assets pipeline in mix.exs), but I wasn’t sure how to automate the selection of the digest into the deployed html.

That should happen automatically when you use phx static_path helpers. They’ll consult the generated cache_manifest.


Thanks for the response.

I spent a bit more time playing around with phx.digest, but I think I’m still missing a trick. After running phx.digest I can see all the resulting assets with their digest suffixes under priv/static/*. I’m definitely using the helpers, I can see in my endpoint.ex the usage of Plug.Static, and it’s configured to use paths ~w(assets fonts images favicon.ico robots.txt).

When I load up the site, I’m looking to try get the browser to load something like app.css?vsn=<digest>, but it only loads the usual app.css. I need it to be using the versioned url to ensure Cloudflare doesn’t cache it.

Any more help would be appreciated, I couldn’t find anything in the docs around how to get this working.


Are you testing this with MIX_ENV=prod? Because only prod is configured by default to use the manifest mix phx.digest generates.

1 Like

oh interesting. This is maybe something I lost - I’ve moved towards a 12-factor config style and so quite a lot of the config shifted around, and I may have missed something here (most of my config is now in runtime.exs). Do you know which clause configures this for production?




thanks for all the help :raised_hands: