chocolatedonut

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

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

hubertlepicki

Yes, there appear to be Mix tasks provided by the library Phoenix uses (and created) to wrap up and deliver Tailwind:

https://github.com/phoenixframework/tailwind

Where Next?

Popular in Questions Top

RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New

We're in Beta

About us Mission Statement