open fiber
Hi, I bought a web template kit which includes a bunch of js and css files. I put the files under /assets/css and /assets/js and try to import them as such from my app.js but it doesn't seem to work.
import './js/main.js';
import './css/jquery-ui.css';
How can I import these files?
Ok, so for the css I could use @import ... in my app.css file
past axle
I think it's best to keep the assets folder as just "phoenix managed assets" that go through the asset build process (.e.g esbuild + tailwind). For other static assets, maybe it's best to put them into priv/static directly instead
open fiber
yeah I put the images and fonts in priv/static
past axle
put the js and css in there too and put <script> and <link> tags in your header to directly reference them
open fiber
works in dev but not in production
open fiber
I extended static_paths to contain js, css and img but still doesn't work in prod
def static_paths, do: ~w(assets fonts js css img images favicon.ico robots.txt)
what do you mean by "doesn't work"?
open fiber
Sorry for being unclear, the file is not found.
e.g.
mydomain.com/assets/css/flaticon.css 404
in root.html.heex: <link rel="stylesheet" href={~p"/assets/css/flaticon.css"} />
past axle
but it works in dev locally?
open fiber
Yes
past axle
are you sure the priv/static stuff is being included in your release? it should be, I don't see why not...
have you checked your Plug.Static in your endpoint to make sure it looks right?
I don't really see what could cause a difference between dev and prod for this...
other than the files not being included in the release
open fiber
priv/static/assets is in the generated gitignore when setting up a phoenix project so maybe it's wiped by esbuild
past axle
how are you deploying / releasing to prod?
open fiber
docker image
past axle
have you checked the contents of your docker image to check that the files are actually there?
open fiber
Yes, they are getting wiped after esbuild. I just confirmed it 🍻
past axle
👍
open fiber
So, the answer to my question is:
Don't put static files under priv/static/assets, priv/static/assets is reserved for the output from esbuild.
past axle
maybe put them in priv/static/vendor instead and leave assets alone?
past axle
So, the answer to my question is:
Don't put static files under priv/static/ass...
yeah maybe, but you have control over this so you could change that if you want
open fiber
That is exactly how I solved it 🙂
past axle
but I suggest maybe not, and using a different folder