Phoenix in Action book: Running the code in 2023

Learning Resources Guides/Tuts/Tips/Info
,
8

Corrected some errors:

I finished Chap 8, and I’m in the middle of Chap 9. I’m still getting an occasional PubSub error or another Logging error. I find those errors occur when I start the server in the directory auction_umbrella/apps/auction_web. However, if I switch directories to the root directory auction_umbrella, and I start the server in that directory, then I don’t get either error. I asked about those errors here:

Chapter 9
Creating the WebAuction.ItemController
The directory structure is different in Phoenix 1.7.10 than in the book. I examined the directory structure for the generated PageController, and I copied that directory structure for the ItemController and its associated files. In apps/auction_web/lib/auction_web/controllers, I created the files: item_controller.ex, item_html.ex, and a folder named item_html. Inside the item_html folder, I created the file index.html.heex.

Then I copied the contents of page_html.ex and pasted it into item_html.ex, and I changed “page” to “item”, giving me this:

defmodule AuctionWeb.ItemHTML do
  use AuctionWeb, :html

  embed_templates("item_html/*")
end

I put the following in index.html.heex:

<ul>
  <%= for item <- @items do %>
    <li><strong><%= item.title %></strong>: <%= item.description %></li>
  <% end %>
</ul>

Then I started the server in the root directory:

auction_umbrella$ mix phx.server

In my browser’s address bar, I entered localhost:4000/items, and the browser successfully displayed the items in my database. But there was a broken image in the upper left hand corner, which I resolved to fix.

I looked at the source html in my browser, and the html contained this:

            <a href="/">
                <img src="/images/logo.png" width="36">
            </a>

Because that was not in my item.html.heex file, that had to be coming from a layout. So I looked at lib/auction_web/components/layouts/root.html.heex, but that link wasn’t in there. Next, I opened up app.html.heex, and it contained this html:

    <a href="/">
      <img src={~p"/images/logo.png"} width="36" />
    </a>

Next, I did some searching around about where images should go in a Phoenix app. I think they are supposed to go in apps/auction_web/priv/static/images. I’m using vscode, and I discovered that vscode wasn’t showing all the directories and files, and it was hiding the priv/static directory. Why is that?! In the vscode menu bar, I went to Code>Preferences>Settings and on the left I clicked on TextEditor>Files. Scrolling down in the right hand pane, I found the heading “Exclude”, and in the list of excluded files was **/priv/static. What?! I deleted that, and then the full priv/ dir was displayed in vscode.

Next, I created the directory priv/static/images. It seems pretty strange to me that the Phoenix generators would create a layout containing a link with a path to a non-existent directory. Then I downloaded a transparent image of the Phoenix logo I found on the internet, and I named it logo.png, and I put it in the images directory. Finally, I changed the html in app.html.heex to reflect the image name:

      <a href="/">
        <img src={~p"/images/logo.png"} width="36" />
      </a>

I looked up what the ~p sigil does, and it asks Phoenix to verify that there is a valid route for the specified path. Well, there’s nothing in my route.ex file for that image, so I think I should get a compile time error. But when I start the server in the root directory or run iex -S mix in the root directory, I don’t get any errors.

While I was looking in router.ex, I noticed this route:

    scope "/dev" do
      pipe_through(:browser)

      live_dashboard("/dashboard", metrics: AuctionWeb.Telemetry)
    end

Try entering the following in your browser:

localhost:4000/dev/dashboard

1 Like