Share an alternative `assets` dir for Phoenix

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

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/PETAL-starter@47b5c8f · GitHub

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

1 Like

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]"
          }
        }

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