AdminLTE 3.2.0 responsive administration template based on
- Boostrap 4.6
- JS/jQuery plugin
rails new adminlte-rails -j esbuild -c bootstrapgem 'foreman', github: 'ddollar/foreman'
after that we can start our project like
./bin/dev
rails generate controller home index
and add changes to config/routes.rb
root 'home#index'yarn add admin-lte@^3.2.0 jquery
yarn remove bootstrap
yarn add bootstrap@4.6.2copy body tag from node_modules/admin-lte/starter.html
to app/view/layouts/application.html.erb
add below line to app/assets/stylesheets/application.bootstrap.scss
@import 'dist/css/adminlte.css';add below line to app/assets/config/manifest.js:
//= link_tree ../../../node_modules/admin-lte/dist/img
and change tags
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">to
<%= image_tag "dist/img/AdminLTELogo.png", alt: "AdminLTE Logo", class: "brand-image img-circle elevation-3", style: "opacity: .8" %>
go to https://cdnjs.com/libraries/font-awesome
copy and insert to layout like next:
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
</head>
create file app/javascript/add_jquery.js with next content:
import jquery from 'jquery'
window.jQuery = jquery
window.$ = jqueryand add below lines to app/javascript/application.js
import './add_jquery'
import 'admin-lte'and add below lines to config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("node_modules/admin-lte/")
Rails.application.config.assets.precompile += %w[dist/css/* dist/js/*.js]