chocolatedonut
Why isn't app.css immediately generated?
Why isn’t app.css immediately generated in a fresh Phoenix project? The app on localhost looks wonky due to the missing CSS and only after, say, 30 s the app.css gets generated and the error, as well as the UI, resolves. Not 100% reproducible, but i do see this issue often. It also happens when a project is cloned & built on another computer.
Not a big issue, though a bit jarring since one is surprised for a few s as to what’s happening. I can imagine newcomers are surprised even more.
phoenix “1.7.2”
phoenix_live_reload “1.4.1”
phoenix_live_view “0.18.18”
tailwind “0.2.0”
Relevant console logs:
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (AWeb.Router)
(app 0.1.0) lib/phoenix/router.ex:487: AWeb.Router.call/2
(app 0.1.0) lib/app_web/endpoint.ex:1: AWeb.Endpoint.plug_builder_call/2
(app 0.1.0) lib/plug/debugger.ex:136: AWeb.Endpoint."call (overridable 3)"/2
(app 0.1.0) lib/app_web/endpoint.ex:1: AWeb.Endpoint.call/2
(phoenix 1.7.2) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
(plug_cowboy 2.6.1) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
(cowboy 2.9.0) /path/to/project/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
(cowboy 2.9.0) /path/to/project/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
(cowboy 2.9.0) /path/to/project/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
(stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
Rebuilding...
Done in 757ms.
[debug] Live reload: priv/static/assets/app.css
Similar existing threads:
Marked As Solved
chocolatedonut
Thanks. This explains the behaviour: the “tailwind” dependency runs its Mix task in parallel and if the network is a bit flaky, then it can very well finish noticeably later.
So one can serialize it by explicitly front-running the task
mix tailwind default --config=tailwind.config.js \
--input=css/app.css \
--output=../priv/static/assets/app.css \
&& ...
Also Liked
hubertlepicki
Yes, there appear to be Mix tasks provided by the library Phoenix uses (and created) to wrap up and deliver Tailwind:
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
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
- #elixirconf-us
- #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 for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"