#177: Phoenix LiveView Tutorial Part 1

Published January 29, 2024

Let’s start this course by creating a new Elixir Phoenix application. We’ll go to the command line and generate it with mix phx.new werdle. And yes, we’ll want to fetch and install the dependencies.

Great, it looks like everything was created. Let’s cd into our new werdle directory. I’ll clear the screen here, now we’ll want to create our database, which we can do with mix ecto.create - great - the database for our project was created. Just to confirm everything is set up correctly, let’s start our development server with mix phx.server. We should be able to see our new application in the browser at http://localhost:4000 - so let’s open it up.

$ mix phx.new werdle
$ cd werdle
$ mix ecto.create
Generated werdle app
The database for Werdle.Repo has been created
$ mix phx.server
...

And perfect - we see the familiar homepage for a new Phoenix application. And we can see that we’re using Phoenix version 1.7.10 with our project. Now that we know our application is installed and running, let’s update the layout. We’ll open our project in our code editor and then let’s go to the app.html.heex layout. This is the default application layout which is rendered on both regular HTTP requests and LiveViews.

Let’s remove the default code. And replace it with a simpler layout that wraps everything in a “container” class and still includes the .flash_group component for rendering flash messages. Because this is a layout, we need to be sure to include @inner_content, which is used to inject the content rendered by the layout.

Template path: lib/werdle_web/components/layouts/app.html.heex

<main class="container">
  <.flash_group flash={@flash} />
  <%= @inner_content %>
</main>

Then let’s open our page_html/home.html.heex template. This is the default template Phoenix generated for our homepage. Let’s start off with an empty page, so we can go ahead and remove everything here except for the .flash_group component.

Template path: lib/werdle_web/controllers/page_html/home.html.heex

<.flash_group flash={@flash} />

Then let’s open our root.html.heex layout. This layout is used by both LiveView and regular views, and as you can see contains the <html> definition alongside the head and body tags. Let’s give our page a black background using the bg-black class because we’re using Tailwind CSS, which comes installed by default with our version Phoenix. And then I’ll go ahead and paste in some additional styling around our @inner_content assign.

Don’t worry too much about this if you’re not familiar with Tailwind CSS - it’s included in the notes for the episode - but all we’re doing here is updating our layout to have a nav bar at the top of the page with the name of our project “WERDLE” in white letters.

Template path: lib/werdle_web/components/layouts/root.html.heex

...
<body class="bg-black">
    <div class="h-screen w-screen relative">
      <nav class="border-b border-gray-600 w-screen">
        <div class="p-5 text-center text-2xl font-bold tracking-tight text-white">
          WERDLE
        </div>
      </nav>
      <%= @inner_content %>
    </div>
</body>
...

Alright, with that let’s go back to the browser. And if we refresh the page - great - we see our layout is updated. We have a nice blank page to get us started with our project’s name at the top of the page.