mwillema
Hi everyone,
Using Elixir Phoenix and esbuild, I installed fontawesome using NPM in the assets folder. I can properly load the SCSS files, but the fonts do not load. I get the following error:
no route found for GET /node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf
Any idea how could I fix this?
PS: My esbuild config is:
config :esbuild, version: "0.14.0", 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__)} ]
Thanks in advance for your help!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
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
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
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, logs, uptime, and Just Enough APM. Built for developers.
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!"
Showing Posts 1 to 4- Show Best Posts
- Show All Posts (oldest first)
- Show All Posts (newest first)
soup
That URL looks pretty suspect to me. You should be able to peek at
priv/static/assetsand see if the font files are being placed in there.If they look good, check that you’re importing/including/whatevering them correctly in the JS (or whatever)?
mwillema
The font files are not placed in priv/static/assets, only the scss is compiled and injected into the app.css file.
Somehow it looks like esbuild (or whatever) does not move the font files in the priv folder.
soup
This gist seems to imply you need to do some lifting yourself maybe, specifically adding loaders for font file types?
See also
esbuild content types css
esbuild content types external file (needs manual enable!)
Might help?
mwillema
It would probably help but I don’t find it an elegant solution. It’s more of a hack. I’d like to be in control of all the code I’m writing, especially when it’s deployed into prod
Btw I found another solution, also a workaround but IMO less messy. I simply symlinked the fonts into
priv/static/fontsand set$fa-font-path: "/fonts";It worked