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
Trending in Questions
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
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
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
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
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
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
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
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
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
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
Hi everyone!
The first release candidate for the Expert language server project is now available!
We’ve published a press release detai...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
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
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security










Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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
if I can get my page in that way.
there is a better way to do it?
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. Theat: "/home"means it will handle requests to the path “/home/…”, which is probably not what you want (unless you change yourlinkandscriptpaths to point there). You probably wantat: "/".plug Plug.Staticserves static files from on filesystem frompriv/static/. You should check that you have the files you want atpriv/static/assets/home.cssandpriv/static/assets/home.js. Anything after thepriv/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.cssand 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
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
yes thats the point, I didnt understand much when to use plugstatic since I could get it working on the previous way I explained.