Migrate to Phoenix 1.8 (rc version)

Intro Phoenix is amazing web framework. Now Phoenix released new version, it's RC version but I think it's ok for try a new thing that will bring for us some benefits with daisyUI for supporting theme & new features (like auth, scopes,...). Installation You can install Phoenix follow regular cmd: mix archive.install hex phx_new 1.8.0-rc.1 --force Migration This guide help you migrate Phoenix from 1.7 to 1.8-rc.1 Before continue we need create a simple Phoenix app with new version for copy some scripts to our project. mix phx.new --no-ecto hello Update assets folder New version of Phoenix has some new scripts, folders & files has struture like: If you don't have any customized script in old project just override all files follow new Phoenix app excepted one file is app.css need to update a path: /* Update this follow your app */ @source "../../lib/hello_web"; Update core_components.ex We need update a little of bit follow new thing in the new version of Phoenix or if you don't have any customized code in here just copy from new app then update module name. You can see from above photo we need remove phx-feedback-for & update errors for input component. Update app_web.ex Now simplified layouts, using a single layout we can remove live_view function in AppWeb from: use Phoenix.LiveView, layout: {AppWeb.Layouts, :app} to: use Phoenix.LiveView Update config.exs You need to update config for TailwindCSS follow: config :tailwind, version: "4.0.9", hello: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/css/app.css ), cd: Path.expand("..", DIR) ] Note: Taiwind's config & Relative paths are changed! Update mix.exs We need update deps to new version: defp deps do [ {:phoenix, "~> 1.8.0-rc.1", override: true}, {:phoenix_html, "~> 4.1"}, {:phoenix_live_reload, "~> 1.2", only: :dev}, {:phoenix_live_view, "~> 1.0.9"}, {:phoenix_live_dashboard, "~> 0.8.3"}, {:esbuild, "~> 0.9", runtime: Mix.env() == :dev}, {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}, {:heroicons, github: "tailwindlabs/heroicons", tag: "v2.1.1", sparse: "optimized", app: false, compile: false, depth: 1}, # ... ] Add listeners: [Phoenix.CodeReloader] to def project Verify & Test Run mix assets.setup & mix assets.build to test our update. Test simple daisyUI component from daisyUI to make sure daisyUI is included in our app. Note: Phoenix bring some new features you can try like: scopes, magic link,...

Apr 28, 2025 - 13:06

Intro

Phoenix is amazing web framework. Now Phoenix released new version, it's RC version but I think it's ok for try a new thing that will bring for us some benefits with daisyUI for supporting theme & new features (like auth, scopes,...).

Installation

You can install Phoenix follow regular cmd:

mix archive.install hex phx_new 1.8.0-rc.1 --force

Migration

This guide help you migrate Phoenix from 1.7 to 1.8-rc.1

Before continue we need create a simple Phoenix app with new version for copy some scripts to our project.

mix phx.new --no-ecto hello

Update assets folder

New version of Phoenix has some new scripts, folders & files has struture like:

If you don't have any customized script in old project just override all files follow new Phoenix app excepted one file is app.css need to update a path:

/* Update this follow your app */
@source "../../lib/hello_web";

Update core_components.ex

We need update a little of bit follow new thing in the new version of Phoenix or if you don't have any customized code in here just copy from new app then update module name.

You can see from above photo we need remove phx-feedback-for & update errors for input component.

Update app_web.ex

Now simplified layouts, using a single layout we can remove live_view function in AppWeb from:

use Phoenix.LiveView,
  layout: {AppWeb.Layouts, :app}

to:

use Phoenix.LiveView

Update config.exs

You need to update config for TailwindCSS follow:

config :tailwind,
  version: "4.0.9",
  hello: [
    args: ~w(
      --input=assets/css/app.css
      --output=priv/static/assets/css/app.css
    ),
    cd: Path.expand("..", __DIR__)
  ]

Note: Taiwind's config & Relative paths are changed!

Update mix.exs

We need update deps to new version:

  defp deps do
    [
      {:phoenix, "~> 1.8.0-rc.1", override: true},
      {:phoenix_html, "~> 4.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 1.0.9"},
      {:phoenix_live_dashboard, "~> 0.8.3"},
      {:esbuild, "~> 0.9", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.1",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      # ...
    ]

Add listeners: [Phoenix.CodeReloader] to def project

Verify & Test

Run mix assets.setup & mix assets.build to test our update.

Test simple daisyUI component from daisyUI to make sure daisyUI is included in our app.

Note: Phoenix bring some new features you can try like: scopes, magic link,...