Update Elixir & Phoenix & LiveView to the Latest Version

RisingStack's services:

Search

Node.js Experts

Learn more at risingstack.com

Sign up to our newsletter!

In this article:

This article serves as your one-stop resource for all the necessary information on updating these key components of the Elixir ecosystem. You’ll also find the recent changes and enhancements that have been made to Elixir, Phoenix, and LiveView – changelogs included.

Whether you’re new to this tech stack, or just need quick info to get the latest version, we’ve got you covered.

Updating Elixir to v1.16.0

On Linux / MacOS

At first glance, when reading the Elixir install guide, you might be tempted to think it suggests using homebrew for installing Elixir on MacOS. However, it even states that you might want to look at the version managers listed below. So what gives? If you want to use a runtime/compiler as a developer, always use a version manager, as you will need an easy way to both lock old versions, update to new ones, and switch between different versions. On the other hand, if you just want to use said runtime/compiler, e.g., to run CLI tools with Node.js, or install programs with go install or cargo install, you’ll be fine with any OS-specific package manager. In the case of Elixir, however, we don’t know any good reason why you wouldn’t stick to a version manager, as people seldom use it to distribute CLI tools, save for Elixir development-specific ones.

Now, the only question that remains is which one to use. kiex + kerl or asdf? Let us save you a couple of hours of headache and suggest using asdf. It can handle both, and you can even install project specific versions and it will switch between them automatically. .

Run elixir --version to find out which version you have already installed.

Getting started with asdf: https://asdf-vm.com/guide/getting-started.html

GitHub repo: https://github.com/asdf-vm/asdf

First, add the plugins for Elixir and Erlang with the following commands:

asdf plugin-add erlang
asdf plugin-add elixir

If you already have the plugins installed, make sure they are up to date with these commands:

asdf update
asdf plugin-update --all

Before continuing, note that you need compatible Erlang and Elixir versions otherwise, you might find yourself in a pickle.

You can check the compatibility table in the official documentation: https://elixir-lang.org/docs

You can check the latest available versions of Elixir and Erlang:

$ asdf latest elixir
1.16.0-otp-26

$ asdf latest erlang
26.2.1

If the latest versions are compatible with each other, you can simply update both to the latest version:

asdf install erlang latest
asdf install elixir latest

Otherwise, list all the available versions, then pick and choose what you need.

asdf list all erlang
asdf list all elixir

When you list Elixir, you’ll see the OTP version it was compiled against as an -otp-XX suffix, eg:

1.15.7
1.15.7-otp-24
1.15.7-otp-25
1.15.7-otp-26
1.16.0
1.16.0-otp-24
1.16.0-otp-25
1.16.0-otp-26
1.16.0-rc.0
1.16.0-rc.0-otp-24
1.16.0-rc.0-otp-25
1.16.0-rc.0-otp-26
1.16.0-rc.1
1.16.0-rc.1-otp-24
1.16.0-rc.1-otp-25
1.16.0-rc.1-otp-26
main
main-otp-22
main-otp-23
main-otp-24
main-otp-25
main-otp-26

Once you selected the versions you need, you’re ready to specify which to install

asdf install erlang VERSIONNUMBER
asdf install elixir VERSIONNUMBER

We have a more detailed install guide coming very soon that includes a guide on how to install specific versions per project. Make sure to subscribe to our newsletter to be among the first to get it!

On Windows

You can do it the easy way or the hard way.

The easy way: using chocolatey

Install chocolatey, then run 

choco install elixir

This will install Erlang as a dependency too.

The hard way: with the installer

We’d only go that way if you already have Erlang installed on your Windows machine, and you want to stick to your current install. Either way:

  1. If you haven’t done so already, download and install the latest version of Erlang: https://www.erlang.org/downloads.html
    1. If you want to check which version of Erlang you have (if any), run erl in the terminal.
  2. After that, download the Elixir installer that is compatible with the version of Erlang that you have installed:
    1. https://github.com/elixir-lang/elixir/releases/download/v1.16.0/elixir-otp-26.exe
    2. https://github.com/elixir-lang/elixir/releases/download/v1.16.0/elixir-otp-25.exe
    3. https://github.com/elixir-lang/elixir/releases/download/v1.16.0/elixir-otp-24.exe

Note: you need to have Erlang v24.0 or later installed for Elixir v.1.16.

If you already have a previous version of Elixir installed and just want to update, run the installer as usual and check the “replace my current version” when the installer asks.

The best way: Using WSL

Unless you really, really, really have to install Elixir on a Windows host, we suggest using it in WSL instead. Ports get automatically forwarded to the host machine, so you won’t have to do the rain dance to reach your local development server. You’ll be able to use asdf, and in general, you’ll have a nicer time. The only downside, in our experience, is that the LSP autosuggest is a bit slower that way than if the whole dev env was run on the host machine. In that case, Windows – Linux dual boot still looks preferable.

