Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

phoenix
elixir
web development
web socket

How to create a simple Phoenix LiveView project

Educative Team

Overview

The Phoenix framework and the Elixir language have rapidly increased in popularity. In terms of productivity, Phoenix is comparable to frameworks such as Ruby on Rails, but it’s also one of the quickest web frameworks on the market.

Due to Phoenix’s incredible speed, it can create real-time apps that are lightning-fast.

Introduction to the Phoenix LiveView

With Phoenix LiveView, developers can use server-rendered HTML to create a rich, real-time user experience. It offers bi-directional communication via WebSockets between the server and client without using JavaScript on the front end. Our applications can now have real-time features with simplicity.

Let’s see how we can build a simple Phoenix LiveView.

Prerequisites

The first step to developing LiveView applications is to install the following:

  • Elixir (the language we’ll be using)
  • Erlang (the language it’s built on)
  • Phoenix (the web framework)
  • Node.js (supports the system LiveView uses)
  • PostgreSQL (the database that Phoenix LiveView uses)

Note: Everything is already installed on the Educative platform.

Let’s get started

With all of our dependencies installed, we are ready start building our Phoenix project.

To open up a terminal, click the “Run” button in the widget below and type the following commands:

mix phx.new pento --live
Command to create a new Phoenix LiveView project named pento

Note: While installing, press “Y” for every option.

The mix phx.new command runs the Phoenix installer for a standard Phoenix project, and the --live switch adds the library dependencies, configuration, and assets we’ll need to build live views.

We are almost there! Just a few steps are left. To configure the database in config/dev.exs, we have to go to the project directory using the following command.

cd pento
Move to project directory

Then we’ll run the command below.

mix ecto.create
Configure database

Finally, we can start our Phoenix app with the command below.

Note: To view the Phoenix app, click on the URL given with the “Run” button.

mix phx.server
Start the Phoenix LiveView app

RELATED TAGS

phoenix
elixir
web development
web socket
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring