How to add JS files to specific templates?

Astarno · February 13, 2023, 1:12pm

Hi, I’m experimenting with Phoenix/Liveview and I’m stuck on something that should normally be something very simple to do. That something is adding a JS file to a specific template.

Until now I just put all my JS code into assets/js/app.js. However, I only want certain JS code executed on specific pages (templates). As such, I copied my JS code to a seperate file as such assets/js/custom.js. To initially test if the file itself is able to load I then continued with adding the following line to my lib/my_app_web/templates/page/layout/root.html.heex:

<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/custom.js")}></script>

To add this line I took inspiration from the way app.js is imported. This does not work and results in the error:

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/custom.js (MyAppWeb.Router)
    (my_app 0.1.0) lib/phoenix/router.ex:405: MyAppWeb.Router.call/2
    (my_app 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.plug_builder_call/2
    (my_app 0.1.0) lib/plug/debugger.ex:136: MyAppWeb.Endpoint."call (overridable 3)"/2
    (my_app 0.1.0) lib/my_app_web/endpoint.ex:1: MyAppWeb.Endpoint.call/2
    (phoenix 1.6.15) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) c:/Users/arnod/Desktop/phoenixtut/my_app/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3

Could someone help me with this?
Additionally, once this works my next step would be to import this file not in the root (for all pages) but in specific templates. How would that be done?

Thanks in advance!

greven · February 15, 2023, 6:33pm

I agree, this should be easier / have a default API to deal with this, but someone needs to put the work to add it.

Nowadays it seems everyone just uses a big file with scripts and styles and be done with it.

Anyway, what we did was in the root layout, add a call to a helper function that grabs the path of the styles / scripts to add if the key script / style is in the assigns.

The Helper being something like:

DarckBlezzer · October 10, 2023, 6:19am

I’m studying phoenix 1.7 doing random things to study it

I was doing a login, and want a button to show password and need to add a little script to show and hide it

Simple steps

Create a Script in assets
Add this script in config.js, esbuild args
add the script to your view, template, etc, at the end

My example:

# Create your file in assets, my example is login.js
# assets/js/login.js

# Then add the file to esbuild, to create an output
# config/config.exs
# Add your file in the args
# My example, check the link I put for doc about output esbuild
config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(app=js/app.js login=js/login.js --bundle --target=es2017 --outdir=../priv/static/assets  --external:/images/* --loader:.ttf=dataurl  --loader:.eot=dataurl --loader:.woff2=dataurl --loader:.woff=dataurl --loader:.svg=dataurl),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]
# as you can see, I output all I have in app.js(all my JS) and login.js(custom JS for my view)
# Note: re- run the server to take effect(config.js)

# to finish, simple add your public file generate with esbuild to the end of the view
# note: at the end of the file.ex
<script defer phx-track-static type="text/javascript" src={~p"/assets/login.js"} />

Here is the link of the documentation
Esbuild Entry Points

ronindev · February 11, 2024, 6:27pm

it’s worth!!!