Premium Tutorial. Learn Stripe Subscription with Phoenix LiveView

Read more

Tutorial

Getting Started with Phoenix and LiveView

phoenixliveview

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:

1 Guide Assumptions

This guide is designed for beginners who want to get started with a Phoenix application from scratch. You dont 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 dont, 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 realtime 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:

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 preferr 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. Otherwhise find the installation instructions at the Node.js website and verify it’s installed correctly with the following command:

node --version

Make sure its 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, intstall 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 promted 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

What are you working on?

If you want, you can send me a link to your Phoenix or Phoenix LiveView project so. Lets connect on Twitter or Linkedin.

- Andreas Eriksson, web developer since 2005

Related Tutorials

Published 31 Mar - 2020

Combine Phoenix LiveView with Alpine.js

liveviewphoenixtailwindalpinejs

No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..

Published 11 Jul - 2020

Create a reusable modal with LiveView Component

tailwindalpinejsliveviewmodalphoenix

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..