- [Instructor] In the next few videos
we'll move our Codepen app into our project.
And I'll show you some of the differences
between the global and the application API.
So to do this, I've prepared this link for you.
And this is going to take you to not exactly Codepen
but it's going to take you to GitHub
and show you the entire file that we worked
with in Codepen, but just in a single document.
So it's easier to copy and paste.
So we're going to grab some of this
and separated into our own project.
So let's take a look at our project
make sure that you're running the NPM run
serve command so that you can see sort of a live preview
of what's happening here.
And what I'm going to do is start
off with the main dot JS file.
I want to make sure
that I import all the things that I need.
So here I could import a couple of things.
If I wanted to, I could actually import bootstrap just
by issuing an import bootstrap statement
but what I really need to import is my icons.
So for that, I'm going to import a few things.
First off will be a library module
and this is going to come from Fort Awesome.
And first I need the SVG core.
And then after that
I'm going to import something called Font Awesome icon.
This is going to be the component that allows us to
use the font awesome library with UJS.
This is going to come from Fort Awesome.
And then it's called View Font Awesome like this.
And then finally, I'm going to import the icon that I want.
So here I'm going to only use for right now FA shopping cart
and that's going to come from again, Fort Awesome.
And this is going to be the solid SVG icons.
So I've got these three things that I'm importing
I'm going to modify the library so
that it also uses the icon that I'm importing.
And if I was importing more icons
I would just add a comma here.
And as soon as you start typing FA
you can see that the visual studio code sort
of help or gives us sort of a list of all the icon names.
If you go to the Font Awesome website
then you know that this is in camel case
but the icons are usually in that side on kebab case.
So you would say something like this
but we're just going to use FA shopping cart
because that's what we need and we add it to the library.
And then if we want to use that component everywhere
in our project then we use this component method here
on our application
and then we give it the name that we want to use
in our components.
So I'm going to use FA as a shortcut
and this is going to use the Font Awesome icon module.
So I'm going to hit save, and it's going to clean up my code
a little bit, added a few little spaces here.
Now addition to that if I wanted to import some other things
I could import them right here.
So if I wanted to, for example, import the anime
that CSS library, I could import it like this.
And I could also import the bootstrap CSS just
to CSS for bootstrap, but I'm going to do it another way.
So that would be bootstrap/distribution
and CSS bootstrap.css.
So that corresponds to a folder in node modules.
So this bootstrap right here, if you opened up node modules
you be able to see a bootstrap folder
actually already open here, but it would be this folder
and you would go to distribution CSS
and you could find the font bootstrap CSS this right here.
But what I'm going to use is the bootstrap as CSS file.
So I'm going to use the SAS version of bootstrap
which has a ton of icon.
So I'm going to import this file.
Now, the nice thing about doing this file is
that bootstrap has a ton of variables in this file
that I can modify so I can change the colors
and also the way that bootstrap works
by modifying any of this variables here.
So I'm not going to import bootstrap here.
Let's go ahead and save this.
What I'm going to do is go ahead
and close the node modules for now
cause it's a really big folder
and I want to find the app dot view file.
And I'm going to get rid of all of the styles that are in here.
And instead I'm going to import the bootstrap
library right here.
I'm going to have to say node modules here
and then go through the folder structure.
So bootstrap SCSS and it's in the bootstrap folder.
I don't need to add the extension.
It's smart enough to know that that's what it wants.
Now, the big advantage of doing it this way is
that I can modify the colors
of different things in bootstrap.
So as I mentioned, bootstrap has a lot
of different variables that are all
in this node modules folder.
Again, if I go to bootstrap and I find this variables
then I can find a bunch of prebuilt colors here.
So here's an indigo
in a purple that I think is actually better maybe
for the primary color.
So I can actually redefine any
of those variables in this app dot view file.
So I can say the primary color is going to now
be this purple.
And now whenever I specify anything to be a primary color
in bootstrap, it's going to actually use this purple.
Now I can add some additional styles in here.
So to do that, I'm going to go to my code.
And I know that I have a bunch
of dropdown sort of code here.
So I'm going to grab all this CSS
and I'll put it in this app file after bootstrap imports.
This is all my animation code that we saw earlier.
This it's going to be accessible to my entire application.
So I'll go ahead and save that.
And I also, I'm going to add another dev right here
so that I can use bootstraps container class.
That's going to give me a nice sort of responsive version
of the grid that will move my content around.
So there's probably going to be some problems in here.
And I do need to add a semi colon there.
That's what that error was telling me.
So now you can see that the page actually
although you can't really tell it's actually
adjusting itself to the bootstrap red instead
of the styles that it used to have before.
So other than that, I'm going to make sure
that in my application or rather in my homepage
so I'm going to go to the, not the Hello World
but I'm going to go to the views and this home view.
And in here, I'm using this Hello World components.
So I'm going to get rid of that component.
So I'm not really going to use it in this project
and then I'm not going to use this logo either.
and I'm going to close this thing here.
Let's go ahead and remove our whole assets folder.
Cause I don't really need it for this project.
At least not for the shopping cart.
And then in here, I'm going to just type in
in each one and I'll use that new FA tag that I have access
to in my entire project.
And then I can use the icon parameter here.
So shopping cart.
And let's take a look at our project.
Yeah, I need to make sure that I remove this component here
cause it's no longer using that component.
So it doesn't need to be here.
And I probably need to type in something here so
that it makes sense.
Shopping cart.
We will also add a class here
of texts primary just to see
that it's using that purple.
And it's also given us access to the shopping cart
with this new FA icon that I've created for you.
So pretty easy.
We can easily add any modules that we want our whole
application to have access to into this main dot JS file.
Then we can push them either into all of our projects.
I can also, if I want to import the individual shopping
card, only on certain pages, I would do something similar.
I would import this into each one of my pages.
Sometimes it's more convenient.
They just import them in the whole application.
Cause you know, the shopping cart is going to be everywhere
and sometimes it's better to just import them
in the component that you're going to be using it in.