DEV Community

Brayan Vasquez
Brayan Vasquez

Posted on

Integrate AndminLTE with Ruby On Rails 6

#rails #ruby #webdev #webpack

Hi everyone!, This is my first post in the DEV community, and also my first post in English (my native language is Spanish). So first, I want to apologize if I have errors in my writing.

In this post, I want to share with you a little guide that will show you how to integrate the AdminLTE template with Ruby on Rails 6. It's just a guide that I made for myself, but I want to share it with you.

Requirements

  • Ruby (I use ruby 2.7.1p83)
  • Ruby on Rails (I use Rails 6.0.3.2)
  • NodeJS.
  • Yarn.

Note: I advise you to install ruby using a version manager like rvm or rbenv. Also, I recommend the GoRails Tutorial that will guide you throughout the process.

Step 1: Setup Project

We are going to install the tools we need, before initializing the rails project.

# Using npm to install yarn
# You may have to run this command using sudo on Linux
npm install --global yarn

# Installing ruby using rvm. However, you can use the tool that you prefer
rvm install 2.7

# List ruby versions installed
rvm list

# Use a specific ruby version
rvm use 2.7

# Install bundler
gem install bundler

# Install Ruby on Rails v6
gem install rails -v 6.0.3.2
Enter fullscreen mode Exit fullscreen mode

You can check the installed tools with the following commands.

# Checking yarn version
yarn -v

# Checking ruby version
ruby -v

# Checking bundler version
bundle -v

# Checking bundle version version
rails -v
Enter fullscreen mode Exit fullscreen mode

Once you checked that you have the tools installed. Let's move to create the rails project.

rails new adminlte-rails-template
Enter fullscreen mode Exit fullscreen mode

Step 2: Setup Controller

Here, we are going to create a controller in which we will place the AdminLTE template.

# First you have to move to the app directory
cd adminlte-rails-template/

# Generate a controller only with the action index
rails generate controller home index
Enter fullscreen mode Exit fullscreen mode

Set the default Url in the config/routes.rb file.

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

Run the project.

rails server
Enter fullscreen mode Exit fullscreen mode

And you will see the following.

Alt Text

Step 3: Setup JQuery and Bootstrap

AdminLTE depends on JQuery and Bootstrap, so we have to install them. Rails 6 comes with webpacker, so we can install these dependencies using npm or yarn.

# For AdminLTE 2.4
yarn add bootstrap@^3.3.7 jquery@^3.2 popper.js@^1.16.1

# For AdminLTE 3
yarn add bootstrap jquery popper.js
Enter fullscreen mode Exit fullscreen mode

Configure the Jquery and Popper aliases in the config/webpack/environment.js file.

const {environment} = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment
Enter fullscreen mode Exit fullscreen mode

Import bootstrap into the app/javascript/packs/application.js file.

// app/javascript/packs/application.js
// ....
import 'bootstrap';

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
});
// ....
Enter fullscreen mode Exit fullscreen mode

Add the following to the config/webpacker.yml file.

resolved_paths: ['app/assets']
Enter fullscreen mode Exit fullscreen mode

Create the directory app/javascript/stylesheets/ to put the style files here. And to use webpack to compile these assests.

mkdir app/javascript/stylesheets
Enter fullscreen mode Exit fullscreen mode

Create the app/javascript/stylesheets/application.scss file.

touch app/javascript/stylesheets/application.scss
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 2.4

Import bootstrap css files into the app/javascript/packs/application.js file. I had some issues importing bootstrap into the app/javascript/stylesheets/application.scss file; However, since we are using webpack, we can import css files into a js file.

Note: You can also use sprockets for this step to avoid importing css files into js files.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme';
import '../stylesheets/application'; // This file will contain your custom CSS
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 3.0

Import bootstrap into the app/javascript/stylesheets/application.scss file.

// app/javascript/stylesheets/application.scss
@import "bootstrap";
Enter fullscreen mode Exit fullscreen mode

Import the styles into the app/javascript/packs/application.js file.

