Add Custom Dashboard Template to Buffalo Application

Kagunda JM
Aug 3, 2018 · 6 min read
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

2. Create a new Buffalo project

3. Change the project directory

4. Create database for the project

5. Do a test run

and go to localhost:3000/

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

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 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:

Update 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:

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

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

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.

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.

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”> up to the closing <\div> tag to _app-title.html. After this step, your _app-title.html contents should resemble the following:

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”>.

Update Route Handlers

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

2. Add app.GET(“/charts”, ChartsHandler) in actions/app.go below app.GET(“/”, HomeHandler.

Setting up Charts

1. Install Charts plugin by running

on the terminal window

2. Update application.js to include require(“chart.js”); before 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.

2. In application.html layout file, we add a contentOf(“pageScript”) helper below <%= javascriptTag(“application.js”) %>.

If we now run the application

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.

Kagunda JM

Written by

Software Developer