Buffalo Add Custom Dashboard Template

source: vali-admin dashboard overlaid with the Buffalo logo

In this tutorial, we add vali-admin dashboard template to a Buffalo application.

Buffalo Project Setup

  1. Navigate to your $GOPATH

    cd $GOPATH/src/github.com/$USER/
    
  2. Create a new Buffalo project

    buffalo new valibuffalo
    
  3. Change the project directory

    cd valibuffalo
    
  4. Create database for the project

    buffalo db create  --env development
    
  5. Do a test run

      buffalo dev
    

    and go to localhost:3000/

    alt="Initial project screen"

Prepare vali-admin dashboard template files

  1. Go to vali-admin Github page page

  2. Click on Clone or download button

  3. Select Download Zip button to download the compressed source files

    alt="download vali-admin dashboard template files"

  4. Extract the downloaded zip file to a folder of your choice

  5. From the extracted folder, copy all html files in docs folder to templates folder of the project. Make sure to replace existing index.html.

  6. Copy /docs/css/main.css to ./assets/css/main.css

  7. Copy /docs/js/main.js to ./assets/js/main.js

Update assets/css/application.scss

  1. Open assets/css/application.scss and comment out bootstrap import line
  2. Add @import "./main.css"; below font-awesome.css.

    When completed, the file should have the following contents:

    // File: assets/css/application.scss
    // @import "~bootstrap/scss/bootstrap.scss";
    @import "~font-awesome/css/font-awesome.css";
    
    @import "./main.css";
    

Update assets/js/application.js

  1. Open assets/js/application.js and insert require("./main.js"); below require("bootstrap/dist/js/bootstrap.bundle.js");

    After you have completed the above step, the file contents should be similar to the following:

    // File: assets/js/application.js
    require("expose-loader?$!expose-loader?jQuery!jquery");
    require("bootstrap/dist/js/bootstrap.bundle.js");
    
    require("./main.js");
    
    $(() => {
    
    });
    

Update templates/index.html

  1. Open templates/index.html and delete <!DOCTYPE html> and <html lang="en"> opening tags and all contents within the <head> section. Also delete opening <body class="app sidebar-mini rtl"> tag

  2. Scroll down the page and remove the following lines below </main> tag

        <!-- Essential javascripts for application to work-->
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
        <!-- The javascript plugin to display page loading on top-->
        <script src="js/plugins/pace.min.js"></script>
        <!-- Page specific javascripts-->
        <script type="text/javascript" src="js/plugins/chart.js"></script>
    
  3. Move further down the page and delete the Google Analytics script above </body> tag. We retain the charts data script as we will need it as we continue.

  4. Scroll down and remove </body> and </html>closing tags

  5. Open templates/application.html and replace opening <body> tag with <body class="app sidebar-mini rtl">

First Theme Test

From a Terminal, run

```bash
  buffalo dev
```

and go to localhost:3000/

Move Top Nav Header to separate file

  1. Create _app-header-nav.html partial file in templates folder

  2. Move <header> contents in index.htnl starting from <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a> and ending at <\header> to _app-header-nav.html. After this step, your _app-header-nav.html contents should resemble the following extract.

    <!-- Navbar-->
    <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
      <!-- Sidebar toggle button-->
      <a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
      <!-- Navbar Right Menu-->
      <ul class="app-nav">
        <li class="app-search">
            
        ...
    
      </ul>
    </header>
    
  3. Replace href=“index.html” in the _app-header-nav.html file with href=“/”

Move Side Menu Header to Separate File

  1. Create _app-side-nav.html partial file in templates folder

  2. Move all contents (in index.html) starting from <!-- Sidebar menu--> and ending at <\aside> to _app-side-nav.html. After this step, your _app-side-nav.html contents should resemble the following extract.

    <!-- Sidebar menu-->
        <div class="app-sidebar__overlay" data-toggle="sidebar"></div>
        <aside class="app-sidebar">
          <div class="app-sidebar__user">
    
              ...
    
        </aside>   
    
  3. Delete opening <main class="app-content"> tag

  4. Scroll down and also remove </main> closing tag

  5. Replace href=“index.html” in the _app-side-nav.html file with href=“/”