// app/javascript/packs/application.js
// ......
import '../stylesheets/application'; // This file will contain your custom CSS
Enter fullscreen mode Exit fullscreen mode

Now, you can run the project again.

rails server
Enter fullscreen mode Exit fullscreen mode

And, look that the fonts have changed, using the bootstrap font styles.

Alt Text

Step 4: Install AdminLTE template

Install the adminlte package.

# AdminLTE 2.4 package
yarn add admin-lte@^2.4.18

# AdminLTE 3.0 package
yarn add admin-lte@^3.0
Enter fullscreen mode Exit fullscreen mode

Import the AdminLTE scripts into the app/javascript/packs/application.js file.

// app/javascript/packs/application.js
....
require('admin-lte');
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 2.4

Import the AdminLTE stylesheets into the app/javascript/packs/application.js file.

/* For AdminLTE 2.4 */
import "admin-lte/dist/css/AdminLTE.css";
import "admin-lte/dist/css/skins/_all-skins.css";
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 3.0

Import the AdminLTE stylesheets into the app/javascript/stylesheets/application.scss file.

/* For AdminLTE 3 */
@import "admin-lte";
Enter fullscreen mode Exit fullscreen mode

We also need to install font-awesome.

# For AdminLTE 2.4
yarn add font-awesome@4.7.0

# For AdminLTE 3
yarn add @fortawesome/fontawesome-free
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 2.4

Import fontawesome styles into the app/javascript/packs/application.js file.

/* For AdminLTE 2.4 */
import "font-awesome/css/font-awesome.css";
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 3.0

Import fontawesome styles into app/javascript/stylesheets/application.scss

/* For AdminLTE 3 */
@import '@fortawesome/fontawesome-free';
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 3, import fontawesome scripts into app/javascript/packs/application.js

// ....
import "@fortawesome/fontawesome-free/js/all";
Enter fullscreen mode Exit fullscreen mode

Step 5: Setup Layout

Change the app/views/layouts/application.html.erb file content.

For AdminLTE 2.4

<!DOCTYPE html>
<html>
  <head>
    <title>Rails6 AdminLTE 2.4</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="hold-transition skin-blue sidebar-mini">
      <div class="wrapper">
        <%= render "base/header" %>
        <%= render "base/sidebar" %>

        <div class="content-wrapper">
          <section class="content-header">
            <h1>
              Page Header
              <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
              <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
              <li class="active">Here</li>
            </ol>
          </section>

          <section class="content container-fluid">
            <%= yield %>
          </section>
        </div>

        <%= render "base/footer" %>
        <%= render "base/control_sidebar" %>
      <div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

For AdminLTE 3

<!DOCTYPE html>
<html>
  <head>
    <title> Rails6 AdminLTE 3.0</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body data-scrollbar-auto-hide="n" class="hold-transition sidebar-mini layout-fixed">
      <div class="wrapper">
        <%= render "base/header" %>
        <%= render "base/sidebar" %>

        <div class="content-wrapper">
          <div class="content-header">
            <div class="container-fluid">
              <div class="row mb-2">
                <div class="col-sm-6">
                  <h1 class="m-0 text-dark">Starter Page</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                  <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Starter Page</li>
                  </ol>
                </div><!-- /.col -->
              </div><!-- /.row -->
            </div><!-- /.container-fluid -->
          </div>

          <div class="content container-fluid">
            <div class="container-fluid">
              <%= yield %>
            </div>
          </div>
        </div>

        <%= render "base/footer" %>
        <%= render "base/control_sidebar" %>
      <div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Structuring views

Create the folder app/views/base.

mkdir app/views/base
Enter fullscreen mode Exit fullscreen mode

In the app/views/base, we are going to create a few files.

# AdminLTE header layout
touch app/views/base/_header.html.erb

# AdminLTE sidebar layout
touch app/views/base/_sidebar.html.erb

# AdminLTE footer layout
touch app/views/base/_footer.html.erb

# AdminLTE control-sidebar layour
touch app/views/base/_control_sidebar.html.erb
Enter fullscreen mode Exit fullscreen mode

