Easy integration Rails with AdminLTE template using bower or npm
Tags: rails, npm
Published: 2020-08-17 19:20:19

[AdminLTE](https://adminlte.io/) 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](https://datarockets.com/wp-content/uploads/2018/08/Screen-Shot-2016-09-12-at-15.38.42-760x396.png)

#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'
```
#Let’s install slim

Usually, in development, I use [slim](http://slim-lang.com/) as a templating language. So let’s install slim in our application.
```
Gemfile
gem 'slim-rails'
```
And change .erb templates to .slim. To make that we can use [html2slim utility](https://github.com/slim-template/html2slim).
#Bower Rails config

1.Install bower using node package utility.
```
$ npm install -g bower`
```
2.Configure bower to install packages to valid /vendor path.
```
.bowerrc
{
“directory” : “vendor/assets/components”
}
```
3.Initialize bower.json file.
```
bower.json
{
“name”: “admin_lte_todo”, “dependencies”: {
}
}
```
4.Configure rails application to work with bower.
```
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join(‘vendor’, ‘assets’, ‘components’)
```

To deploy the application with bower’s assets, we can use [capistrano-bower](https://github.com/platanus/capistrano-bower) gem.

#Install AdminLTE with Bower

Time to install [AdminLTE plugin](https://github.com/ColorlibHQ/AdminLTE).

Add AdminLTE to **bower.json** file.
```
bower.json
"dependencies": {
  "admin-lte": "*"
}
```
Instead of “*” you can set the latest release version. On the date of publishing, it was:
```
bower.json
  "admin-lte": "2.3.6"
```
Install AdminLTE plugin.
```
$ bower install
```

#Node package manager

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

1.Initialize package.json file.
```
$npm init
```
2.Configure rails application to work with npm libs.
```
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join(‘node_modules’) 
```

To deploy the application with npm, use [capistrano/npm gem](https://github.com/capistrano/npm).

#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"
}
```
And run the command:
```
$npm install
```
#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](https://adminlte.io/themes/AdminLTE/documentation/index.html#dependencies).

They are [Bootstrap 3](https://getbootstrap.com/docs/3.3/) and [jQuery](https://jquery.com/). 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
```
Let’s include Bootstrap 3:
```
application.js
//= require admin-lte/bootstrap/js/bootstrap

application.css
 *= require admin-lte/bootstrap/css/bootstrap
```
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
```
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
```
#Integrate AdminLTE template

For example, [use this link](https://adminlte.io/themes/AdminLTE/starter.html) 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`
```
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
```
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
```
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"
```
Hallelujah! We integrated AdminLTE template to rails application.

![](https://datarockets.com/wp-content/uploads/2018/08/Screen-Shot-2016-09-12-at-15.34.58-760x401.png)

#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](https://datarockets.com/blog/integration-rails-with-adminlte-template/) blog post was written by the datarockets' lead developer **Roman Dubrovsky** for datarockets' blog.