No route found for GET /assets/app.css (Phoenix 1.7.3)

Hello I’m new in Elixir and Phoenix, I installed and started the “hello app” It’s work nicely except at the routing level for the css I get :

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css

but the path in the scaffold created by phoenix is *myapp/assets/css/app.css*

You have to update your css path to /assets/css/app.css in your root.html.heex file

1 Like

Thank you very much :slight_smile:

EDIT:

The CSS and JS are still not charged, with the changed path I have:

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/css/app.css
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/js/app.js

you should stick to /assets/app.css in your rott.html.heex file like so:

    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

the generated app.css and app.js will be used, not the sources, AFAIK

maybe there is something wrong with the generation of these files ?

1 Like

of app.css and app.js ?

in /app/assets/css/app.css I have:

@import “tailwindcss/base”;
@import “tailwindcss/components”;
@import “tailwindcss/utilities”;
/* This file is for your main application CSS */

What mean the sigil ~p ?

no, leave these entries as they are.
you could check the compiled app.css files will be generated in the case of some change in one of your views
the generated app.css is located in <project-root>/priv/static/assets/app.css

Oh ok thank you

In my <project-root>/priv/static/assets/ I just have an app.js file

so, I would assume that there is a problem in the generation of the file

Ok I also think, how generate or re-compile the css ?

it depends, in the case you build you project with phoenix 1.7, there should exist a mix task

mix assets.build

See in your mix.exsfile for details

1 Like

I ruuned mix assets.build I get ** (Mix) 'mix tailwind default' exited with 8

In mix.exs I have:

  defp aliases do
    [
      setup: ["deps.get", "ecto.setup", "assets.setup", "assets.build"],
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind default", "esbuild default"],
      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
    ]
  end

I’m not quite sure, what this error code mean, but maybe tailwind is missing ?
try running mix assets.setup or mix setup

$ mix assets.setup

10:40:21.800 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.7/tailwindcss-linux-x64

In myapp/_build I have esbuild-openbsd-x64 and tailwind-linux-x64 I think tailwind don’t support OpenBSD (my OS) ?

oh, that’s a tailwind issue or shortage, as I remember, in FreeBSD exists a linux compat. layer, does something exist in OpenBSD ?
maybe there is a workaround using the npm version of Tailwind css, you have to search the forum or tailwind site of using tailwind cli with OpenBSD

1 Like

Ok :wink: thank you very much for your help, now I know where the problem come from :slight_smile:

I’m in China and behind firewall which prevented the proper downloading of tailwind. In my case, I was missing the file tailwind-macos-arm64. All I needed to do was to install it manually from this link “https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.7/tailwindcss-macos-arm64” and placing it in the _build directory.