In this video we're going to be creating a new ruby on rails 7 application and we're
going to use bootstrap as a default CSS framework so how we do this in ruby on rails
seven is a little bit different from how we did in previous versions of ruby on rails.
So previously we would have to go through this entire process of installing similar age
or including a link to the Cdn version of the scripts that we need.
However, in ruby on rails seven, we can actually do this from the command line when
we are creating a new application Before we get into that, make sure to take
advantage of the skill share, premium 30 day
full access using the link in the description below.
So you can access unlimited courses for a full 30 days including my own ruby and rails
six course which is on the website.
So make sure to use that code and take advantage of that in the description below.
So let's get back into the video when we create a new ruby on rails seven ap we have
the option of specifying what CSS framework that we want to use and that's how we're
going to set this up in this video.
One thing to note before we create the application is that we want to make sure that
we're using the right version of ruby.
So in this case I'm using ruby version Manager and you've probably seen me in the
previous video talking about this, we can use ruby version Manager to specify the
version of ruby that we are running when we create our application.
So in this case I'm going to list the known versions of ruby that I have installed And you
can see the default one is 2.7.3.
So RVM use 3.0.0.
so I'll run that same command again.
Now we can see we've got this version of ruby loaded.
One thing I could do here is to create a new gem set for this test application or this test
Ruby on Rails 7 app.
and what we'll do is use ruby version manager to do that say ruby gem set, create,
let's call this test app.
So this just means that any gems that we install as part of this Rail seven App, they are
all contained within this gem set.
So now the next thing we can do is use the rails new and I want to show this help pass
in the help option here just to give you an idea of what we can use here.
So what options are available to us, Somebody screen. It's a little bit small here.
Let me just make this bigger. So you can see it.
So if we look at the C S. S frameworks so we have this option to choose a CSS
framework or processor as they've labeled here.
So we can use tailwind bootstrap you know, and a number of other options here.
So whichever one you prefer to work with in this case for this video, I want to show, just
using bootstrap, but you can also use tailwind if you prefer that two.
So let's clear this green and I'm going to create a new application based on the CSS
framework, so we'll say C S s and that will be bootstrapped.
So now when we do this it will configure bootstrap for our application.
Of course we need to give our our rails, new application a name.
So in this case I'll just call it test that.
So this is installing all of the gems into the new gems set that we created at the
beginning of the video.
So one of the nice things about installing your CSS framework in this way is that it
removes a lot of the problems that you may
encounter when you add it to a new application.
So this is something that a lot of people have experienced in ruby on rails six.
When they add bootstrap, when they add tailwind, that there are some issues linking
up the style sheets.
When we installed bootstrap and tailwind in ruby on rails six.
The common way to do it was using web packer and installing bootstrap or tailwind in
this way can lead to a number of problems,
especially when it comes to linking up your style sheet.
So in ruby on rails six.
When you were using s CSS files, it would have to compile it into CSS files before it gets
uploaded to the server.
So when you push the production, you're actually pushing a compiled version of the
style sheet and part of the issue there was
linking of that style sheet from the nPM node modules.
So it is quite tricky and way in the way that it was set up in the previous version of rails.
But I think in this version it is a little bit more simple because it it handles a lot of these
issues for you.
So the installation is finished now and what I'm gonna do is open this up in our code
editor, so it's clear this green
and now we want to open this up in our code editor.
So first of all, let's open that directory.
So once we open this up in our code editor
we can have a look at what's been done for us.
So we've got the new application set up and if we have a look in here, let's have a look
and see what we've got.
So we've got our so have a look at this package dot jayson.
So we in the package dot jayson, let me see if I can hide this a little bit.
so you can see I've got bootstrapped installed here as part of the dependencies under
this Jason package dot jayson for the dependencies.
We can see we've got bootstrap, we've also got sass installed and we've got the hot
wire default packages installed.
So if you look here at the bottom
under scripts, we can see that we've got this build CSS.
So this script from what I understand is just running this build to include bootstrap, so
that would be included as part of the application dot CSS once it is compiled and you
can see there's an option here for no source map and load path equals node modules.
So now let's have a look at our assets directory.
So there should be something in here that includes the style sheet.
So again, we've got this import bootstrap slash c s s c s s slash bootstrap.
So this is basically taking this out of the node modules directory, so if we actually went
in and look in the node modules, we can probably find this CSS file is being imported or
this s CSS file has been imported, whatever it is.
So if we look here, we'll see the node modules and if we open that up and we go down,
let's have a look.
Let's look for Bootstrap. So that's under S E S s.
Okay,
So we don't really need to look in here at all.
I'm just curious to see how this is being okay.
So now what is happening is it's importing all of these separate partial files that
includes all of these components and layout functionality for Bootstrap, so all of this is
getting imported and built into one single file.
So you could actually go and have a look at these if you wanted but we don't really
need to do that.
But the point here is really that it just simplifies all of this stuff by including the option
when you're installing Or when you're setting up a new rail seven application.
So we didn't have this luxury in rails five or Real six.
So this just takes a lot of the effort and a lot of work out of getting up and running with
a new CSS framework.
So you could go ahead and test this further.
So if I run the application now
and if you just to make sure that this is working correctly.
So in here on the application dot html dot RB.
So that's the default layout that will be loaded once we open this in our browser.
So in here I could just, you know, go ahead and create a default container class.
That's like the top level layout class for for bootstrap
and then I could say class equals row,
class equals column.
So this will give it like a 12 layout. Alright, 12 column layout.
So rather than the page being the entire width, like from end to end, this would limit the
max width of the page and it's an easy way for us to see that this is working
Okay, let's move this across and maybe this isn't the easiest way to see that this is
working because I've got this default page.
But let's load a custom page here. So this default one is the default route.
So let's look at the controllers, we have a application controller and you know, I could
just put in a default, this isn't normally normally we create a new controller to do this,
but I could just go default home.
Just create a new route. And then that would that would give me a new folder in here.
It's called this application
home dot to meld on your b
and if I wanted to make that work then I would just change the routes in here.
So you set the route as the default route, which is like this.
I have an example here,
I think I called at home.
So that's Reload the page
so you can see now that you can see now that, you know, we've got this max with this,
this column layout so we can see now that the pages loading and we've got this new
view that I've created is like an example here.
So what's happening is this is actually already working for bootstraps?
We've got the layout, you know, it's got this max with on the layout and you could test
this further if you wanted to see, you could simply come back into this, let's give the
listeners to a quick example here.
I could just create this as a
give this a button of success
and reload the page and you'll see you've got this kind of bootstrap button.
So that's a very quick example of how to set up bootstrap and your new application,
your new ruby on rails, seven application.
And in the same way you could have just easily done tailwind here so you could
change that value that you're passing in when you create the new app.
So you just say it it's tailwind instead and then you would simply be able to come in
and use the the classes for tailwind.
So that's about it for this video.
Just a really short quick one on how to set
up bootstrap and a new ruby on rails, seven application.
If you've enjoyed this video, make sure to give it a like and subscribe to the channel
and I will see you all in the next video.