Default Phoenix assets without Node.js

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.

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

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)

• 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.