Asset pipeline for Phoenix applications
Serve assets and static files from memory
Achieve 100/100 scores in Google PageSpeed Insights test out of the box
- 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
- Add Sass support
- Add TypeScript support
- Add Tailwind CSS support with class names obfuscation
- LiveReload support
- Minify CSS and JS
- Minify HTTP response body
- Add Content Security Policy (CSP) directives
- Releases support
API documentation is available at https://hexdocs.pm/phoenix_asset_pipeline/api-reference.html
Add phoenix_asset_pipeline to your list of dependencies in mix.exs:
def deps do
[
{:phoenix_asset_pipeline, "~> 1.0"}
]
endRequires Erlang/OTP 27.0 or later
Update your config/config.exs:
config :phoenix, :json_library, PhoenixAssetPipeline.Parser.JSONAdd 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
endAdd 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)$"
]
]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
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"]
Read more https://hexdocs.pm/phoenix/Phoenix.Endpoint.html
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
mix phx.serverAll 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 startPhoenixAssetPipeline is released under the MIT License