Orzech
Default Phoenix assets without Node.js
I’m learning Phoenix with “Programming Phoenix 1.4” book, but I want to avoid using Node.js altogether. I’d also like to track assets in my repo.
The mix phx.new --no-webpack task not only skips setting webpack up, but also skips default assets creation.
Shall I just download phoenix.js and phoenix_html.js and concatenate them into app.js (and do similar thing with css files etc.), or maybe there’s an easier way?
Most Liked
stefanchrobot
I’m doing similar thing, although my goal is not to avoid Node (since that cannot be avoided for JS and CSS postprocessing), but to avoid Webpack and other bundlers. I’m using make instead of Mix tasks. Here’s my assets/Makefile so far:
# Make targets for assets.
css:
@echo 'Building CSS...'
@mkdir -p ../priv/static/css
@cat \
vendor/nprogress-0.2.0/nprogress.css \
css/app.css > ../priv/static/css/app.css
js:
@echo 'Building JS...'
@mkdir -p ../priv/static/js
@cat \
../deps/phoenix/priv/static/phoenix.js \
../deps/phoenix_html/priv/static/phoenix_html.js \
../deps/phoenix_live_view/priv/static/phoenix_live_view.js \
vendor/nprogress-0.2.0/nprogress.js \
js/app.js > ../priv/static/js/app.js
static:
@echo 'Building static...'
@cp -R static/* ../priv/static/
clean:
@echo 'Cleaning assets...'
@rm -rf ../priv/static/*
build: css js static
.PHONY: css js static
I’ll be adding CSS and JS minification later.
Here’s my watchers config (using watchexec, dynamic endpoint config):
defmodule MyApp.Endpoint do
use Phoenix.Endpoint, otp_app: :my_app
# ...
# Dynamic endpoint configuration.
# See: https://hexdocs.pm/phoenix/Phoenix.Endpoint.html#module-endpoint-configuration
def init(:supervisor, config) do
{:ok, endpoint_config(config)}
end
defp endpoint_config(config) do
config
|> Keyword.merge(
# ...
)
|> Keyword.merge(
case MyApp.app_env() do
"development" ->
[
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
watchers: [
watcher(["watchexec", "-e", "css", "make", "css"]),
watcher(["watchexec", "-e", "js", "make", "js"]),
watcher(["watchexec", "-e", "png,ico,txt", "make", "static"])
],
# ...
]
# ...
end
)
end
# Returns a watcher that runs in the assets/ dir by running the specified command with args.
# Uses the assets/wrapper script to work around commands that don't properly watch STDIN.
defp watcher(args) do
working_dir = Path.expand("../../assets", __DIR__)
# The executable is run via System.cmd which expects the executable
# to be available in PATH or an absolute path.
{Path.join(working_dir, "wrapper"), args ++ [cd: working_dir]}
end
end
and the wrapper script:
#!/usr/bin/env bash
# See https://hexdocs.pm/elixir/Port.html#module-zombie-operating-system-processes
# Start the program in the background
exec "$@" &
pid1=$!
# Silence warnings from here on
exec >/dev/null 2>&1
# Read from stdin in the background and
# kill running program when stdin closes
exec 0<&0 $(
while read; do :; done
kill -KILL $pid1
) &
pid2=$!
# Clean up
wait $pid1
ret=$?
kill -KILL $pid2
exit $ret
Orzech
In case anyone stumbles upon the same problem:
I’ve copied static and css assets from freshly generated Phoenix project and js files from phoenix deps and then added basic task to “compile” them. You can see it in this commit.
Orzech
Thanks for sharing. I took the simplest way possible, though not the most convenient for sure.
AFAIU, to some extent, you can avoid Node.js even when postprocessing text assets, with eg.:
- csscompressor (Python) - as name suggests.
- esbuild (Go) - js/ts minifier and bundler.
- jsmin (Python) - as name suggests.
- rCSSmin (Python) - as name suggests.
- … (I can’t put more than 5 links in a single post yet)
Last Post!
Orzech
- rJSmin (Python) - as name suggests.
- SlimIt (Python) - js minifier.
- webassets (Python) - js/css asset manager.
- YUI Compressor (Java) - js/css minifier.
YUI Compressor is the only one I have used, but it’s probably dead now. The newest kid on the block seems to be esbuild.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









