Share an alternative `assets` dir for Phoenix

Phoenix Forum Chat / Discussions
,
1

Recently, I found someone is in trouble when integrating TailwindCSS with Phoenix.

Because of that, I wanna share my example project in order to help you reducing time wasted on configuring Webpack.

The project is phx-webpack-example. It includes following features:

  • TailwindCSS with JIT mode and useful plugins
    • @tailwindcss/forms
    • @tailwindcss/typography
    • @tailwindcss/aspect-ratio
  • Alpine.js with necessary patch
  • Compatible with Phoenix LiveView
  • set Inter var as default font
  • theme-sensitive nprogress
  • Webpack 5 + modular configuration, it supports:
    • all the good things provided by Webpack 5
    • JS:
      • sourcemap
      • uglify
    • CSS:
      • sourcemap
      • minify
      • autoprefixer
      • nested rules
    • fonts: eot / woff / woff2 / ttf
    • images: png / jpe?g / gif / svg

And you can inject it with just two commands. For new project:

$ rm -rf assets
$ svn export \
  https://github.com/c4710n/phx-webpack-example/trunk/apps/hello_web/assets \
  assets
# SVN provides export function which is useful for copying a sub-directory from a repo.
# But, Git doesn't.

Hope you guys like it.

6 Likes
2

Recently, Alpine 3 is released.

The old method for patching LiveView doesn’t work anymore.

After grasping the code of Livewire, I found a solution for Alpine 3 - deps: upgrade to alpinejs@3 · c4710n/phoenix_custom_assets@47b5c8f · GitHub

If you are curious about the process, read the content at here.

1 Like
3

With webpack 5 comes asset module…

It could replace file-loader, raw-loader and url-loader.

Now You can load images and fonts like this.

        // Load images with the asset module, WP5
        {
          test: /\.(png|svg|jpe?g|gif)(\?.*$|$)/,
          type: "asset/resource",
          generator: {
            filename: "../images/[hash][ext][query]"
          }
        },
        // Load fonts with the asset module, WP5
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          type: "asset/resource",
          generator: {
            filename: "../fonts/[hash][ext][query]"
          }
        }
4

Thanks for pointing it out. I will check it out. :wink:

5

This project has changed a lot. And now, it supports Phoenix 1.6.

Although webpack is replaced by esbuild in newer releases. But we can continue to take advantage of the webpack tooling.

Why do you maintain this project?
Two main reasons:

  • ES5 support is required in my case, but esbuild only supports ES2015 or above.
  • PostCSS isn’t support by esbuild team, and the integration isn’t seamless.