Questions & Help>Questions

Best way to use digested assets in client side javascript

/phoenix#troubleshooting#assets#digest#static-assets
tyro

tyro

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.

1 comment
/phoenix#troubleshooting#assets#digest#static-assets
949 1

Showing Posts 1 to 1

tyro

tyro OP

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
Post #1
— All posts loaded —

Where Next? Top

View thread on forum (has 1 reply!)
phoenix
troubleshooting
assets
digest
static-assets
Home Questions & Help>Questions
3 910 1
Last post
REPLY VIEW THREAD

Trending in Questions Top

Blokh
Questions & Help>Questions

Huge CSV processing that needs to be processed hourly - any tips?
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
/phoenix
10 1191 5
New
kszambelanczyk
Questions & Help>Questions

Delete file on S3 with Waffle
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
/phoenix#waffle#waffle-ecto
1 695 1
New
Onor.io
Questions & Help>Questions

How To Create A Select Control From A Lookup Table?
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
/phoenix
3 243 5
New
Trolleger
Questions & Help>Questions

Proper way to send channel events to multiple different people for live updates?
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
/phoenix#channels
2 689 2
New
matt-savvy
Questions & Help>Questions

Honeybadger and Bandit, Phoenix, Plug errors
Anyone here using Honeybadger? My Honeybadger account is being overwhelmed with noise from some bots. Seeing a lot of Bandit.HTTPError...
/phoenix#bandit
1 222 2
New
RemyXRenard
Questions & Help>Questions

Livebook DataTable displaying charlist as list
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
/livebook#charlist
2 325 3
New
samoloth
Questions & Help>Questions

Prevent_hijacking? on email change confirmation with magic link strategy
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
/ash#ash-authentication
0 196 1
New

Other Trending Topics Top

mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
168 5507 69
New
garrison
News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
#library#database#distributed#hobbes
302 4824 87
New
mcass19
News>Announcing

ExRatatui - Elixir bindings for the Rust ratatui terminal UI library
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
#library#rust#terminal#tui
58 2534 15
New
Damirados
News>Announcing

Emerge & Solve - a GUI framework for Elixir
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
/nerves#library#frameworks#gui#native#state
59 2300 23
New
netoum
News>Announcing

Corex - Accessible and unstyled UI Phoenix components
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
/phoenix#library#ui#liveview#hooks#accessibility#component#tableau
61 2202 19
New
wintermeyer
News>Announcing

Vutuv.de - an open-source LinkedIn alternative built in Phoenix
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
/phoenix#fediverse#project
76 1722 40
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

Enabling companies to succeed by building software people love.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

Enabling companies to succeed by building software people love.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews