kevinlang
Adding assets/vendor to NODE_PATH for vendored JS dependencies
Even for JS-minimal Phoenix apps, there is often a need to add external JS dependencies. The simplest way is to load the script by adding a link to the relevant CDN in the <head>. Another way is to vendor that same asset by committing the UMD artifact into the repository. This is what Phoenix already does for the topbar dependency it uses.
Another approach I found is to not only vendor it, but to instruct esbuild to look into that same vendor directory when it does module resolution. This allows one to specify a module name instead of the relative path. This is particularly useful when one needs to vendor TWO dependencies where one depends on the other.
All one needs to do is to modify config.exs to have an additional NODE_PATH directory. E.g.,
config :esbuild,
version: "0.17.11",
default: [
args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => "#{Path.expand("../deps", __DIR__)}:#{Path.expand("../assets/vendor", __DIR__)}"}
Then drop the relevant files in assets/vendor. These compiled UMD artifacts can be gotten from e.g., cdnjs.com. In my case, I wanted to add tippy which also depends on @poppyjs/core. I fetched both of those from unpkg.com and saved those into that directory. The final tree looking like:
assets/
vendor/
@poppyjs/
core.js
tippy.js
topbar.js
Then I could use tippy as expected in my app.js:
import tippy from "tippy";
I opened a proposal on the phoenix-core mailing list to have this be configured by default for new applications, as I think it is the most clear way to add external dependencies before one needs to step up to something more structured like NPM and such.
Cheers,
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
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!"