Premium Tutorial. Learn Stripe Subscription with Phoenix LiveViewRead more
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 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:
- 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:
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
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:
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:
If it says something like “1.22.5”, Yarn has been installed correctly.
3.1.4 Installing Phoenix
First, intstall the hex package manager
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 deps.get. When promted for installing dependencies, just press
Y. It also fetches the default assets by running
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:
Published 31 Mar - 2020
Combine Phoenix LiveView with Alpine.jsliveviewphoenixtailwindalpinejs
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,..