Tuesday, 18 January 2022
Logo
     
Home > Articles > Setup Bootstrap In Rails 6 With Webpacker For Development And Production
article_img

Setup Bootstrap In Rails 6 With Webpacker For Development And Production

frontend rubygems rails    8 months Ago     224   91   Like

This is a documentation on how to setup Bootstrap 4 in Rails 6 using Webpacker. As the framework shifts away from sprockets and the asset pipeline to embrace the dominating methodology of handling frontend affairs in the Javascript world that is webpack, we have to adapt along.
The way to setup a css framework to bootstrap your application has undergone a revamp, and this article seeks to cover the essential steps to set it up.

Pre-requisites

This article will assume you have set up all the required tools required for a typical Rails 6 application.

The main extra tool you will need as compared to previous versions of Rails is the yarn package manager. You can install yarn on your computer via various ways based on your preference and your OS.

We will not be covering it in this article.

Setting Up Bootstrap

With the shift in paradigm of handling front end assets, we no longer install front end libraries using gems. In the past, these gems are merely wrappers around the Javascript libraries and files which present a number of problems.

First, the latest changes in the Javascript world will take some time to propagate into the Rails realm.

Second, having an intermediate wrapper increase the potential points of failure during the wrapping process.

Third, we are really dependent on the angels who are working on these wrappers. If they do not update the gems frequently, we are stuck with the old features. This can be frustrating if you are waiting for a certain bug fix or a new feature that is already available in the latest release.

To install bootstrap, run this command.

yarn add bootstrap jquery popper.js

# for bootstrap 5.0
yarn add bootstrap jquery @popperjs/core

This command will automatically install the latest bootstrap package in the yarn registries and add its dependency entry and version in your package.json file. Jquery and popper.js are libraries that bootstrap depends on, especially in their Javascript department.


This Site is all about collection of best resources

Users able to write own articles or share the resources they know

If you found any copy right issues, kindly CONTACT US. will take Immediate Action.
Subscribe To Us

Busy At Work?? Not Having Time To Know Whats Happening In Ruby World??

We will Send You Weekly Notifications About News, Jobs, Articls, Conferences etc..

Subscribe Now