Flowbite and duel layouts for dashboards

Install Flowbite in Rails 8, set up duel layouts for authentication and Deanin's sidebar tutorial.

In building MILK I need a dashboard. I need to build functionality and provide data in a secure fashion. I have the blog, that only I can write but everyone can see, maybe comment on. I have all the projects and the client section where clients and I can talk and discuss the project. There is a lot here, so I need a dashboard. There are many ways I could tackle this issue, but I wanted to strike a balance between plug and play and building in Rails 8.

I have used Flowbite when building the trucker recruiting site. I thought then that using the sidebar component would be great for a dashboard. At that time I had not dove into installing Flowbite into Rails but rather just copy pasted the component and then modified it to what the customer wanted. That worked well enough as I did not have a design to follow. I liked the way it came out, and more importantly, so did the client.

Today, in continuing the design and build of MILK I ran across the video tutorial from Deanin that outlines the use of Flowbite’s sidebar component. After watching it I decided to give it a go. This was my first time installing Flowbite. The documentation is really good. After some research and playing around, I found that creating a duel root layout was not as convoluted as I thought it would be, or tried to make it.

What I wanted was the root page (layout) that I originally set up, which is the page everyone starts on upon hitting my site, and a separate root (layout) if I am signed in as a admin. As a admin I want to be able to write a blog, talk to clients, set up client tasks or review them, all sorts of stuff. So a list of links that take me to where I need to be would be awesome. Let’s work the concept.

First thing we need is a new rails app. Call it whatever is clever, and use the Tailwind css flag.

rails new flowit -c tailwind

Great! That new app smell. Nothing like it. Now let’s set up Flowbite. According to the instructions we need to install with npm, you can use yarn if you prefer, and we need to make some adjustments to the tailwind config. So cd ( change directory ) into the “flowit” folder that contains the new rails app and run;

npm install flowbite

Open you text editor, or IDE, of choice, and navigate to “config/tailwind.config.js”. With the tailwind config open you need to add the plugins object at the bottom and include the content location string in the content object. Here is what mine looks like.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './node_modules/flowbite/**/*.js',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('flowbite/plugin'),
  ]
}

Seeing as we are riding with turbo, we will add a line to the config/importmap.rb

pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js"

Lastly import “flowbite” into the app/javascript/application.js file.

That should be Flowbite installed on Rails 8! Go ahead and create a pages controller with the home action. Grab a tool tip or copy paste the example in the instructions into the home view. Don’t forget to config the root. Spin up the server with the “bin/dev” command and visit localhost. Congrats!

Now we need to add the devise gem and create a admin. First thing is to run “bundle add devise” in the command line. Once devise is added you need to install with “rails generate devise:install”. Once it is installed, devise will print out some additional set up instructions. I typically do the first 3, but for our purposes you just need the root set and throw in those notice and alert messages.

Now that devise is installed and set, you can create the admin, or user, whatever you want. I needed an admin. After you create the admin go ahead and migrate that table. We just need the admin and by default devise will set that up with the email, password, and the password confirmation. Simple.

bin/rails g devise admin
bin/rails db:migrate

Now that we have the ability to create the admin, you can go ahead and create one. I hoped into the model and removed the registrations. I don’t want others to be able to create accounts. Then I configured the seed file and ran it with “bin/rails db:seed”. Here is my seed file;

# Delete any current Admin users
Admin.delete_all
p "#{Admin.count}; Admin deleted"

# Create a new Admin user
Admin.create!(email: "admin@example.com", password: "password", password_confirmation: "password")
p "#{Admin.count}; Admin created"

All right! Now you can create the sign in link on the home page and take it for a spin. You may want to include the admin id or email so you can know if you are logged in or not. Or maybe a conditional that presents the sign in if your not and the log out if you are. Do it how you like. We are about ready to hope into Deanin’s tutorial. One last thing to address. The duel layout.

OK. Let’s take a look at the current root. If you were following, we created a controller called pages and gave it a home action. We set this as the root in our routes file. Yes, that is the root, but that is not strictly what I mean when I say “root”. I should have said “layout”. In the layouts folder you have the root of the application, called the application.html.erb file. This file is the facing page for the application and will take in all the other pages and present them through the “yield” tag. What I want is another one of those. A different layout. That way I can include the sidebar on the app root and present the other views through the “yield” tag.

Doing this was far easier than I originally thought. I played around with different routes that were conditional through devise helpers. I played with conditional statements in the application.html.erb file. Finally I found this concept, and although I still don’t know if this is the best solution, I do realize that in Ruby, there are many ways to do the same thing.

In the application controller I set the layout to the “layout_by_resource” action. That action is written in a private section as a simple if statement. If the admin is signed in, show this layout, if not, show the other. Here is my app controller:

class ApplicationController < ActionController::Base
  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
  allow_browser versions: :modern
  layout :layout_by_resource

  private
  def layout_by_resource
    if admin_signed_in?
      "admin"
    else
      "application"
    end
  end
end

You need to create the admin.html.erb file in the layouts folder. If you have started to review Deanin’s tutorial, you will recognize the code. He uses it in the app root (layout) for his project. With the modification in the application controller, we will use it in the same manner, just for when we are logged in as the admin.

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Flow" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <div class="container-fluid">
      <%= render "sidebar/index" %>
      <div class="p-4 sm:ml-64">
        <%= yield %>
      </div>
    </div>
  </body>
</html>

Now you are ready to rock! There was one last thing I wanted to address. It may not be a issue for you, but once you are signed in as admin and the new layout, with the sidebar is displayed, the root of pages/home show’s in the right pane. That was expected as it is still the root. I changed the root for the admin by creating a admin controller with a index action. In the admin controller I gave a before_action of “authenticated_admin!” to protect it, and in the routes file I ran the following route:

  # authenticated admin root
  authenticated :admin do
    root to: "admin#index", as: :admin_root
  end

And done! Sign in and you have a dashboard. Sign out and you have the app that everyone will marvel. Enjoy your ride and thank you for choosing Rails. Giving you the options to make it yours.