Phoenix Plug static only delivers uncompiled assets but not any folder inside priv/static/assets

Phoenix Forum Questions / Help
1

I’m delivering webpages bundling js and css through webpack
My controller delivers the html at priv
this is my router

defmodule TestespayWeb.Router do
  use TestespayWeb, :router


  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    # plug :put_root_layout, html: {TestespayWeb.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end


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

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


  scope "/api", TestespayWeb do
    pipe_through :api

    post "/create_contract", ContractController, :create
    get "/identify", IdentifyController, :find
    get "/track", TrackController, :track
    get "/api_status", ApiStatusController, :get
  end

  if Application.compile_env(:testespay, :dev_routes) do
    import Phoenix.LiveDashboard.Router

    scope "/dev" do
      pipe_through :browser

      live_dashboard "/dashboard", metrics: TestespayWeb.Telemetry
      forward "/mailbox", Plug.Swoosh.MailboxPreview
    end
  end
end


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

I compile my assets with this config

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

although this works for compiling, plug static doesnt load especifically my js and css files from priv, but delivers the image folder (wich is inside priv as well

  plug Plug.Static,
    at: "/",
    from: :testespay,
    gzip: false,
 only: ~w(priv/static/assets fonts images img js favicon.ico robots.txt)

the only way to get js and css its inserting the default assets folder, but this deliver all my js and ts files from the principal assets folde

root@4b4255e1ca05:/app# cd priv
root@4b4255e1ca05:/app/priv# cd static
root@4b4255e1ca05:/app/priv/static# cd assets
root@4b4255e1ca05:/app/priv/static/assets# dir 
app-f42764df1965d0f6cc3891cb4554350e.js     app.js     home-59fe23ba6e37d6d09b135b2cb20a36f6.js     home-fef92fda56082abda7348d89a48dc73f.css     home.css     home.js
app-f42764df1965d0f6cc3891cb4554350e.js.gz  app.js.gz  home-59fe23ba6e37d6d09b135b2cb20a36f6.js.gz  home-fef92fda56082abda7348d89a48dc73f.css.gz  home.css.gz  home.js.gz
root@4b4255e1ca05:/app/priv/static/assets#

behaviors

 only: ~w(assets fonts images img js favicon.ico robots.txt)

delivers my uncompiled assets correctly

 only: ~w(priv/assets fonts images img js favicon.ico robots.txt)

doesnt deliver anything

 only: ~w(priv/static/assets fonts images img js favicon.ico robots.txt)

doesnt deliver anything
i’m on dev enviroment and ran all commands to setup assets


Rebuilding...

Done in 1734ms.

  ../priv/static/assets/home.js    1.1mb ⚠️
  ../priv/static/assets/app.js   260.3kb

and I just check that the images folder being delivered isnt the one located at priv

2

this is wrong i guess… just use assets

here…

3

using assets its pushing my files from the default /assets folder, where the files unprocessed by esbuild are

4

pnv/
native/
repo/
static/
assets/ → compiled files
home/ → home.html file
images/ → images
cache_manifest.json
this is my dir structure

5

sorry, i misread…

6 
  plug Plug.Static,
    at: "/",
    from: {:testespay, "priv/static/assets/"},
    gzip: false,
   only: ~w(css js favicon.ico js robots.txt)

I tried to especify the path as the docs says herehttps://hexdocs.pm/plug/Plug.Static.html#module-examples. also doesnt work

7

i’m not understanding the behavior of this plug, if I do this

  plug Plug.Static,
    at: "/",
    from: {:testespay, "priv/lost"},
    gzip: false,
  only: ["assets", "css"]

nothing is loaded int he cliente, bcs the [‘lost’] dir doesnt exist, that its okay
now if I do this

 plug Plug.Static,
    at: "/",
    from: {:testespay, "priv/static"},
    gzip: false,
  only:["assets", "css"]

it loads my assets, but again it loads my uncompilled assets from the pub assets folder and I now its from bcs I see several TSX files on the console

8

How are you referencing the assets in your HTML?

9

i’m referencing the static/assets in the same priv directory as home

 <link rel="stylesheet" href="../assets/home.css">

<script src="../assets/home.js"></script>
10

Try with removing the dots, just ‘/assets/home.css’

11

just tried… same bahavior :frowning:

12

hmm, mine are written as {~p"/assets/app.css"} and in the Plug.Static it is assets.

plug Plug.Static,
  at: "/",
  from: :admin,
  only: AdminWeb.static_paths()

with:

 def static_paths, do: ~w(assets css fonts images favicon.ico robots.txt)
13

Let me try to explain how those plug options interact with requests.

Lets start with a request for /assets/css/style.css.

First the :at part is split from the front of the request path

at: "/" => ["assets", "css", "style.css"]
at: "/assets" => ["css", "style.css"]
at: "/other" => [] # skip for nothing to check

Then – if the option exists – the first segment value is matched with items of the :only (same for :only_matching)

at: "/", only: ["assets"] => allowed
at: "/assets", only: ["css"] => allowed
at: "/assets", only: ["js"] => not allowed

Only if allowed the split segments are merged with the :from root path to see if a file exists at the resulting path:

at: "/", from: :app => Application.app_dir(:app, Path.join("priv/static", "assets/css/style.css))
at: "/assets", from: {:app, "priv/static/myassets"} => Application.app_dir(:app, Path.join("priv/static/myassets", "css/style.css))
at: "/assets", from: "/data/root" => Path.join("/data/root", "css/style.css)
1 Like