TheLazy.Dev
Portfolio GitHub

Blog

rails |ruby |webdev |webpack

Integrate AndminLTE with Ruby On Rails 6

brayvasq

Brayan Vasquez

Posted on July 27, 2020

Integrate AndminLTE with Ruby On Rails 6

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

💖 💪 🙅 🚩
brayvasq
Brayan Vasquez

Posted on July 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Integrate AndminLTE with Ruby On Rails 6
rails Integrate AndminLTE with Ruby On Rails 6

July 27, 2020