Cannot load assets in Phoenix umbrella app

Phoenix Forum Questions / Help
,
1

Background

I have an old umbrella app that I am trying to bring to life once again. To do this I decided to add a phoenix project under the umbrella using:

mix phx.new.web hello_test --no-ecto

Notice the --no-ecto part, this is important.

Setup

After running said command inside my umbrella apps folder I changed my umbrella’s config/config.exs file by adding the following:

config :phoenix, json_library: Jason

With this out of the way, I went to apps/hello_test/lib/hello_test/application.ex and added to the start function the following:

children = [
      # Start the Telemetry supervisor
      HelloTest.Telemetry,
      # Start the Endpoint (http/https)
      HelloTest.Endpoint,
      # Start a worker by calling: HelloTest.Worker.start_link(arg)
      # {HelloTest.Worker, arg}
      {Phoenix.PubSub, name: HelloTest.PubSub}
    ]

Then I ran mix assets.deploy inside of the hello_test apps folder followed by mix phx.server.

Problem

Now at this point I was expecting to see some nice welcome page when loading to localhost:4000.
Instead I get a page with no css and an error message:

16:17:44.695 [debug] Processing with HelloTest.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]

16:17:44.737 [info]  Sent 200 in 51ms

16:17:44.821 [info]  GET /assets/app.js

16:17:44.887 [info]  GET /assets/app.css

16:17:44.887 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.js (HelloTest.Router)
    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2
    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2
    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3


16:17:44.897 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (HelloTest.Router)
    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2
    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2
    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3

To be fair the setup done until now was not trivial, but I managed it by searching endlessly in old github issues and in this forum.

However, now its different. This is as simple as any phoenix umbrella app can be and yet it still does not work out of the box.

The only solutions I found were for very old Phoenix versions, ones that still use NPM. I am using the latest version of phoenix, so those solutions do not apply:

λ mix phx.new --version
Phoenix installer v1.6.5

λ elixir -v
Erlang/OTP 24 [erts-12.1.4] [source] [64-bit] [smp:6:6] [ds:6:6:10] [async-threads:1] [jit]

Elixir 1.13.1 (compiled with Erlang/OTP 22)

How can I get rid of this error and make my app run correctly?

2

What do You have in priv/static?

Doing the bare minimum seems to work…

mix new koko --umbrella
cd koko/apps
mix phx.new.web hello --no-ecto
cd hello
mix assets.deploy

I added pubsub to the supervision tree.

Running the server, and editing assets css is detected, and live reload works well.

3 
λ ls priv\static\
cache_manifest.json  favicon-a8ca4e3a2bb8fea46a9ee9e102e7d3eb.ico  robots.txt     robots-9e2c81b0855bbff2baa8371bc4a78186.txt
favicon.ico          images/                                       robots.txt.gz  robots-9e2c81b0855bbff2baa8371bc4a78186.txt.gz

You didnt have to change the poison encoder to Jason in the Umbrella’s global config?
Why did I have to then?

Could this be because my umbrella app is old and is therefore using some incompatible config?
Has something changed in the creation/configuration of umbrella apps since eliir 1.11 ?
Could it be because I am on Windows?

4

Probably because of configuration…

You don’t have assets in static, this suggest old webpack config, instead of new esbuild.

5

So in theory, if I create a new, fresh umbrella app and then start porting everything there, my issue should be solved, right ?

6

Did You try the commands mentionned above?

7

I can confirm that creating a fresh new umbrella app and trying your commands exactly avoids the issue.
The interesting part however, is that if I try to create another phoenix app inside the apps folder,
for example, a liveview one:

mix phx.new.web test2 --live --no-ecto

I get the same error when launching it.
It looks like umbrella projects dont play nice if they had previous phoenix apps.

Which means that for me, at least, I have to re create the whole thing …

1 Like
8

Very helpfully, @Fl4m3Ph03n1x cross-posted to elixir - Cannot load assets in Phoenix umbrella app - Stack Overflow , where a more recent answer reveals that running phx.new.web defines an additional :esbuild key in config/config.exs, which will be then be overridden by the existing one – the issue flows from that.

Arguably a bug in the mix task?

4 Likes
9

Umbrealla Proj generated with with latest version of Phoenix (1.6.11) and latest version of phx.new, the same error no route found for GET /assets/app.js

This issue only occurs when new umbrella child app generated into the project with phx.new.web.

Is this supposed to happen or a bug?

Note:
the assets folder is not copied into priv/static folder in the newly generated app.

10

Maybe are you facing the same issue like the one mentionned in this other thread?

Have a look at it to see if you have correctly configured Esbuild and so-like…