How to Install Bootstrap 5 on Rails 7
How Relevant is the Complete Ruby on Rails Developer Course in 2022?
The course was last updated 2 years ago (as far as I can see) and the content was updated from Rails 5 to Rails 6. At time of writing we have Rails 7 and this post continues my experience of doing the course in 2022 when it was last updated in 2020.
I mentioned ‘The Complete Ruby on Rails Developer Course” in the previous blog. This course is divided into 15 sections. The first 3 sections give an introduction to Ruby (the language), instructions on how to install Ruby on your computer, some teaching on coding with Ruby, and then how to install Rails on top of Ruby so you have “Ruby on Rails”.
So far the amount of out-of-date content isn’t too much. I did have some questions and posted these in the Q&A section. I also joined the Discord. Although the Q&A section is supposed to be checked daily by tutors, I didn’t get any response for several days for a couple of the questions I posted, and no answer at all on a third question. On the Discord server many people had left, complaining that they didn’t get any help.
On the positive side, I did find answers to some of my other questions in the previous answers given to questions from others. So check those first.
Summary of Section 4: CRUD
Create. Read. Update. Delete.
In this section we really get into understanding scaffold generation in Rails, and I did enjoy it. Again, there were several times where the instructions didn’t work but I found solutions through previously asked questions.
Heroku
Towards the end of the section the tutor provides instructions on how to deploy your newly coded Rails app onto the Internet, by utilizing some free resources kindly provided by Heroku. Here is where I began to encounter more issues and my progress through the course really slowed down as I had to spend so much time (days!) trying to figure out solutions. I’ll detail my Heroku experience in a different post.
Section 5: Styling
In this section the course looks at using an excellent free styling resource called Bootstrap, to style your ROR app. The problem is all versions referred to in the course are now out-of-date! As I look into it more and more, it appears that Rails have taken a different approach with Rails 7 than that of versions 6 and 5. So, it isn’t simply a tweak of the instructions provided for 6 and 5.
Using Bootstrap 5 on Rails 7
Ok, where to start. Of course I began with an online search, focusing on recent results. The first result was more complex than I thought and appeared to be someone explaining their method of getting it to work, rather than following an established method. They used Sprockets and left up a comment (which they then put a line through) that “Sprockets will not disappear soon”, and later admitting in a follow-up that Sprockets “will probably be replaced… in Rails 8”.
I wanted a permanent solution so looked further. The next was a blog post, and the method used was completely different to the first! I admit this shocked me. I presumed everyone would use a standard method with minor variation. This was frustrating. Which version of instructions is best? I had no idea.
Installation into New Rails App vs Existing App
The two methods already discussed look at how to add Bootstrap to a Rails app right from the outset of initiating a new project. However, following the ROR Developer Course I was trying to add Bootstrap to an existing Rails app. How could I do that?
The first result returned by search seemed promising “How to add bootstrap 5 to an existing Rails 7 app“. They even provided a one-line method for how to install Bootstrap into a new Rails app:
$rails new app-name -j esbuild –css cssbundling-rails
This seemed promising! A one-liner was what I expected should be the method for adding Bootstrap. Now, how about adding to an existing app? Ugh. Uday explained in the blog that the one-liner didn’t work for an existing app, and then writes out a whole load of code needed to get it working. They even explain they reached out to forums to try and get it to work, and got contacted by the inventor of Ruby on Rails, David Heinemeier Hansson who gave a fix. Uday’s blog was written 5 months ago (at time of typing this). Is there a more simpler method yet? I kept searching.
CDN vs Installation
Then I found a really short video by a great YT channel called GoRails titled Rails for Beginners Part 7:Adding Bootstrap CSS & Javascript. The video was only 2 minutes 43 seconds long! I easily followed along and by the end had Bootstrap working in my existing project – both the CSS and JavaScript.
It appeared from my travel through these websites that a test they used to see if the integration of Bootstrap in Rails was successful, was installation and use of a navigation bar as it would use both the CSS and JavaScript. By the end of the 2 minute video by GoRails I had the Bootstrap 5 navigation bar working perfectly within my Rails 7 app.
However, when going back to the ROR Developer Course I found the instructor installing a Bootstrap gem (along with a ton of other code), and then writing CSS code within a .css file converted to .scss. What was this about?
Further searching uncovered Bootstrap installation via CDN (content delivery network) vs installation via package manager (one common package manager is NPM). It appears that the ROR Developer Course goes with the package manager method.
What are the differences between these two methods? By search I found:
Some quick comparison points:
If you are not connected to the internet, your NPM package will still work. Your CDN link will not.
CDN usually only hosts the most popular stuff. If you want to use a less popular package, you’ll want to use NPM.
Updating NPM packages is easier, especially since some forms will look for major/minor updates. You’d have to change your CDN link by hand.
So the GoRails linked video uses the CDN method, and their method works very well. In my next post I’ll detail my experiences in the second method – utilizing a package manager. I found what seems to be great directions at getbootstrap.com and Github. I also found a GoRails video where they go through using the Github method. I’ll let you know how it goes in my next post.