Move Application Title to Separate File

  1. Create _app-title.html partial file in templates folder

  2. Move all contents (in index.html) starting from <div class="app-title"> upto the closing <\div> tag to _app-title.html. After this step, your _app-title contents should resemble the following:

    <div class="app-title">
        <div>
          <h1><i class="<%= task-icon %>"></i> <%= task-title %></h1>
          <p><%= task-desc %></p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
          <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
          <li class="breadcrumb-item"><a href="#"><%= task-title %></a></li>
        </ul>
    </div>  
    

    We have used tags <%= task-icon %>, <%= task-title %> and <%= task-desc %> so that during runtime, the tags will be dynamically rendered.

Update application.html With the Partials

  1. Open templates/application.html
  2. Replace opening <div class="container"> tag in templates/application.html with <main class="app-content"> and replace the closing <\div> with <\main>
  3. Insert <%= partial("app-header-nav.html") %> and <%= partial("app-side-nav.html") %> in application.html below the starting <body> tag. The <%= partial("app-title.html") %> should be placed after <main class="app-content">.

    <body class="app sidebar-mini rtl">
        <%= partial("app-header-nav.html") %>
        <%= partial("app-side-nav.html") %>
    
        <main class="app-content">
          <%= partial("app-title.html") %>
          <%= partial("flash.html") %>
          <%= yield %>
        </main>
    
        <%= javascriptTag("application.js") %>
      </body>
    

Update Route Handlers

  1. Replace contents of actions/home.go with the following:

    // actions/home.go
    package actions
    
    import "github.com/gobuffalo/buffalo"
    
    // HomeHandler is a default handler to serve up
    // a home page.
    func HomeHandler(c buffalo.Context) error {
      c.Set("task-title", "Dashboard")
      c.Set("task-icon", "fa fa-dashboard")
      c.Set("task-desc", "A free and open source Bootstrap 4 admin template")
      return c.Render(200, r.HTML("index.html"))
    }
    
    // ChartsHandler testing dynamic content handling of vali-admin theme
    func ChartsHandler(c buffalo.Context) error {
      c.Set("task-title", "Charts")
      c.Set("task-icon", "fa fa-pie-chart")
      c.Set("task-desc", "Various type of charts for your project")
      return c.Render(200, r.HTML("charts.html"))
    }
    
  2. Add app.GET("/charts", ChartsHandler) in actions/app.go below app.GET("/", HomeHandler).

      // actions/app.go
    
      // Setup and use translations:
      app.Use(translations())
    
      app.GET("/", HomeHandler)
      app.GET("/charts", ChartsHandler)
    

Setting up Charts

  1. Install Charts plugin by running

      yarn add chart.js
    

    on the terminal window

  2. Moodfy application.js to include require("chart.js"); before require("./main.js");

    // File: assets/js/application.js
    require("expose-loader?$!expose-loader?jQuery!jquery");
    require("bootstrap/dist/js/bootstrap.bundle.js");
    
    require("chart.js");
    require("./main.js");
    
    $(() => {
    
    });
    
    

Customize Custom Page Scripts

The index.htnl page has a custom script. As it is now, the script will render before application.js in the browser. This will prevent the charts from displaying. If you inspect the page in the browser, you will notice a ReferenceError $ is not defined.

To remedy the error and display the charts, use the following steps:

  1. Enclose the page custom script in index.html in a contentFor("pageScript") helper.

    <% contentFor("pageScript") { %>
        <script>
            ...  
    
          var ctxl = $('#lineChartDemo').get(0).getContext('2d');
          var lineChart = new Chart(ctxl, {type:'line', data: data});
            
          var ctxp = $('#pieChartDemo').get(0).getContext('2d');
          var pieChart = new Chart(ctxp, {type: 'pie', data: pdata});
    
        </script>
    <% } %>
    
  2. In application.html layout file, we add a contentOf("pageScript") helper below <%= javascriptTag("application.js") %>.

    <body class="app sidebar-mini rtl">
    <%= partial("app-header-nav.html") %>
    <%= partial("app-side-nav.html") %>
    
    <main class="app-content">
      <%= partial("app-title.html") %>
      <%= partial("flash.html") %>
      <%= yield %>
    </main>
    <%= javascriptTag("application.js") %>
    
    <%= contentOf("pageScript") %>
    </body>
    

If we now run

    buffalo dev

and go to localhost:3000/. The index page should now be displaying the charts.

All that now remains is to update all other pages to conform to the changes that we have implemented to the index.html and to add route handlers for these pages.

The full source code of this example is available on Github.