Search⌘ K
AI Features
Home
Courses
Building Real-time Applications with Phoenix & Elixir

Scaffold the Admin Dashboard

Explore how to scaffold an admin dashboard in Phoenix by defining routes, setting layouts, creating controllers, and establishing socket connections with basic authentication. Understand how to separate admin assets and configure websocket channels, laying the foundation for real-time shopping cart tracking using Phoenix Presence.

We'll cover the following...

The admin dashboard

There are many moving parts in setting up a brand new section of an application. We’ll tackle this together to see how we’d go about it in other projects. Our scaffolding will consist of these steps:

  1. Define our new Router entries.
  2. Set up an admin layout.
  3. Create the Admin.DashboardController.
  4. Create the Admin.Socket and Admin.DashboardChannel.
  5. Create admin JS and CSS.

We’ll move quickly through these steps. Once this is done, we’ll have the proper foundation to build our admin dashboard.

We’ll start with our route definition. Our admin dashboard will be behind an HTTP Basic Auth screen, and luckily there is a library to help with this. Let’s add the basic_auth library to our mix file.

Elixir
# sneakers_23_admin/mix.exs
      {:hound, "~> 1.0"},
      {:basic_auth, "~> 2.2.2"}

Let’s run mix deps.get after we add it. Next, we’ll configure our local login to be “admin/password.” Let’s add this snippet to the end of our dev config file:

Elixir
# sneakers_23_admin/config/dev.exs
config :sneakers_23, admin_auth: [
  username: "admin",
  password: "password"
]

We will enter these credentials when the HTTP Basic Auth screen appears. Now we are ready ...