The Phoenix Files

Phoenix and LiveView applications are awesome on Fly.io! This is the home for Phoenix-oriented content ranging from Ecto to LiveView and more.

By Alexander Koutmos

Elixir, OpenTelemetry, and the Infamous N+1

In this article, we'll dive into the topic of observability and specifically the OpenTelemetry project. We'll see how to set up the Elixir and Erlang OpenTelemetry libraries in a Phoenix LiveView application so you can debug troublesome database q...

Read more 

Read more
By Mark Ericksen

Github Actions for Elixir CI

A critical ingredient for modern development teams is a regularly run set of code checks. If it's up to every developer to run code tests and checks locally before pushing code, you know it will be forgotten at some point. This leaves it as a prob...

Read more 

Read more
By Chris McCord

Shutting Down a Phoenix App When Idle

If you've ever wanted to shut down an application when no one's connected to it, say for demand-driven horizontal scaling using Fly Machines, then we have the perfect little recipe for you. At the time of writing, "regular" Fly apps don't run on M...

Read more 

Read more
By Berenice Medel

Migrating to LiveView v0.18

LiveView 0.18 is here, bringing new and exciting features to try! In this post we'll talk about errors that may appear when migrating your project from LiveView v0.17 to v0.18, and how to deal with them. Migrated FunctionsSome of the errors that...

Read more 

Read more
By Mark Ericksen

Plucking the 'A' from PETAL

Recently, LiveView has matured greatly. A recent feature in v0.18, covered by Chris McCord in his ElixirConf 2022 keynote, is the addition to declarative assigns (think the old React/Vue props). This feature improves the developer experience when...

Read more 

Read more
By Jaeyson Anthony Y.

Infinitely Scroll Images in LiveView

We see plenty of examples around the web of infinite scrolling content. Phoenix LiveView gives us some nifty abilities to do this elegantly and smoothly without needing any frontend frameworks. In this post we're going to build a very simple infin...

Read more 

Read more
By Berenice Medel

Testing LiveView Forms

In previous posts we've used forms for different purposes, but we've never talked about how to test that our app does the right thing when a form is submitted. In this post we'll take a walk around some functions of the LiveViewTest module that ...

Read more 

Read more
By Berenice Medel & Mark Ericksen

Live Sessions in Action

Phoenix LiveView often makes us feel like "wow, that was really fast!" and that is not a coincidence. Behind LiveView's magic, there are a bunch of design decisions, but also interesting features we can use. Under the umbrella of LiveView navigat...

Read more 

Read more
By Berenice Medel & Chris Nicoll

Triggering a Phoenix Controller Action From a Form in a LiveView

Have you ever wanted to use LiveViews for a site's authentication? Among many other implementation details, you need to save some data to identify the logged-in user. This can be a token or some unique identifier, and it needs to persist even as t...

Read more 

Read more
By Mark Ericksen

Making Tabs Mobile Friendly

This recipe creates a Tailwind UI styled tab component that gracefully switches to an HTML select input when viewed on smaller screens. It doesn't use Alpine.js or other client-side javascript frameworks for managing the UI. It is built as a clien...

Read more 

Read more
By Chris McCord

Phoenix LiveView Tailwind Variants

ProblemUsers of Tailwind CSS know the productivity gains the utility-first CSS framework provides. One of Tailwind's biggest advantages is that you can rapidly build applications without ever leaving your HTML. There's no context-switching betwee...

Read more 

Read more
By Mark Ericksen

Set Up VSCode for Elixir Dev

Since Elixir and Phoenix appeared prominently in the Stack Overflow Survey Results for 2022, more people have been discovering the joy of Elixir and the power of LiveView. This article introduces developers to getting the popular VS Code editor up...

Read more 

Read more