Tailwind + Esbuild for umbrela applications

Questions / Help
3

Yes you need to set 3 different profiles. You can use the default profile for your main app. Here is a working example with two apps: front (the main) and admin.

config :esbuild,
  version: "0.14.29",
  default: [
    args: [
      "js/app.js",
      "--bundle",
      "--target=es2017",
      "--outdir=../priv/static/assets",
      "--external:/fonts/*",
      "--external:/images/*",
      "--external:/favicons/*"
    ],
    cd: Path.expand("../apps/front/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ],
  admin: [
    args: [
      "js/app.js",
      "--bundle",
      "--target=es2017",
      "--outdir=../priv/static/assets",
      "--external:/fonts/*",
      "--external:/images/*",
      "--external:/favicons/*"
    ],
    cd: Path.expand("../apps/admin/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Then you just need to use the good profile name whenever is needed.

For example in the admin mix.exs file, I have:

defp aliases do
    [
      setup: ["deps.get"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
      "assets.deploy": [
        "esbuild admin --minify",
        "sass admin --no-source-map --style=compressed",
        "phx.digest"
      ]
    ]
  end

You can see the line "esbuild admin --minify".

And in config/dev.exs also:

config :admin, Admin.Endpoint,

  .....

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:admin, args)
    esbuild: {Esbuild, :install_and_run, [:admin, ~w(--sourcemap=inline --watch)]},
  .....
  ]

Hope this helps.

5 Likes