Tutorial

Getting Started with Phoenix and LiveView

This post was updated 27 Mar

liveview phoenix

This guide covers getting up and running with Elixir and Phoenix. This is a direct conversion of the Getting Started with Rails Guide so it is especially suited for you that already know Ruby on Rails.

The goal of the guide is to teach you:

  • How to install Phoenix, create a new application, and connect your application to a database.
  • The general layout of a Phoenix application.
  • How to quickly generate the starting pieces of a Phoenix application.

1 Guide Assumptions

This guide is designed for beginners who want to get started with a Phoenix application from scratch. You don’t need to have any prior experience with Phoenix.

Phoenix is a web application framework running on the Elixir programming language. The guide assumes that you have some prior experience with either Ruby on Rails or Elixir.

The guide also assumes that you are running on a Mac and that if you don’t, you know how to convert the Mac-specific instructions to your environment.

2 What is Phoenix?

Phoenix is a web application development framework written in the Elixir programming language. It is designed to make it easy to focus on your business domain, bringing you immediate productivity and long-term code maintainability.

It comes with support for building real-time applications out of the box. Either by using Phoenix Channels with Phoenix Presence, or by using Phoenix LiveView to build real-time interactive apps without frontend complexity.

Phoenix is opinionated software. It makes the assumption that there is a “best” way to do things, and it’s designed to encourage that way - and in some cases to discourage alternatives.

3 Creating a New Phoenix Project

The best way to read this guide is to follow it step by step. All steps are essential to run this example application and no additional code or steps are needed.

By following along with this guide, you’ll create a Phoenix project called blog, a (very) simple weblog. Before you can start building the application, you need to make sure that you have Elixir and Phoenix installed.

3.1 Installing Phoenix

Before you install Phoenix, you should check to make sure that your system has the proper prerequisites installed. These include:

  • Elixir
  • PostgreSQL

3.1.1 Installing Elixir

The preferred way to install Elixir is to use the mise version manager. You can install it with Homebrew:

brew install mise

Add mise activation to your ~/.zshrc with:

echo 'eval "$(mise activate zsh)"' >> ~/.zshrc

Install the latest version of Elixir:

mise use -g elixir@latest

You can now see that it works in the console by running:

elixir -v

3.1.2 Installing PostgreSQL

I prefer to install and run Postgres App which usually works out of the box with macOS.

However, you can also install PostgreSQL with Homebrew. Run the command:

brew install postgres

Check that everything was installed correctly and the version of PostgreSQL by using the psql command.

psql --version

To start PostgreSQL run the following command in the Terminal.

brew services start postgres

3.1.3 Installing Phoenix

First, install the hex package manager:

mix local.hex

Then, to install Phoenix, run:

mix archive.install hex phx_new

3.2 Creating the Blog Application

Phoenix comes with a number of scripts called generators that are designed to make your development life easier by creating everything that’s necessary to start working on a particular task. One of these is the new application generator, which will provide you with the foundation of a fresh Phoenix application so that you don’t have to write it yourself.

To use this generator, open a terminal, navigate to a directory where you have rights to create files, and type:

mix phx.new blog

This will create a Phoenix application called Blog in a blog directory and install the dependencies that are already mentioned in mix.exs using mix deps.get. When prompted for installing dependencies, just press Y.

After you create the blog application, you will be prompted with a message like:

We are almost there! The following steps are missing:

$ cd blog

Then configure your database in config/dev.exs and run:

$ mix ecto.create

Start your Phoenix app with:

$ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

$ iex -S mix phx.server

So, to continue, switch to its folder:

cd blog

Related Tutorials

NEW
Published 11 Apr

Activity Tracking in Phoenix LiveView

Most SaaS apps need some form of activity tracking — who did what and when. In this tutorial, we'll build an automatic activity tracking system that..

NEW
Published 11 Apr

Rendering an Activity Feed in Phoenix LiveView

In the previous tutorial, we built an automatic activity tracking system that records events whenever a tracked schema is inserted, updated, or dele..