How to deliver static js and css into html to client

Phoenix Forum Questions / Help
, ,
1

I’m confused about the flow of serving the client fully in js/css/html
i’m placing home.js and home.css both inside assets/js and assets/css
and modifie my config to include them in the bundling

config :tailwind,
  version: "3.4.3",
  testespay: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --input=css/home.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]


config :esbuild,
  version: "0.17.11",
  testespay: [
    args:
      ~w(js/app.js js/home.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

but now how do I import it into a html and deliver to client?
I made some mods to Endpoint but I confess that for now i have no idea of this is supposed to work

  plug Plug.Static,
    at: "/",
    from: :testespay,
    gzip: false,
    only: TestespayWeb.static_paths()

    plug Plug.Static,
    at: "/home",
    from: :testespay,
    gzip: false,
    only: ~w(assets home.html)

defmodule TestespayWeb.Router do
  use TestespayWeb, :router


  pipeline :browser do
   ...
  end


  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", TestespayWeb do
    pipe_through :browser
    get "/home", HomeController, :show
  end


  scope "/api", TestespayWeb do
    pipe_through :api

    post "/create_contract", ContractController, :create
    get "/identify", IdentifyController, :find
  end

my controller

defmodule TestespayWeb.HomeController do
  use TestespayWeb, :controller

  def show(conn, _params) do
    conn
    |> put_resp_content_type("text/html")
    |> send_file(200, Path.join(:code.priv_dir(:testespay), "static/home/index.html"))
  end
end

now looking at the console on the browser, it’s looks like i’m seding my js and my css as files ( I can see the assets folder in my console directories) but my html file that is returned doesnt have neither js or css files

priv/
└── static/
├── assets/
│ ├── home.css
│ ├── home.js
└── templates/
└── home/
└── index.html.

and i’m importing with this syntax

and

2

The problem was the path for the css and js
<link rel="stylesheet" href="../assets/app.css">
but now I dont know why to use the Plug.static as in

plug Plug.Static,
    at: "/home",
    from: :testespay,
    gzip: false,
    only: ~w(assets home.html)

if I can get my page in that way.
there is a better way to do it?

3

Your HTML needs <link rel="stylesheet" href="/assets/home.css"> and <script src="/assets/home.js"> in order to tell the browser what paths to fetch the CSS and JS from. You can change the paths to something else if you want. You can verify this step works by checking your browser dev tools. Open the network tab, load your page, and check that the browser is trying to fetch from those paths.

You need plug Plug.Static, ... to tell Phoenix where to serve static files from. The at: "/home" means it will handle requests to the path “/home/…”, which is probably not what you want (unless you change your link and script paths to point there). You probably want at: "/".

plug Plug.Static serves static files from on filesystem from priv/static/. You should check that you have the files you want at priv/static/assets/home.css and priv/static/assets/home.js. Anything after the priv/static/ has to match the URL that the browser is requesting.

If those files exist, you can check that they’re being served by running your server and vising localhost:<port>/assets/home.css and see if the server successfully serves the files.

As you can see, there are a lot of separate parts to this that all have to be set up correctly, but thankfully, it should be possible to check each part one-by-one to see which parts work and which parts you need to fix.

4

yes for instances I took some time that I have acess to my static files in the priv assets (putting them first in the assets to be builded by esbuild), but for now what i’m doing is putting a html into priv/static and referencing the js and css builded there, and send in the controller passing the dir path to the html, is this the correct approach?

5

yes thats the point, I didnt understand much when to use plugstatic since I could get it working on the previous way I explained.