tyro
Best way to use digested assets in client side javascript
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.
Marked As Solved
tyro
So here’s how I ended up doing this. Not sure if the best way (?) but it works in case anyone else is interested.
- I pass a list of image paths to my EEX template
- I embed a mapping from image path → static path in the template via a script tag
- 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>
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"