Images/assets not loading when running the finished app on my localhost (step 0)

[danielramirezch]

Not stuck, just a weird detail I found :) As title says. When running the app locally I see this:

And this:

daniel@debian ~/c/phoenix-liveview-counter-tutorial (main)> mix phx.server
[info] Running CounterWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access CounterWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 278ms.
[info] CONNECTED TO Phoenix.LiveView.Socket in 22µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "a0IbDUJ0OEQkP3kadi8pKF4yGxwpBhNQXoQuuYwrKWOV5pdOnfxfD4u7", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[debug] MOUNT CounterWeb.Counter
  Parameters: %{}
  Session: %{"_csrf_token" => "3-Jx7-O6oh6LC_Mg0Tczm2fg"}
[debug] Replied in 3ms
[info] GET /
[debug] Processing with CounterWeb.Counter.Elixir.CounterWeb.Counter/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 18ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 23µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "a0IbDUJ0OEQkP3kadi8pKF4yGxwpBhNQXoQuuYwrKWOV5pdOnfxfD4u7", "_live_referer" => "undefined", "_mounts" => "1", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[info] GET /images/logo.svg
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /images/logo.svg (CounterWeb.Router)
    (counter 1.7.7) lib/phoenix/router.ex:489: CounterWeb.Router.call/2
    (counter 1.7.7) lib/counter_web/endpoint.ex:1: CounterWeb.Endpoint.plug_builder_call/2
    (counter 1.7.7) lib/plug/debugger.ex:136: CounterWeb.Endpoint."call (overridable 3)"/2
    (counter 1.7.7) lib/counter_web/endpoint.ex:1: CounterWeb.Endpoint.call/2
    (phoenix 1.7.10) 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.10.0) /home/daniel/code/phoenix-liveview-counter-tutorial/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.10.0) /home/daniel/code/phoenix-liveview-counter-tutorial/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.10.0) /home/daniel/code/phoenix-liveview-counter-tutorial/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 4.2) proc_lib.erl:240: :proc_lib.init_p_do_apply/3

[info] CONNECTED TO Phoenix.LiveView.Socket in 21µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "QV4FD10ZEFwbOHEKHDUPFWc_JUJaVBNXrsOwj4_jtPGF_jBrWkF87fu0", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[debug] MOUNT CounterWeb.Counter
  Parameters: %{}
  Session: %{"_csrf_token" => "3-Jx7-O6oh6LC_Mg0Tczm2fg"}
[debug] Replied in 189µs

Some info about my system:

daniel@debian ~/c/phoenix-liveview-counter-tutorial (main)> neofetch
       _,met$$$$$gg.          daniel@debian
    ,g$$$$$$$$$$$$$$$P.       -------------
  ,g$$P"     """Y$$.".        OS: Debian GNU/Linux 12 (bookworm) x86_64
 ,$$P'              `$$$.     Host: Swift SFX14-41G V1.10
',$$P       ,ggs.     `$$b:   Kernel: 6.1.0-16-amd64
`d$$'     ,$P"'   .    $$$    Uptime: 4 hours, 8 mins
 $$P      d$'     ,    $$P    Packages: 1210 (dpkg), 22 (brew)
 $$:      $$.   -    ,d$$'    Shell: bash 5.2.15
 $$;      Y$b._   _,d$P'      Resolution: 1920x1080
 Y$$.    `.`"Y$$$$P"'         WM: i3
 `$$b      "-.__              Terminal: tmux
  `Y$$                        CPU: AMD Ryzen 7 5800U with Radeon Graphics (16) @ 1.900GHz
   `Y$$.                      GPU: AMD ATI Radeon Vega Series / Radeon Vega Mobile Series
     `$$b.                    GPU: NVIDIA GeForce RTX 3050 Ti Mobile
       `Y$$b.                 Memory: 1964MiB / 15337MiB
          `"Y$b._
              `"""

daniel@debian ~/c/phoenix-liveview-counter-tutorial (main)> elixir -v
Erlang/OTP 25 [erts-13.1.5] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit:ns]

Elixir 1.14.0 (compiled with Erlang/OTP 24)

daniel@debian ~/c/phoenix-liveview-counter-tutorial (main)> mix phx.new -v
Phoenix installer v1.7.10

[ndrean]

Indeed seems that the image logo.svg used in "app.html.heex" should be present in the folder /priv/images but it has not been persisted. Note that The module CounterWeb.ex correctly defines the "static_path " function for Phoenix to serve static assets

[Frid-Yuandu]

I have the same problem. There is no "image" folder nor "favicon" in the priv/static folder after successfully running mix setup.

I have to copy these files from another Phoenix project. This way the logo could be displayed. It's a bit confusing why these files were not generated correctly.

[ndrean]

PR #217 @danielramirezch "priv/static" was in the ".gitignore"