Phoenix: Unable to find static assets

[erwald]

Hey,

So I'm generating a new project with mix phoenix.new myproj. Everything works fine when I run it, like so:

cd myproj
mix phoenix.server

However, when I go to localhost:4000, it looks like this:

and the log looks as follows:

[info] GET /
[debug] Processing by Myproj.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 2ms
[info] GET /css/app.css
[warn] ** (Phoenix.Router.NoRouteError) no route found for GET /css/app.css (Myproj.Router)
    (myproj) web/router.ex:1: Myproj.Router.match_route/4
    (myproj) web/router.ex:1: Myproj.Router.do_call/2
    (myproj) lib/myproj/endpoint.ex:1: Myproj.Endpoint.phoenix_pipeline/1
    (myproj) lib/plug/debugger.ex:93: Myproj.Endpoint."call (overridable 3)"/2
    (myproj) lib/phoenix/endpoint/render_errors.ex:34: Myproj.Endpoint.call/2
    (plug) lib/plug/adapters/cowboy/handler.ex:15: Plug.Adapters.Cowboy.Handler.upgrade/4
    (cowboy) src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

[info] GET /js/app.js
[warn] ** (Phoenix.Router.NoRouteError) no route found for GET /js/app.js (Myproj.Router)
    (myproj) web/router.ex:1: Myproj.Router.match_route/4
    (myproj) web/router.ex:1: Myproj.Router.do_call/2
    (myproj) lib/myproj/endpoint.ex:1: Myproj.Endpoint.phoenix_pipeline/1
    (myproj) lib/plug/debugger.ex:93: Myproj.Endpoint."call (overridable 3)"/2
    (myproj) lib/phoenix/endpoint/render_errors.ex:34: Myproj.Endpoint.call/2
    (plug) lib/plug/adapters/cowboy/handler.ex:15: Plug.Adapters.Cowboy.Handler.upgrade/4
    (cowboy) src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

That is, it fails to serve any static assets.

I'm running this on OS X 10.11.2.

$ npm -v
2.14.1

$ elixir -v
Erlang/OTP 18 [erts-7.2.1] [source] [64-bit] [smp:8:8] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]

Elixir 1.2.2

May be a stupid question, I dunno. But I figure it should work out of the box, so I don't know what I'm doing wrong here.

[chrismccord]

What is the output of npm install ?

If that works, what is the output of brunch build ?

[josevalim]

As soon as you run mix phoenix.server, can you show the information that is printed? You are supposed to see some error messages in there I believe.

In any case, you need to update both your node and npm versions. I believe at least version 3.5.2 is required.

[erwald]

Wow, that was quick. In reverse order:

Output from mix phoenix.server:
https://gist.github.com/erwald/ed6eb2f21612b75ebb73

And in response to Chris:

$ npm install
npm WARN package.json @ No license field.

$ brunch build
-bash: brunch: command not found

So that was probably a problem. I did npm install -g brunch and tried it again, giving the following result:

$ brunch build
13 Feb 18:16:44 - error: Compiling of web/static/js/app.js failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of web/static/js/socket.js failed. Couldn't find preset "es2015" relative to directory "web/static/js"

That was with:

$ npm -v
2.14.1

$ node -v
v5.6.0

[chrismccord]

The issues lies in the output of your gist:

Error: Brunch 2+ requires node v4.0+. Upgrade node or use older brunch for old node.js: npm i -g brunch@1

Can you upgrade your node/npm deps and report back?

[erwald]

All right, now I've updated node and npm:

$ node -v
v5.6.0

$ npm -v
3.7.2

Then I run npm update -g. Then:

$ npm install
npm WARN cathar No license field.

$ brunch build
13 Feb 18:31:07 - error: Compiling of web/static/js/app.js failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of web/static/js/socket.js failed. Couldn't find preset "es2015" relative to directory "web/static/js"

So I tried creating a new project now with the updated system and that did the trick. Thanks for the help!

[hrishikeshchoudhari]

This should help - https://github.com/phoenixframework/phoenix/issues/1410#issuecomment-166001866

[dgroch]

I also encountered this issue running Phoenix 1.2.1

The solution for me was

Install brunch
npm install -g brunch

Install all npm packages
npm install

Build with brunch
brunch build

Then I hit this error
error: Compiling of web/static/js/socket.js failed. Couldn't find preset "/home/dangroch/udemy/elixir-phoenix-bootcamp/discuss/node_modules/babel-preset-es2016" relative to directory "web/static/js"

This was fixed with
npm install babel-preset-es2016