henriquesati

henriquesati

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

Showing Posts 1 to 4

henriquesati

henriquesati OP

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?

skyqrose

skyqrose

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.

henriquesati

henriquesati OP

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?

henriquesati

henriquesati OP

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

— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews