diff --git a/guides/asset_management.md b/guides/asset_management.md index c19b67960b..e1f06c4b84 100644 --- a/guides/asset_management.md +++ b/guides/asset_management.md @@ -84,8 +84,16 @@ error: Could not resolve "/images/bg.png" (mark it as external to exclude it fro Given the images are already managed by Phoenix, you need to mark all resources from `/images` (and also `/fonts`) as external, as the error message says. This is what Phoenix does by default for new apps since v1.6.1+. In your `config/config.exs`, you will find: ```elixir - args: - ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.), + args: ~w( + js/app.js + --bundle + --format=esm + --target=es2022 + --outdir=../priv/static/assets/js + --external:/fonts/* + --external:/images/* + --alias:@=. + ), ``` If you need to reference other directories, you need to update the arguments above accordingly. Note running `mix phx.digest` will create digested files for all of the assets in `priv/static`, so your images and fonts are still cache-busted. @@ -95,9 +103,20 @@ If you need to reference other directories, you need to update the arguments abo If you import a Node package that depends on additional fonts or images, you might find them to fail to load. This is because they are referenced in the JS or CSS but by default Esbuild will not touch or process referenced files. You can add arguments to esbuild in `config/config.exs` to ensure that the referenced resources are copied to the output folder. The following example would copy all referenced font files to the output folder: ```elixir - args: - ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=. - --loader:.woff=copy --loader:.ttf=copy --loader:.eot=copy --loader:.woff2=copy), + args: ~w( + js/app.js + --bundle + --format=esm + --target=es2022 + --outdir=../priv/static/assets/js + --external:/fonts/* + --external:/images/* + --alias:@=. + --loader:.woff=copy + --loader:.ttf=copy + --loader:.eot=copy + --loader:.woff2=copy + ), ``` For more information, see [the esbuild documentation](https://esbuild.github.io/content-types/#copy). diff --git a/guides/howto/custom_error_pages.md b/guides/howto/custom_error_pages.md index c84b032b92..dbb9544fca 100644 --- a/guides/howto/custom_error_pages.md +++ b/guides/howto/custom_error_pages.md @@ -90,7 +90,7 @@ Phoenix generates an `ErrorHTML` for us, but it doesn't give us a `lib/hello_web Welcome to Phoenix! - +
diff --git a/guides/real_time/channels.md b/guides/real_time/channels.md index 11f2f962e6..23332a27b6 100644 --- a/guides/real_time/channels.md +++ b/guides/real_time/channels.md @@ -437,7 +437,7 @@ Next, we need to pass this token to JavaScript. We can do so inside a script tag ```heex - + ``` ### Step 4 - Pass the Token to the Socket Constructor and Verify diff --git a/installer/templates/phx_single/config/config.exs.eex b/installer/templates/phx_single/config/config.exs.eex index c58796a9c7..52b4e3e776 100644 --- a/installer/templates/phx_single/config/config.exs.eex +++ b/installer/templates/phx_single/config/config.exs.eex @@ -42,8 +42,16 @@ config :<%= @app_name %>, <%= @app_module %>.Mailer, adapter: Swoosh.Adapters.Lo config :esbuild, version: "0.25.4", <%= @app_name %>: [ - args: - ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.), + args: ~w( + js/app.js + --bundle + --format=esm + --target=es2022 + --outdir=../priv/static/assets/js + --external:/fonts/* + --external:/images/* + --alias:@=. + ), cd: Path.expand("..<%= if @in_umbrella, do: "/apps/#{@app_name}" %>/assets", __DIR__), env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]} ]<% end %><%= if @css do %> diff --git a/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs.eex b/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs.eex index 8c4743db9a..bf7b9f4fb6 100644 --- a/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs.eex +++ b/installer/templates/phx_umbrella/apps/app_name_web/config/config.exs.eex @@ -21,8 +21,16 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>, config :esbuild, version: "0.25.4", <%= @web_app_name %>: [ - args: - ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.), + args: ~w( + js/app.js + --bundle + --format=esm + --target=es2022 + --outdir=../priv/static/assets/js + --external:/fonts/* + --external:/images/* + --alias:@=. + ), cd: Path.expand("../apps/<%= @web_app_name %>/assets", __DIR__), env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]} ]<% end %><%= if @css do %> diff --git a/installer/templates/phx_web/components/layouts/root.html.heex.eex b/installer/templates/phx_web/components/layouts/root.html.heex.eex index 274f7680c5..01df38321a 100644 --- a/installer/templates/phx_web/components/layouts/root.html.heex.eex +++ b/installer/templates/phx_web/components/layouts/root.html.heex.eex @@ -7,7 +7,7 @@ <.live_title default="<%= @app_module %>" suffix=" ยท Phoenix Framework" phx-no-format>{assigns[:page_title]} <%= if not @css do %> <% end %> - <%= if @css do %>