Orzech

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

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

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

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

Orzech

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.

Where Next?

Popular in Questions Top

vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

We're in Beta

About us Mission Statement