Best way to use digested assets in client side javascript

Phoenix Forum Questions / Help
, , , ,
1

Hi everyone,

My question is how best to get the static_path for assets when writing js code for a react app?

More info: I’m using react with phoenix and would like to take advantage of the static_path for assets so that I have versioned, cached assets with the same path whether included in the server side templates or in the react js code. Currently I’m not sure how to do this and can’t find any examples/prior discussion.

Would the best way be to request the cache_manifest.json file and parse that to extract the static paths? Or is there a better way?

Many thanks.

2

So here’s how I ended up doing this. Not sure if the best way (?) but it works in case anyone else is interested.

  1. I pass a list of image paths to my EEX template
  2. I embed a mapping from image path -> static path in the template via a script tag
  3. My JS react code uses that mapping for img sources when creating image elements

Here’s the template snippet I use to embed the mapping.

<script>
  const STATIC_PATHS = {
    <%= for path <- @image_paths do %>
      "<%= path %>": '<%= MyAppWeb.Endpoint.static_path(path) %>',
    <% end %>
  };
</script>
3 Likes