Yesterday, Chris McCord released the new LiveView demo Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5. I had decided to play with LiveView already, and had already started working through some basic Elixir tutorials, so I thought I'd give it a try.

I hit several snags due to my lack of knowledge with Elixir, and not having all the prerequisites installed.

Installations

You should have these tools installed before getting started:

• PostgreSQL
• npm
• Elixir
• Phoenix

Font Awesome

I had heard of Font Awesome, but having avoided all things front end, I didn't have an account. It took me several minutes to figure out what the far fa-heart and related icon classes were referencing. If you don't complete this step, the heart and retweet icons won't appear.

You'll need at least a free account, that you can sign up for here. (I fumbled through this and ended up with two different site ids.)

Once you have the script tag from Font Awesome, you'll need to add it to lib\chirp_web\templates\layout\root.html.leex, just above the closing </head> tag(on line 11 for me).

Pasted Text

There are several places where Chris pastes in swaths of text that are wider than his terminal. This lead to me having to guess what was off-screen and ask for help with errors in the Elixir Slack when I failed at that.

Here's the biggest snippet that you'll need, it's for the render method in post_component.ex:

    ~L"""
    <div id="post-<%= @post.id %>" class="post">
      <div class="row">
        <div class="column column-10">
          <div class="post-avatar"></div>
        </div>
        <div class="column column-90 post-body">
          <b>@<%= @post.username %></b>
          <br/>
          <%= @post.body %>
        </div>
      </div>

      <div class="row">
        <div class="column">
          <a href="#" phx-click="like" phx-target="<%= @myself %>">
            <i class="fas fa-heart"></i> <%= @post.likes_count %>
          </a>
        </div>
        <div class="column">
          <a href="#" phx-click="repost" phx-target="<%= @myself %>">
            <i class="fas fa-retweet"></i> <%= @post.reposts_count %>
          </a>
        </div>
        <div class="column">
          <%= live_patch to: Routes.post_index_path(@socket, :edit, @post.id) do %>
            <i class="fas fa-edit"></i>
          <% end %>
          <%= link to: "#", phx_click: "delete", phx_value_id: @post.id, data: [confirm: "Are you sure?"] do %>
            <i class="fas fa-trash-alt"></i>
          <% end %>
        </div>
      </div>
    </div>
    """

Note that I changed the original far Font Awesome tags to fas tags, as the far ones require a paid account.

CSS is not my friend

By the 7 minute mark, we're supposed to have a pretty box around each post. That never appeared for me.

End

I really appreciate the work Chris and others have done to build out Elixir and the Phoenix Framework. I'm really hoping that I can use LiveView to continue to avoid JavaScript.

If you experienced any other issues going through the demo, reach out to me with screenshots or snippets, and I'll update this post.