henriquesati

henriquesati

How to deliver static js and css into html to client

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

First Post!

henriquesati

henriquesati

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?

Last Post!

henriquesati

henriquesati

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

Where Next?

Popular in Questions Top

nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54921 245
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 49084 226
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement