FlowDash SAAS Dashboard Documentation

Resources

• Managing Ruby versions on macOS
• Rails 7, Bootstrap 5 tutorial
• Flowdash Bootstrap 5

Ruby version

Check ruby version (requires at least 3.0.0).

ruby -v

Install Ruby 3 via rbenv

rbenv install 3.0.0
rbenv local 3.0.0

Create an isolated, new Rails 7 app

echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '7.0.0'" >> Gemfile
bundle install
bundle exec rails new . --force --css=bootstrap -d=postgresql

Create bare minimal Bootstrap 5 HTML

Controller

Inside app/controllers/home_controller.rb

class HomeController < ApplicationController  
end

Configure a default route

Inside config/routes.rb

Rails.application.routes.draw do  
  get "home/index"
  root to: "home#index"
end

View

app/views/home/index.html.erb

<div class="container-fluid page__heading-container">
  <div class="page__heading d-flex align-items-center">
    <div class="flex">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
      </nav>
      <h1 class="m-0">Dashboard</h1>
    </div>
    <a href="" class="btn btn-success ms-3">New Report</a>
  </div>
</div>

<div class="page__container container-fluid"> 
  <button type="button" 
          class="btn btn-lg btn-danger" 
          data-toggle="sidebar" 
          data-target="#default-drawer">
          Toggle Drawer
  </button>  
</div>

• Configuration

Database creation

rails db:create
rails db:migrate

Local Development

./bin/dev

Theme dependencies

package.json

{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.4.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/vue-fontawesome": "^0.1.2",
    "@hotwired/stimulus": "^3.1.0",
    "@hotwired/turbo-rails": "^7.1.3",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.1",
    "bootstrap-icons": "^1.9.1",
    "chart.js": "^2.7.3",
    "chartjs-adapter-moment": "^0.1.2",
    "daterangepicker": "^3.0.3",
    "dragula": "^3.7.2",
    "dropzone": "^5.5.1",
    "flatpickr": "^4.5.2",
    "fullcalendar": "3.9.0",
    "ion-rangeslider": "^2.3.0",
    "jquery": "^3.6.0",
    "jquery-mask-plugin": "^1.14.15",
    "jquery-ui-dist": "^1.12.1",
    "jqvmap": "github:10bestdesign/jqvmap#master",
    "list.js": "^1.5.0",
    "material-design-icons-iconfont": "^3.0.3",
    "material-design-kit": "^2.2.1",
    "moment": "^2.22.2",
    "moment-range": "^4.0.1",
    "perfect-scrollbar": "^1.4.0",
    "quill": "^1.3.6",
    "select2": "^4.0.13",
    "select2-bootstrap-5-theme": "^1.3.0",
    "sidebar-style-guide": "^2.0.0",
    "toastr": "^2.1.4",
    "vue": "^2.7.10",
    "vue-icons-demo-app": "^1.1.0"
  },
  "devDependencies": {
    "esbuild": "^0.15.8",
    "sass": "^1.55.0"
  }
}

Install

npm install

Theme Style

mkdir app/assets/stylesheets/flowdash
cp -rf ~/Code/flowdash/src/scss/* app/assets/stylesheets/flowdash/

app/assets/stylesheets/application.bootstrap.scss

@import './flowdash/app.scss'

Theme JavaScript

mkdir app/javascript/flowdash
cp -rf ~/Code/flowdash/src/js/* app/javascript/flowdash/

app/javascript/application.js

import "@hotwired/turbo-rails"
import "./controllers"
import "./flowdash"

Theme Images

mkdir app/assets/images/flowdash
cp -rf ~/Code/flowdash/src/images/* app/assets/images/flowdash

Theme Fonts

Add node_modules to assets paths in config/application.rb

config.assets.paths << Rails.root.join("node_modules")

Add a custom variables file app/stylesheets/_variables.scss

$material-design-icons-font-path: 'material-design-icons-iconfont/dist/fonts/' !default;

Load it from the main application stylesheet app/stylesheets/application.bootstrap.scss

@import './variables';
@import './flowdash/app';

Restart dev server

./bin/dev

Theme App Layout

app/controller/home_controller.rb

class HomeController < ApplicationController
  layout 'flowdash/application'
end

app/views/layouts/flowdash/application.html.erb

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <title>FlowDash Rails 7</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    <%= content_for :header %>
  </head>

  <body class="layout-default">
    <!-- Header Layout -->
    <div class="mdk-header-layout js-mdk-header-layout">

      <!-- Header -->
      <div id="header" class="mdk-header js-mdk-header m-0" data-fixed>
        <div class="mdk-header__content">
          <%= render 'layouts/flowdash/navbar' %>
        </div>
      </div>
      <!-- // END Header -->

      <!-- Header Layout Content -->
      <div class="mdk-header-layout__content">

        <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
          <div class="mdk-drawer-layout__content page">
            <%= yield %>
          </div>
          <!-- // END drawer-layout__content -->

          <%= render 'layouts/flowdash/drawer' %>
        </div>
        <!-- // END drawer-layout -->

      </div>
      <!-- // END header-layout__content -->

    </div>
    <!-- // END header-layout -->

    <%= content_for :footer %>
  </body>
</html>

This README.md documentation reflects the specific setup and configuration for the Flowdash theme within a Rails 7 application, integrating Bootstrap 5 and additional dependencies tailored to the Flowdash product.