sezaru
Good way to bundle JS dependencies into a elixir library
Consider this scenario: I’m creating a library that contains a phoenix component on it. That component requires a hook, and that hook imports some JS library to do its job.
What is the correct approach to make my Phoenix project (or esbuild for that matter), that has my library as a dependency, see that JS library correctly (let’s say the JS library is in deps/my_library/assets/node_modules/library)?
Esbuild will obviously find the path for the Phoenix project node_modules in assets/node_modules via the :cd in config, but it doesn’t know about my library path at all.
I guess I could generate a dist directory with the hooks + JS libraries already bundled with esbuild and push it to the library repo, but I’m not sure if that would be the best approach to solve this or if there is some corner cases.
Marked As Solved
D4no0
I’m not positive 100% on a correct approach, however I think you can use the approach liveview uses to serve the JS it requires to be up and running.
The way it does is by placing the JS files in priv folder.
Then you import them in your own project and you can use them directly from js.
Also Liked
LostKobrakai
Yeah, essentially you can make your mix project an npm project as well. You can then have your user lookup deps as a possible node_modules folder. That’s what phoenix does with it’s own project internal dependencies as well.
sezaru
Thank you, that did it, I replicated the way liveview does for their JS stuff and it worked like a charm. I also added a package.json file to the root of the project like @LostKobrakai mentioned and now I can import the library the same way we do with lv (import {LiveSocket} from "phoenix_live_view") pretty neat!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
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.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"