- [Narrator] Let's take a look at a different approach
that is going to allow us to load files
instead of loading a web view.
So in addition to the loadURL method here,
we can use another one
and it's simply loadFile,
and that allows us to load in a local file
relative to the current document.
So from here I can load up an index.html file
and just write regular html in order to load it.
Let me go ahead and save that.
And then I'm going to make just an index,
that html file here.
And I have an extension called Emmet Load It,
which means that I can just type this exclamation point
and it'll give me a sample html page.
And let me type in an h1 here.
And, it also has this really cool option
that lets me type in
something like this and it converts it to a paragraph
with some lorem ipsum generic text.
Let's go ahead and save that.
And, open up the terminal again.
And we'll run the npm start command, now.
Now this will load up this webpage with this content
that we've seen right here.
And that's pretty cool,
but it isn't necessarily a very complex webpage.
So, what I'm going to do is load up a template
that I've created for you at this Gist right here.
And I'm going to hit this Raw button.
And, let me just go ahead and copy this piece of code.
It's pretty much a default html page,
but I've added links to the CDNs of the Bootstrap framework
so you can see the CSS is loaded right here
and then there's some JavaScript that's loaded at the bottom
with jQuery Popper as well as a Bootstrap.
So let's go ahead and copy that.
Come back into our project
and I'm going to replace all this with my code.
You can see that I have a simple container here
which is a Bootstrap way of making the page responsive
with an H2 with some other classes right there.
So let's go ahead and run the npm start command again.
And now you can see that you get
a slightly different version of the page.
This is a responsive, which makes it a little bit easier
to design my applications.
Actually Bootstrap is a fantastic framework
to use because it has the ability of creating
all kinds of components like Modals.
There are now Toasts which are like little windows
that pop up,
and you also have a grid for designing things.
It's mobile first by default.
So it's really going to be a great option for you
to use this when you build your applications.
It gives you lots of components that you can use immediately
to build amazing apps.
One thing that you do have to remember
is that we are loading certain components
from the web.
So this application would still require you
to have a web connection.
Now you could downlaod these files and load them up
from the same folder.
That would prevent you from having to go on the web.
However, sometimes it's an advantage to load some things
from the web and some things locally.
I would tend to say that if you're loading a framework
like this that isn't really going to change
it's probably best to just download the files.
We'll be taking a look at some of those approaches later.
But there are going to be instances where you're going
to want to load certain things remotely from the web,
so you get the latest, say, database of some products
that you're trying to load
and you can use this hybrid approach
to load certain things locally and certain things
from the web when needed.