Step by step integrate Bootstrap with Webpacker in Rails 6
Install Ruby 2.6.3 You can install Ruby 2.6.3 through using RVM:
rvm install 2.6.3
Install Rails:
To install Rails, we use the gem install command provided by RubyGems:
gem install rails -v 6.0.2.1
Check Rails version after installing Rails:
rails --version
=> Rails 6.0.2.1
If it return something like ‘Rails 6.0.2.1’, you can continue creating a new Rails application.
Create a new Rails application
rails new bootstrap-in-rails6 --version=6.0.2.1
After creating a blog application, switch to its folder
cd bootstrap-in-rails6
Install Gems for our application:
bundle install
Starting up the Web Server:
rails server
To see application, open your browser and navigate to http://localhost:3000/
Bootstrap is the most popular front-end component library, which helps we build responsive, mobile-first projects on the web.
It helps we quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Webpack: Webpack is the popular JavaScript tool used for managing and bundling JavaScript code.
Webpacker: Webpacker is a gem that wraps Webpack to use in Rails application.
In Rails 6, Webpacker is the default JavaScript compiler. It means that all the JavaScript code will be handled by Webpacker instead of through assets pipeline. You can see that in layouts/application.html.erb:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 4.x.x+ to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app/assets). However, it is possible to use Webpacker for CSS, images and fonts assets as well, in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
Step 1: Install Bootstrap through yarn
yarn add bootstrap
Step 2: Install Bootstrap dependencies are: jQuery and popper.js
yarn add jquery popper.js
Step 3: Import JavaScript Bootstrap and dependencies to Webpacker
# app/javascript/packs/application.js
import "jquery";
import "popper.js";
import "bootstrap";
Step 4: Import CSS Bootstrap to Webpacker
# In app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
# In app/javascript/packs/application.js
import "../stylesheets/application";
Finally, see the folder structure:
app/javascript
├── channels
├── packs
│ └── application.js
└── stylesheets
└── application.scss
In this article, I guide you step by step install Bootstrap 4 with Webpacker in Rails 6 application.
Full Code on Github: https://github.com/thanhluanuit/bootstrap-in-rails6
References:
Nguồn: https://luanotes.com
#bootstrap #webpack #rails #ruby-on-rails