c4710n / phoenix_custom_assets

Provides an alternative assets/ of Phoenix for using LiveView and TailwindCSS.

WARNING:

This project is abandoned.

José Valim mentioned a build.js in this post. I will use esbuild in the future.

phoenix_custom_assets

Provides an alternative assets/ of Phoenix for using LiveView and TailwindCSS.

Features

• Phoenix:
  • assets building powered by Vite
• LiveView:
  • theme-sensitive progress bar
• TailwindCSS:
  • preinstalled plugins:
    • @tailwindcss/typography
    • @tailwindcss/forms
    • @tailwindcss/aspect-ratio
    • @tailwindcss/line-clamp
  • set Inter var as default font
• Heroicons

Current supported versions of Phoenix

• 1.7.10
• 1.7.9
• 1.7.8
• 1.7.7
• 1.7.6
• 1.7.5
• 1.7.4
• 1.7.3
• 1.7.2
• 1.7.1

Umbrella projects are not supported for now.

How it works?

It works by generating code into the your application instead of acting as a library. The users have complete freedom to modify the code so it works best with their app.

This idea comes from mix phx.gen.auth.

Getting Start

1. replace assets/

$ rm -rf assets # be careful

# with GNU tar
$ curl -L https://api.github.com/repos/c4710n/phoenix_custom_assets/tarball \
  | tar -xvz --strip-components=1 --wildcards */assets

# with BSD tar
$ curl -L https://api.github.com/repos/c4710n/phoenix_custom_assets/tarball \
  | tar -xvz --strip-components=1 --include="*/assets"

2. remove original esbuild and tailwind related code

Remove :esbuild and :tailwind in mix.exs:

- {:esbuild, "~> 0.5", runtime: Mix.env() == :dev},
- {:tailwind, "~> 0.1.8", runtime: Mix.env() == :dev},

Modify aliases in mix.exs:

  defp aliases do
    [
       # ...
-      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
-      "assets.build": ["tailwind default", "esbuild default"],
-      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
+      "assets.setup": ["cmd npm install --prefix assets"],
+      "assets.build": ["cmd npm run build --prefix assets"],
+      "assets.deploy": ["cmd npm run build --prefix assets", "phx.digest"]
    ]
  end

Remove related config in config/config.exs:

-# Configure esbuild (the version is required)
-config :esbuild,
-  version: "0.14.41",
-  default: [
-    args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
-    cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
-  ]
-
-# Configure tailwind (the version is required)
-config :tailwind,
-  version: "3.2.4",
-  default: [
-    args: ~w(
-      --config=tailwind.config.js
-      --input=css/app.css
-      --output=../priv/static/assets/app.css
-    ),
-    cd: Path.expand("../assets", __DIR__)
-  ]
-

Adjust config of watchers in config/dev.exs

config :hello, HelloWeb.Endpoint,
  # ...
  watchers: [
    npm: [
      "run",
      "watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]

3. Adjust .gitignore

 # Ignore assets that are produced by build tools.
-/priv/static/assets/
-
-# Ignore digested assets cache.
-/priv/static/cache_manifest.json
+/priv/static/

4. Cleanup priv/static/

Just remove it.

5. Last

Clean mix.lock:

$ mix deps.clean --unused --unlock

License

MIT

phoenix_custom_assets's Issues

What should be done when upgrading to alpine.js 3?

• The patch code doesn't work.

Replace file-loader with asset modules provided by Webpack 5

• https://webpack.js.org/guides/asset-modules/

Tailwind JIT not adding new classes

Hi, great project and really helpful assets default people can use, huge thanks for that!

I'm new to Phoenix and been trying to use your assets folder to an existing Phoenix project I bootstrapped from fullstackphoenix.com. I followed the instruction on removing my whole /assets directory and downloading yours, replacing the old one. Then I just npm install, run, added some tw classes (i.e. bg-gray-200). Apparently after the auto-restart, or even full app restart, the new class didn't got compiled to the main css.

Is there any further configuration I need to do or specific thing with this mechanism I need to check further?
Thanks for your time! :D