How to Create a Basic Elixir Phoenix LiveView Application
Before You Begin
Installing Phoenix
This article assumes that you have installed the Phoenix web framework and all its dependencies correctly without errors. If you have not installed the Phoenix web framework please view the documentation here
What you will do
- Create a new Phoenix application instance
- Create a route that points to a LiveView file
- Create a basic LiveView file and render text to the browser that says "Hello World".
Create the App
Select a directory, open a terminal and type:
mix phx.new app
This creates a new phoenix application named "app".
The terminal will prompt you to download dependencies, select Y for yes.
When dependency downloading is complete, you have the choice to connect your app to a database using the following command.
mix ecto.create
If you run the command, Elixir will try to connect to your app to your instance of PostgresSQL and create a new database. Phoenix defaults to naming your database the same name as your app with a suffix of _dev appended to it.
In other words,if your application name is app, Phoenix will try to create a database named
app_dev
. If you application is named todos then Phoenix defaults to creating a database named
todos_dev
.
Before you run mix ecto.create you can change the database name Phoenix creates for you. You can also change the credentials that Phoenix uses in attempting to connect to your database.
The file that contains this information is:
name-of-app/config/dev.exs
The relevant part of the code in dev.exs is here:
config :app, App.Repo, username: "postgres", password: "postgres", hostname: "localhost", database: "app_dev",
The database name in the above code can be changed to anything you want. The username and password fields need to match your PostgresSQL installation. If they don't match, Phoenix won't be able to connect to PostgresSQL and your app will be created without a database.
Create the Database
Enter the database creation command:
mix ecto.create
More Information on Database Table Creation
This tutorial does not require the creation of database tables. If you want to know more about Database Table creation please read:
How to Create Database Seed Data in Elixir Phoenix
Run the Database Migration Command
mix ecto.migrate
Create a LiveView route
In your app folder go to the router file at this directory:
app/lib/app_web/router.ex
In the file, you will see this code:
scope "/", AppWeb do
pipe_through :browser
get "/", PageController, :home
end
Replace this line:
get "/", PageController, :home
with this code:
live "/", PageLive, :home
If you run the server and go to the homepage you will get an error. In the terminal run the server now:
mix phx.server
In your web browser go to localhost:4000
An error appears.
The error you are viewing is telling you that when a user goes to the homepage a module named AppWeb.PageLive should run and that this module is a LiveView (that will render html to the page).
The module has not been created yet, so lets do that now.
Go to app/lib/app_web and create a folder named live.
In the live folder create a file named:
page_live.ex
In the page_live.ex file copy the following code:
defmodule AppWeb.PageLive do
use AppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~H"""
Hello World! YAY
"""
end
end
If you go to localhost:4000 in your browser while the phoenix server is running you will see the phrase Hello World rendered to the page.