We will use the starter.html page to structure our views. You can find the starter page in node_modules/admin-lte/starter.html.

  • Copy the class="main-header" section into the app/views/base/_header.html.erb file.
  • Copy the class="main-sidebar ..." section into the app/views/base/_sidebar.html.erb file.
  • Copy the class="main-footer" section into the app/views/base/_footer.html.erb file.
  • Copy the class="control-sidebar ..." and class="control-sidebar-bg" sections into the app/views/base/_control_sidebar.html.erb.

Finally, Run the project again.

rails server
Enter fullscreen mode Exit fullscreen mode

AdminLTE 2.4
Alt Text

AdminLTE 3.0
Alt Text

Final Words

If you read the whole post, thanks a lot. And again, sorry if I had some writing mistakes, I will try to improve that. Also, I'm open to any comments or suggestions.

You can find the code of this guide here. And, you can find the Rails 5 version in my blog, Integrate Ruby on Rails 5 and AdminLTE.

Thanks Again!.

Top comments (11)

Collapse
 
inyerade profile image
inyerade •

Good post, helped mea lot. The only change that I have to do is for production, that does notload the adminlte CSS and I has to add in the layout

stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
Enter fullscreen mode Exit fullscreen mode

I do not know if I miss other think but this solve my problem.

Collapse
 
danielmoncada14 profile image
DANIEL MONCADA •

Hey, thank you very much for the contribution, I have a problem, I'm using rails 6.1.2 and ruby 2.7.2 i have done all the steps and the website didn't found the adminlte CSS, JS and images it appears on text plain.

I'm using W10.

Hope you can help me.

Greetings

Collapse
 
williambsb profile image
William Alencar •

Thank you a lot and dont worry with english ...its very clear ( POrtuguese Native speaker here from Brasil )
I am trying to use admin-lte 3 in a project but even with this amazing instructions I am still getting errors due babel .

I am having
ERROR in ./app/javascript/packs/application.js
Module build failed (from ./.yarn/virtual/babel-loader-virtual-5e1e3f47a6/0/cache/babel-loader-npm-8.2.3-855681b984-78e1e1a919.zip/node_modules/babel-loader/lib/index.js):

Any ideia ?

Collapse
 
efrapp profile image
Efrain Pinto Ponce •

Hey Brayan,
Thanks for this great post. It put me in the right direction!

Collapse
 
brayvasq profile image
Brayan Vasquez •

I'm glad you found it useful 😃.

Collapse
 
silvaricardo1997 profile image
RICARDO MOREIRA •

Hey Brayan,
Thanks for the post! helped me a lot!!!

Collapse
 
lcostam profile image
Leandro Miranda •

Amazing post! It helped me a lot !!

Collapse
 
satyamoortithinkbiz profile image
SatyamoortiThinkbiz •

Hello,
Where can i place all the plugins and pages available in Admin LTE3 theme inside my rails app?
I am using old rails version 4.8

Collapse
 
brayvasq profile image
Brayan Vasquez • • Edited

Hi!. If you are using webpacker v4.x, you can install the packages using npm or yarn, and import these packages as we did in this guide with bootstrap.

If you are not using webpacker, you can look for a gem that does what you want to do.

You can also add libraries or plugins manually, like in this guide Integrate Ruby on Rails 5 and AdminLTE. However, you must be careful with the licenses.

Collapse
 
marcelleteri profile image
Marcel Leteri • • Edited

Great effort! Thanks!!
Any plans of posting a tutorial where you use the AndminLTE UI to show real data from the database?
Cheers

Collapse
 
satyamoortithinkbiz profile image
SatyamoortiThinkbiz •

Hey, Did you found any way for this?
Where can we keep all plugins in rails app?

Read next

chabbasaad profile image

Tools & Extensions for Vue JS

Chabba Saad -

tapuchandramojumder profile image

Understanding valueOf() and toString() in JavaScript

tapuchandramojumder -

andrepolischuk profile image

How use Renovate Bot on self-hosted GitLab

Andrey Polischuk -

hasincodes profile image

My First Full-Stack Project ZeusConnect

Hasin Raiyan -