Elixir changelog of the latest minor version (1.16.0)

  • Compiler Diagnostics: Enhanced diagnostics with code snippets and ANSI coloring for errors like syntax errors, mismatched delimiters, and unclosed delimiters.
  • Revamped Documentation: Learning materials moved to the language repository, enabling full-text search across API references and tutorials, with ExDoc autolinking to relevant documentation.
  • Introduction of Cheatsheets and Diagrams: Starting with the Enum module and incorporating Mermaid.js diagrams in docs like GenServer and Supervisor.
  • Anti-patterns Reference: Inclusion of anti-patterns categorized into code-related, design-related, process-related, and meta-programming, providing guidance for developers.
  • Other Notable Changes: Addition of String.replace_invalid/2, a :limit option in Task.yield_many/2, and improvements in binary pattern matching.

Building a Phoenix application with the latest version: 1.7.11

Before you proceed, make sure you have both Elixir and Erlang installed and both are up-to-date and the versions you have are compatible with each other.

The first step is to get the Hex package manager:

mix local.hex

Don’t worry about Mix, it comes with Elixir – if you have Elixir installed then you have Mix as well.

To install the Phoenix project generator,  run the following command:

mix archive.install hex phx_new

You’re ready to generate your project:

mix phx_new <your_project_name>

Make sure you use a snake_case-d name, which also means that all letters should be lowercase! 

The command above sets up the project with a basic landing page as well as the server, router, migrations, db connection, and anything you need to get started. Speaking of database connection: PostgreSQL is the default one, but you can also switch to MySQL, MSSQL, or SQLite3 with the --database flag.

If you aren’t planning on using databases with your app, use the --no-ecto flag when creating a new Phoenix app. Ecto is an Elixir package that – among many other things – helps establishing a database connection. 

Updating Phoenix

If you just want to make sure that your app uses the latest version of Phoenix, you can simply update the version number in your mix.exs file.

For patches, you shouldn’t run into any issues, but for minor updates, refer to the official Phoenix documentation to make sure you can update without a hitch: https://github.com/phoenixframework/phoenix/blob/main/CHANGELOG.md

Phoenix changelog of the latest minor version (v1.7)

  • Verified Routes: Introduces Phoenix.VerifiedRoutes for compile-time verified route generation using ~p sigil, enhancing reliability and reducing runtime errors.
  • phx.new Revamp: The phx.new application generator has been improved to rely on function components for both Controller and LiveView rendering, ultimately simplifying the rendering stack of Phoenix applications and providing better reuse. The revamp also introduces improvements  in the application generator, focusing on function components and Tailwind CSS for styling. This simplifies rendering and offers better style management.
  • JavaScript Client Enhancements: New options for long poll fallback and debugging, improving WebSocket connectivity and logging.
  • Various Bug Fixes and Enhancements: Across different versions (1.7.1 to 1.7.11), addressing issues in code reloader, controller, channel test, and more. Enhancements include dynamic port support for Endpoint.url/0, updated socket drainer configuration, and support for static resources with fragments in ~p. .

Installing and updating LiveView

If you’re using the latest version of phx.new and Phoenix, you’re in luck, because it has built-in support for LiveView apps. To get started with LiveView, you just simply get started with Phoenix:

mix phx.new <your_project_name>

On older versions you might need to add the --live flag, though it is the default since v1.6.

Updating LiveView is as easy as updating the dependencies in your app’s mix.exs file to the latest version, and then run mix deps.get.

The current latest version is 0.20.14.

Full changelog: https://hexdocs.pm/phoenix_live_view/changelog.html#0-20-3-2024-01-02

LiveView changelog of the latest minor version (0.20.14 (2024-03-13))

  • Deprecations: The shift from older syntax and functions to new ones is crucial. This includes:
    • Deprecating the ~L sigil in favor of ~H.
    • Moving from preload/1 in LiveComponent to update_many/1.
    • Transitioning from live_component/2-3 to <.live_component />.
    • Replacing live_patch with <.link patch={…} />.
    • Changing live_redirect to <.link navigate={…} />.
    • Switching from live_title_tag to <.live_title />.
  • Backwards Incompatible Changes: Removal of deprecated functions like render_block/2, live_img_preview/2, and live_file_input/2 in favor of new implementations (render_slot/2, <.live_img_preview />, <.live_file_input />). These changes can break existing code that hasn’t been updated.

You can find the full changelog here: https://hexdocs.pm/phoenix_live_view/changelog.html#0-20-0-2023-09-22

Facing challenges in your Elixir development? Contact our team for professional help and get your project moving smoothly!

Share this post

Twitter
Facebook
LinkedIn
Reddit

Node.js
Experts

Learn more at risingstack.com

Node.js Experts