Getting Started with Phoenix and LiveView

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 especially suited for you that already knows 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 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 an Intel 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 and 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
• Node.js
• Yarn (or Npm)

3.1.1 Installing Elixir

The preferred way to install Elixir is to use the asdf package manager. You can install it with homebrew with:

brew install asdf

Add asdf.sh to your ~/.zshrc with:

echo -e "\n. $(brew --prefix asdf)/asdf.sh" >> ~/.zshrc

Add Elixir to list of plugins

asdf plugin add elixir

Install latest version

asdf install elixir latest # OR asdf install elixir 1.11.2-otp-23

Set that

asdf global 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 OS X.

However, you can also install postgres 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 Node.js and Yarn

You will also need Node.js and Yarn installed to manage your Phoenix application's frontend.

You most likely have this installed or have a preferred way to install it. Otherwise, find the installation instructions at the Node.js website and verify it's installed correctly with the following command:

node --version

Make sure it's a recent version (> 12.16.1)

You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed.

brew install yarn

Check the version in the console by:

yarn -v

If it says something like "1.22.5", Yarn has been installed correctly.

3.1.4 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. It also fetches the default assets by running npm install.

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