mwillema
Trouble loading webfonts from Fontawesome using esbuild
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!
Trending in Questions
Other Trending 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
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #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, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
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!"
First 4 of 4 Posts
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