Your first Live View

#One step at a time

The Phoenix framework brings with it several tools configured so you don't have to worry: sending emails, real-time presence system, clustering, etc. This is amazing when you need to deliver a product as quickly as possible but it can be daunting when you're just starting out.

To make it easier to understand I built a very lean version of LiveView called LiveView Playground. We will use it at the beginning of this course and gradually add more features so you understand how things work in Phoenix and LiveView bit by bit.

#The most basic LiveView

For simple scripts the elixir command briefly executes a file. Let's create a file called hello_liveview.exs.

# contents of hello_liveview.exs

Mix.install([
  {:liveview_playground, "~> 0.1.1"}
])

defmodule PageLive do
  use LiveviewPlaygroundWeb, :live_view

  def render(assigns) do
    ~H"""
    Hello World
    """
  end
end

LiveviewPlayground.start()

Then just run elixir hello_liveview.exs in your terminal and the server will be available at http://localhost:4000

#Try it out

Try putting some HTML in your render/1 function. To be able to see the changes you will need to shut down the server with Control+c twice and run the project again.

#Success!

Now that you have LiveView Playground in your hands, in the next steps we will understand what each piece of this code represents.