Morioh
Login
Hoang Kim

Hoang Kim

4 years ago

Using Bootstrap with Webpacker in Rails 6

Step by step integrate Bootstrap with Webpacker in Rails 6

What’ll we do:

  • Create a new Rails 6 application
  • What is Bootstrap?
  • What is Webpack and Webpacker?
  • Installing Bootstrap with Webpacker in Rails 6

Create a new Rails 6 application

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/

What is Bootstrap?

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.

What is Webpack and Webpacker?

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.

Installing Bootstrap with Webpacker

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

  • Add a folder name stylesheets in app/javascript/
  • Add CSS file application.scss to app/javascript/stylesheets
  • Add below code to import Bootstrap CSS:
# In app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
  • Import application.scss to application.js
# In app/javascript/packs/application.js
import "../stylesheets/application";

Finally, see the folder structure:

app/javascript
├── channels
├── packs
│   └── application.js
└── stylesheets
    └── application.scss

Conclusion

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

Using Bootstrap with Webpacker in Rails 6
94.25 GEEK