Bootstrap is a css framework that can be added to our rails application. First of all, let’s start from the scratch and create a project that we will be using in this project. As usual create a Rail Project and name it what you want it to be $ rails new (what you want it to be), in this article, i will be using preshy - $ rails new preshy. Be sure to add the dependencies you need to add both to your database.yml and in your gemfile and run bundle install and bundle update respectively. Check this link for more info.

Then run $ rails generate scaffold Article title:string description:text and after which you will run the command $ rails db:migrate so as to properly have your database and table to be well created. We used scaffold here because like you may already know scaffold is a Ruby on Rails command that houses the three main building blocks of rails - Models, Views and Controllers (MVC). These would be automatically generated and added to our project.

Now let’s proceed to our gemfile and remove your gem ‘bootstrap’ and gem ‘jquery-rails’ and run the command $ bundle install and $ bundle update respectively. But if you do not have the above mentioned dependencies as i do not have it in my own gemfile, feel free to ignore the last gemfile steps above. We are removing the bootstrap and jquery gem from our gemfile because rails comes with the webpacker gem that combines the JS files into one.

We will achieve that by using yarn. Yarn works with webpacker and allows us to add different JavaScript libraries. so you can add yarn with as many JavaScript libraries you want to add separating them with a space. For this article we will be adding yarn with bootstrap jQuery and popper.js.

Yarn will have all the packages added, wrap them up and have them installed in our application. It would install and show us what version of the dependencies that we are working with. $ yarn add bootstrap jquery popper.js

Alright let’s proceed to our vs code, then checkout in your application, go to the config, open the webpacker folder and check on the environment.js file and then have these block of codes added in the file in between const { environment } = require(‘@rails/webpacker’) and module.exports = environment. It should be written thus:

Next , we will go to our app -> javascript -> packs -> application.js , inside this application.js file, there are some automatically generated files by our rails 6 application.

JQuery will not be required in the application.js environment since we have already added that in our environment.js. What we will need to add here is to import our bootstrap. This is done by simply adding import ‘bootstrap’ at the top of the generated syntax in that file by the rails application.

#bootstrap #bulma #frontend #frontend-development #web-development #backend #ruby-on-rails #ruby