DEV Community

Yulia Garanok for datarockets

Posted on • Updated on

Easy integration Rails with AdminLTE template using bower or npm

AdminLTE is an open-source admin dashboard & control panel theme based on Bootstrap 3. It provides a range of responsive, reusable, and commonly used components. In this post, I’ll integrate AdminLTE to Rails application using Bower and Node package manager (npm).

AdminLTE dashboard

Checklist

  1. Install package using npm
  2. General instruction for integration themes

Install application

$ rails new admin_lte_todo --skip-turbolinks
$ cd admin_lte_todo
$ rails g controller dashboard index

config/routes.rb
root 'dashboard#index'
Enter fullscreen mode Exit fullscreen mode

Let’s install slim

Usually, in development, I use slim as a templating language. So let’s install slim in our application.

Gemfile
gem 'slim-rails'
Enter fullscreen mode Exit fullscreen mode

And change .erb templates to .slim. To make that we can use html2slim utility.

Bower Rails config

1.Install bower using node package utility.

$ npm install -g bower`
Enter fullscreen mode Exit fullscreen mode

2.Configure bower to install packages to valid /vendor path.

.bowerrc
{
“directory” : “vendor/assets/components”
}
Enter fullscreen mode Exit fullscreen mode

3.Initialize bower.json file.

bower.json
{
“name”: “admin_lte_todo”, “dependencies”: {
}
}
Enter fullscreen mode Exit fullscreen mode

4.Configure rails application to work with bower.

config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join(‘vendor’, ‘assets’, ‘components’)
Enter fullscreen mode Exit fullscreen mode

To deploy the application with bower’s assets, we can use capistrano-bower gem.

Install AdminLTE with Bower

Time to install AdminLTE plugin.

Add AdminLTE to bower.json file.

bower.json
"dependencies": {
  "admin-lte": "*"
}
Enter fullscreen mode Exit fullscreen mode

Instead of “*” you can set the latest release version. On the date of publishing, it was:

bower.json
  "admin-lte": "2.3.6"
Enter fullscreen mode Exit fullscreen mode

Install AdminLTE plugin.

$ bower install
Enter fullscreen mode Exit fullscreen mode

Node package manager

Also, you can install AdminLTE template using Node package manager (npm).

1.Initialize package.json file.

$npm init
Enter fullscreen mode Exit fullscreen mode

2.Configure rails application to work with npm libs.

config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join(‘node_modules’) 
Enter fullscreen mode Exit fullscreen mode

To deploy the application with npm, use capistrano/npm gem.

Install AdminLTE with NPM

You should add dependencies to package.json file to install AdminLTE with NPM:

package.json
"dependencies": {
  "admin-lte": "2.3.5"
}
Enter fullscreen mode Exit fullscreen mode

And run the command:

$npm install
Enter fullscreen mode Exit fullscreen mode

Integrate AdminLTE assets to Rails application

When integrating some template the first thing you should start with is dependencies configuration.

For the AdminLTE theme, dependencies are described in the documentation.

They are Bootstrap 3 and jQuery. jQuery is installed by default in each Rails application and you can verify it in the default application.js file.

application.js
//= require jquery
//= require jquery_ujs
Enter fullscreen mode Exit fullscreen mode

Let’s include Bootstrap 3:

application.js
//= require admin-lte/bootstrap/js/bootstrap

application.css
 *= require admin-lte/bootstrap/css/bootstrap
Enter fullscreen mode Exit fullscreen mode

After including dependencies, we can include AdminLTE assets to the project. Usually, template sources are stored in the dist path.

application.js
//= require admin-lte/dist/js/app.js

application.css
 *= require admin-lte/dist/css/AdminLTE
 *= require admin-lte/dist/css/skins/skin-blue
Enter fullscreen mode Exit fullscreen mode

In AdminLTE skins path saved the color theme for a template. One project can include any theme.

After all the action we get the following assets files.

application.js
//= require jquery
//= require jquery_ujs
//= require admin-lte/bootstrap/js/bootstrap
//= require admin-lte/dist/js/app.js

application.css
 *= require admin-lte/bootstrap/css/bootstrap
 *= require admin-lte/dist/css/AdminLTE
 *= require admin-lte/dist/css/skins/skin-blue
Enter fullscreen mode Exit fullscreen mode

Integrate AdminLTE template

For example, use this link to integrate AdminLTE template.

Create application.html file with the source code of starter page.
Change application.html.slim file using this template, for that:

  1. Convert application.html to application.html.slim using html2slim utility.
$ html2slim app/views/layouts/application.html app/views/layouts/application.html.slim`
Enter fullscreen mode Exit fullscreen mode

2.Change header on application.html.sli template.

application.html.slim
    head
    title AdminLTE example
    = stylesheet_link_tag “application”, media: “all”
    = javascript_include_tag “application”
    = csrf_meta_tags
Enter fullscreen mode Exit fullscreen mode

3.Remove app/views/layouts/application.html file.
4.Remove scripts on end of app/views/layouts/application.html.slim file.

Now we can start rails server and check AdminLTE rails template.

$ rails s
Enter fullscreen mode Exit fullscreen mode

At last, fixing icons and fonts. For this, add styles to application.html.slim.

application.html.slim
= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
= stylesheet_link_tag "http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css"
Enter fullscreen mode Exit fullscreen mode

Hallelujah! We integrated AdminLTE template to rails application.

Summary and the best advice ever

This tutorial will help you to install any bootstrap template. I took AdminLTE template integration as an example. To add bootstrap to rails you should set the following steps:
1) install a package with some package manager,
2) install and include dependencies,
3) include template assets.

And finally, the main advice from me is to read the documentation carefully.

It remains for me to wish you success in your work!


Easy integration Rails with AdminLTE template blog post was written by the datarockets' lead developer Roman Dubrovsky for datarockets' blog.

Top comments (0)