Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial

f0rest8 · November 15, 2021, 10:02pm

This was a really great guide thank you! I also had to cross-reference the asset management guide:

phoenixframework/phoenix/blob/master/guides/asset_management.md

# Asset Management

Beside producing HTML, most web applications have various assets (JavaScript, CSS, images, fonts and so on).

From Phoenix v1.6, new applications use [esbuild](https://esbuild.github.io/) to prepare assets via the [Elixir esbuild wrapper](https://github.com/phoenixframework/esbuild). This direct integration with `esbuild` means that newly generated applications do not have dependencies on Node.js or an external build system (e.g. Webpack).

Your JavaScript is typically placed at "assets/js/app.js" and `esbuild` will extract it to "priv/static/assets/app.js". In development, this is done automatically via the `esbuild` watcher. In production, this is done by running `mix assets.deploy`.

`esbuild` can also handle your CSS files. For this, there is typically an `import "../css/app.css"` at the top of your "assets/js/app.js". We will explore alternatives below.

Finally, all other assets, that usually don't have to be preprocessed, go directly to "priv/static".

## Third-party JS packages

If you want to import JavaScript dependencies, you have two options to add them to your application:

  1. Vendor those dependencies inside your project and import them in your "assets/js/app.js" using a relative path:

         import topbar from "../vendor/topbar"

This file has been truncated. show original

That I found after this forum post on external flags for esbuild. You’ll notice that the asset_management guide is updated to reflect external: rather than external=. I also cross-referenced with PragProg’s free guide on Tailwind with esbuild, particularly they add slightly to the deploy script in the assets/package.json:

"scripts": {
  "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
},

Finally, I had to make slight adjustments because Metamorphic has an umbrella app structure. So, my base project mix.exs has this:

"assets.deploy": [
  "cmd --cd ../metamorphic_web/assets npm run deploy",
  "esbuild default --minify",
  "phx.digest"
]

And my esbuild config expands the path as such:

cd: Path.expand("../apps/metamorphic_web/assets", __DIR__)

That did the trick for me along with making sure my asset handling with priv/static was updated for deployment following the upgrade from a 1.5 app to 1.6.

So, if anyone else is working in an umbrella app, then hopefully this helps you out too. And, again, thank you for the wonderful guide.