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

Phoenix Forum Questions / Help
,
1

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*

2

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

1 Like
3

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
4

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
5

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 ?

6

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

7

Oh ok thank you

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

8

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

9

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

10

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
11

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
12

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

1 Like
13 
$ 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) ?

14

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
15

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

16

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.

1 Like
17

I was fighting with this recently and created an account to post this in case it helps those that find this thread as I did. I’m using Phoenix 1.7.14 and had issues with both tailwind and esbuild, and here are my workarounds:

  • Compile esbuild v. 0.17.11 and overwrite project version (depends on the ‘go’, ‘git’, and ‘gmake’ packages)
    git clone GitHub - evanw/esbuild: An extremely fast bundler for the web
    git checkout tags/v0.17.11
    cd esbuild
    gmake
    cp esbuild {project}/_build/esbuild-openbsd-x64
    doas pkg_add node

  • Install tailwindcss v. 3.4.3 and @tailwindcss/forms
    npm install tailwindcss@3.4.3
    npm install @tailwindcss/forms
    Replace project _build/tailwind-linux-x64 with the following shell script

#!/bin/sh
exec npx tailwindcss $@

chmod u+x _build/tailwind-linux-x64

  • mix phx.server
    If there are version warnings, then update the steps to correspond to the expected version.
18

There is nothing to do, just need to be a bit patient for phoenix to download tailwind and rebuild the assets for the first run.