PhoenixAssetPipeline

Asset pipeline for Phoenix applications

Serve assets and static files from memory

Goal

Achieve 100/100 scores in Google PageSpeed Insights test out of the box

Features

Common

class, script, obfuscate, style and tailwind HTML helpers
HTML class names obfuscation
JSON parser, based on Erlang/OTP 27.0
Pre-compiled assets and static files with compressed versions (brotli, deflate and gzip)
Add Subresource Integrity (SRI) attributes
Define your custom assets domain

Dev environment

Add Sass support
Add TypeScript support
Add Tailwind CSS support with class names obfuscation
LiveReload support

Prod environment

Minify CSS and JS
Minify HTTP response body
Add Content Security Policy (CSP) directives
Releases support

Documentation

API documentation is available at https://hexdocs.pm/phoenix_asset_pipeline/api-reference.html

Installation

Add phoenix_asset_pipeline to your list of dependencies in mix.exs:

def deps do
  [
    {:phoenix_asset_pipeline, "~> 1.0"}
  ]
end

Opional

Requires Erlang/OTP 27.0 or later

Update your config/config.exs:

config :phoenix, :json_library, PhoenixAssetPipeline.Parser.JSON

Add HTML helpers

Add use PhoenixAssetPipeline.Helpers inside quote block to defp html_helpers in your lib/my_app_web.ex:

defp html_helpers do
  quote do
    # Asset pipeline helpers (class, script, obfuscate, style and tailwind)
    use PhoenixAssetPipeline.Helpers # add this line

    # HTML escaping functionality
    import Phoenix.HTML
    # Core UI components and translation
    import MyAppWeb.CoreComponents
    import MyAppWeb.Gettext

    # Shortcut for generating JS commands
    alias Phoenix.LiveView.JS

    # Routes generation with the ~p sigil
    unquote(verified_routes())
  end
end

Add LiveReload

Add the assets pattern to your config/dev.exs:

config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"assets/(css|js)/.*(css|scss|sass|js|ts)$", # add this line
      ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/my_web/(controllers|live|components)/.*(ex|heex)$"
    ]
  ]

Add plug

Replace Plug.Static with PhoenixAssetPipeline in your lib/endpoint.ex:


defmodule MyAppWeb.Endpoint do
  use Phoenix.Endpoint, otp_app: :my_app
  use PhoenixAssetPipeline, only: MyAppWeb.static_paths()

  # plug Plug.Static,
  #   at: "/",
  #   from: :yui,
  #   gzip: false,
  #   only: MyAppWeb.static_paths()

Options https://github.com/Youimmi/phoenix_asset_pipeline/blob/main/lib/phoenix_asset_pipeline/plug.ex

Configure

You can override the default configuration

config/config.exs:

config :dart_sass, "1.77.8"
config :esbuild, "0.23.1"
config :tailwind, "3.4.10"

Add static_url to your config/runtime.exs:

if config_env() == :prod do
  assets_host = System.get_env("ASSETS_HOST") || "assets.example.com"

  config :my_app, MyAppWeb.Endpoint, static_url: [host: assets_host, port: 443, scheme: "https"]

Example

lib/my_app_web/components/layouts/root.html.heex

<!DOCTYPE html>
<html lang="en" {class("[scrollbar-gutter:stable]")}>
  <head>
    <meta charset="utf-8" />
    <.live_title>
      <%= @page_title %>
    </.live_title>
    <link href={~p"/apple-touch-icon.png"} rel="apple-touch-icon" sizes="180x180" />
    <link href={~p"/favicon-16x16.png"} rel="icon" type="image/png" sizes="16x16" />
    <link href={~p"/favicon-32x32.png"} rel="icon" type="image/png" sizes="32x32" />
    <link href={~p"/site.webmanifest"} rel="manifest" />
    <link color="#c1272d" href={~p"/safari-pinned-tab.svg"} rel="mask-icon" />
    <meta content={@page_description} name="description" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="yes" name="mobile-web-app-capable" />
    <meta content="Youimmi" name="apple-mobile-web-app-title" />
    <meta content="Youimmi" name="application-name" />
    <meta content={get_csrf_token()} name="csrf-token" />
    <meta content="#fff" name="apple-mobile-web-app-status-bar-style" />
    <meta content="#fff" name="msapplication-TileColor" />
    <meta content="#fff" name="msapplication-navbutton-color" />
    <meta content="#fff" name="theme-color" />
    <%= script("app", async: true, crossorigin: "anonymous") %>
    <%= tailwind("app.sass") %>
  </head>
  <body>
    <%= @inner_content %>
  </body>
</html>

See example project phoenix_asset_pipeline_example

Usage

mix phx.server

Release

All assets and static files will be compiled into elixir macors without the ptiv/static folder

MIX_ENV=prod mix release
_build/prod/rel/my_app/bin/my_app start

Copyright and License

PhoenixAssetPipeline is released under the MIT License