Phoenix: assets in different directories

Phoenix Forum Questions / Help
1

Hello!

How can I keep js files out of compilation when running mix phx.server?

I have my assets files in apps/web/lib/themes/default/assets and when I use mix phx.server task it goes through all “.js” files and other assets…

I believe this happens because of assets directory is out of apps/web/lib/web/ perhaps? Is there any way to make this working?

Thanks in advance.

2

So you don’t want these JS files to be available / published on the web at all, or do you want them to be available but not concatenated to single app.js?

3

I want them to be available on the web, concatenated into “app.js” like the default Phoenix’s boilerplate. However I don’t want them to live in the default directory (“lib/web/assets”) but to live in another directory such as “lib/web/lib/themes//assets”.

Brunch is configured to output to correct directory, watches and live reloading paths have been updated. However there may be something I’m not seeing because mix phx.server tries to compile the assets which increases very much the time Elixir takes to compile the app…

4

What do you mean by “compile” the assets? Like run via babel?

5

After phoenix has started itself, it tells brunch to compile the files into a single app.js, so whatever it is that takes the time, it is brunchs fault.

If you do not wan’t that behaviour at all, preocompile your assets for :dev as you would do it for :prod.

6

The problem isn’t with the time that brunch takes to compile my assets. It is because of this:

Compiling 74 files (.ex)
warning: redefining module Phoenix.Endpoint.Instrument (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Phoenix.Endpoint.Instrument.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/phoenix/endpoint/instrument.ex:1


== Compilation error on file lib/themes/default/assets/node_modules/phoenix/priv/templates/phx.gen.context/access_no_schema.ex ==
warning: redefining module Mix.Tasks.Phx.Server (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Mix.Tasks.Phx.Server.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/mix/tasks/phx.server.ex:1

warning: redefining module Phoenix.Template.EExEngine (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Phoenix.Template.EExEngine.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/phoenix/template/eex_engine.ex:1

warning: redefining module Phoenix.Endpoint.Watcher (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Phoenix.Endpoint.Watcher.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/phoenix/endpoint/watcher.ex:1

warning: redefining module Phoenix.Endpoint.CowboyWebSocket (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Phoenix.Endpoint.CowboyWebSocket.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/phoenix/endpoint/cowboy_websocket.ex:1

warning: redefining module Mix.Tasks.Phx.Gen.Secret (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Mix.Tasks.Phx.Gen.Secret.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/mix/tasks/phx.gen.secret.ex:1

warning: redefining module Phoenix.Controller.Pipeline (current version loaded from /home/und0ck3d/Workspace/exma/_build/dev/lib/phoenix/ebin/Elixir.Phoenix.Controller.Pipeline.beam)
  lib/themes/default/assets/node_modules/phoenix/lib/phoenix/controller/pipeline.ex:1

** (SyntaxError) lib/themes/default/assets/node_modules/phoenix/priv/templates/phx.gen.context/access_no_schema.ex:2: syntax error before: '='
    (elixir) lib/kernel/parallel_compiler.ex:117: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1
7

So why are there *.ex in a node_modules-folder? That feels wrong.

8

Wow, something is seriously messed up. You have lib/theme and then node modules and then there is elixir code INSIDE that?! That seems wrong. Is this some third party theme you are using or you came up with that structure?

9

Yes it does seem… I came up with this structure. But it wasn’t suppose to have elixir code inside node_modules nor assets itself. On my package.json I have the following in dependencies:

{
  "dependencies": {
    ...
    "phoenix": "file:../../../../../../deps/phoenix",
    "phoenix_html": "file:../../../../../../deps/phoenix_html",
    ...
  }
}

And I believe that’s what messing things up to start with. But that’s what a standard mix phx.new gives you and it works… I don’t understand why now it doesn’t…

Even if I remove those dependencies, I notice that Phoenix gets very slow… Independently from file type, .js or .ex, the compiler or watchers or something is going through every file it finds.

10

It seems that whatever structure one uses, provided it isn’t inside any folder on lib/ directory, it works fine. However when the assets/ directory is inside any directory on lib/ it doesn’t works.

Now not sure what structure one should use to achieve themes-like behavior…

11

Just experienced the same, but it all make sense now.

When assets are in lib, which mix will find and compile all .ex files inside, npm would have created a symlink back to your deps/phoenix directoy, and then at last loads it’s priv/template/*.ex which are templates and not meant to be compiled before they are processed.

1 Like