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
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
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
Once you checked that you have the tools installed. Let's move to create the rails project.
rails new adminlte-rails-template
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
Set the default Url in the config/routes.rb
file.
# config/routes.rb
root 'home#index'
Run the project.
rails server
And you will see the following.
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
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
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()
});
// ....
Add the following to the config/webpacker.yml
file.
resolved_paths: ['app/assets']
Create the directory app/javascript/stylesheets/
to put the style files here. And to use webpack to compile these assests.
mkdir app/javascript/stylesheets
Create the app/javascript/stylesheets/application.scss
file.
touch app/javascript/stylesheets/application.scss
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
For AdminLTE 3.0
Import bootstrap into the app/javascript/stylesheets/application.scss
file.
// app/javascript/stylesheets/application.scss
@import "bootstrap";
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
Now, you can run the project again.
rails server
And, look that the fonts have changed, using the bootstrap font styles.
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
Import the AdminLTE scripts into the app/javascript/packs/application.js
file.
// app/javascript/packs/application.js
....
require('admin-lte');
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";
For AdminLTE 3.0
Import the AdminLTE stylesheets into the app/javascript/stylesheets/application.scss
file.
/* For AdminLTE 3 */
@import "admin-lte";
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
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";
For AdminLTE 3.0
Import fontawesome styles into app/javascript/stylesheets/application.scss
/* For AdminLTE 3 */
@import '@fortawesome/fontawesome-free';
For AdminLTE 3, import fontawesome scripts into app/javascript/packs/application.js
// ....
import "@fortawesome/fontawesome-free/js/all";
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>
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>
Structuring views
Create the folder app/views/base
.
mkdir app/views/base
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
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 theapp/views/base/_header.html.erb
file. - Copy the
class="main-sidebar ..."
section into theapp/views/base/_sidebar.html.erb
file. - Copy the
class="main-footer"
section into theapp/views/base/_footer.html.erb
file. - Copy the
class="control-sidebar ..."
andclass="control-sidebar-bg"
sections into theapp/views/base/_control_sidebar.html.erb
.
Finally, Run the project again.
rails server
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)
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
I do not know if I miss other think but this solve my problem.
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
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 ?
Hey Brayan,
Thanks for this great post. It put me in the right direction!
I'm glad you found it useful 😃.
Hey Brayan,
Thanks for the post! helped me a lot!!!
Amazing post! It helped me a lot !!
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
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.
Great effort! Thanks!!
Any plans of posting a tutorial where you use the AndminLTE UI to show real data from the database?
Cheers
Hey, Did you found any way for this?
Where can we keep all plugins in rails app?