How to use Bootstrap with CSSBundling Rails

[Music] hey guys this episode we're going to be talking about how to install bootstrap 5 in your rails application using the brand new css bundling rails gem now this gem like the js bundling rails gem will use a script line in your package json to compile your css and basically it will take that command execute it and dump the final files out into the asset pipeline and the asset pipeline will serve those up just like normal so we can use any tool you would like and css bundling rails comes with several options one of those being bootstrap so that's what we're going to do in this episode and i want to point out that this will work with rails 6.0 and higher you can see that here in the gem spec but if you really want to use this with rails 5 2 or earlier you can by adding the script to your package json and then you'll just need to go into the tasks here under build and you'll want to copy this into your rails application so that it will automatically run that stuff and then you'll probably want to go walk through the other things like the bin dev file which we'll talk about here in a second so let's talk about how to use this in rail 7. we have rail 7 app here and this is built in now as a flag that we can pass when we create a new rails app so we can say rails new bootstrap example and we'll say we're going to use es build for our javascript to use js bundling rails and then for css we'll have bootstrap and that's all we need to do and it will go ahead and take care of the installation of those gems for us and install bootstrap now if you want to do it manually you can run the bundle install and then the rails css install bootstrap command and that will take care of it for you we'll talk about some of the other options like tailwind in the future but bootstrap is actually going to be both javascript and css which we'll talk about here in a second it's a little bit different because it comes with modals and drop downs and other javascript tools or features components that you will probably need so we're going to go set those up and make sure they're all working with this and that's why we're going to have both the bundling for js and css here so inside of our brand new application what we'll see in our package json is two things we have the es build set up for us already and the sas command to compile our bootstrap style sheet so this is going to set it up so that we can access the node modules to grab our css and all of those things and as we see with the uh js bundling dev package and css modeling the new bin dev script is available and it's going to run forman with our procfile.dev so this is the brand new way of running your rails apps with css and jss or js bundling where you're going to need to run your rails server and the yarn commands to build your javascript and your css so instead of running rail server by itself we'll have to run all of these together now under app assets style sheets will now have an application.bootstrap.scss file and it's going to import bootstrap here so this is just your standard sas import just like you would have done in webpacker or even probably the asset pipeline in the past now the builds directory here is where the final css is going to be output and the asset pipeline is configured in manifest.js to only import the images and builds folders so it's going to ignore the stylesheets folder because that's going to be processed by css bundling so that's really all there is to this setup for the css part and if we run yarn run build colon css this is going to run that sas command that will compile our bootstrap.scss file and output it to the app assets builds folder so now that we've done that if we go back to our editor our builds folder will have application css in here and it will have bootstrap version 5. so all of this is now working and we can tell that that is because it is all output here now um let's go and create a scaffold so we can see what's going on here let's generate that one railsdb migrate and then we'll run the bin dev command to run our rails server and have all of those watchers set up so now if we go to localhost 3000 slash posts we'll be able to see that this does in fact have bootstrap styling applied so if we go into bootstrap we can grab some random things like let's grab a navbar example and we'll grab the html for this and we can paste that into our application i'm going to go into app views we'll make a shared directory and a navbar html.erb template and i'll paste this in here and we can go to say our layout application html.erb and we can render the partial shared nav bar and if we refresh our page what we should see is our navbar is all set up with bootstrap and including the drop downs working with the javascript so this is great everything um is configured here so that if we were to go into the responsive mode we can go and fiddle with the dimensions and so on but we're going to need to of course change our layout for bootstrap so if we go to the bootstrap getting started i believe they have a starter template this meta viewport is important for bootstrap in order for it to resize responsibly uh so if we run or add that and we refresh what we should see is that this will now change the navbar into the hamburger menu there when we are in smaller sizes so that is a critical thing to have because without it if we refresh we're gonna get that nav bar and a big scrolling wide thing that isn't fully responsive there so there we go now if we go back and play with some of the other javascript stuff here what we'll find out is that some of these things don't seem to work so if we go to for example tooltips um what you'll see in the docs is that for performance reasons you have to initialize tooltips yourself so what we'll do is we'll grab our copy or javascript example here for tooltips and then we can go into app javascript application.js and it's already imported bootstrap because we specified es build as our bootstrap or our javascript bundler and then inside of here we can say document add event listener on the turbo load event we want to initialize our bootstrap code here and we can paste this in and that will make sure that our bootstrap javascript tooltips are set up on every page load so now we can grab something like a button with the tool tip on the bottom and we can paste that in some view here and we'll be able to see that that tool tip now works and there we go so other things we can play with like a modal for example if we go grab this live demo with a button that triggers the modal we can copy this and paste it in as well and we'll see that because the javascript is already imported for us our modals work out of the box so that's great and it automatically works we don't have to set up any javascript for that so that's all done for us by this import bootstrap from the bootstrap package and really that's about all there is to it the app javascript is going to be bundled in the same way that the uh css is but it's going to use the yarn build command instead of yarn build css so it's kind of using bootstrap with both of the bundling libraries to make all this work and one last example here for good measure we can paste in a nav for tabs and we can see if that works and we get the different content showing up automatically when we click on these tabs and it highlights them accordingly as well so that is really all there is to setting up bootstrap in your rails application with the css and js bundling it is extremely easy and extremely awesome to be able to get up and running this quickly that's something that's always been kind of hard to go set up in rails you had to go find a tutorial and copy stuff but now it's built in and really easy to use so that's it for this episode we'll talk about tailwind css in the next one or something like that but until then i will talk to you guys later peace [Music]

Channel: GoRails

Views: 1,829

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, Rails 6, Action Text, Active Support, Action Mailbox, Webpacker, Active Storage, Active Record, rails testing, ruby on rails testing, ruby testing, devise, rails devise

Id: nxKDTtuKOo4

Length: 9min 37sec (577 seconds)

Published: Mon Oct 11 2021

Reddit Comments

[u/AndreyAzimov]

Seems much easier then before:

rails new my_app_name -j esbuild -css bootstrap

yarn run build:css