Let's get started with making our lives
a bit easier first.
Up to this point in the course,
whenever we changed anything in our code and saved
this envious code,
we had to reload our browser to retrieve this latest code
from the HTML file.
As an example,
we can go to our full week HTML file here and delete
the upcoming road here in our H1 element.
If we do that and go back to our website,
this change is not reflected here.
The upcoming word is still this plate.
If we reload the browser, you see that
Now we have the latest code.
Now, though, this is not a big issue,
It's not very comfortable.
So I think it will be better if this reload would take place
automatically.
So whenever we change anything in the code in the HTML or
CSS files, once this change is saved,
then the page gets automatically reloaded.
Thankfully,
VS code comes with an extension which does exactly that.
You can find this extension here, in the view ribbon,
and they're in extensions.
And now just search for live server.
This extension here by Ritwick Dey.
Now what happens with this extension is that we can launch a
development server, a local development server,
which comes with this live reload feature.
The local development server is not a server in the web or
anything like that.
So your computer is not opened to the world suddenly.
It's still running locally in your environment,
but it simulates a real server in the internet.
So it kind of simulates your website as if it would be
deployed already.
So if your website would be running in the internet.
As I said, it doesn't do that
of course, it's still running locally on your machine.
But with this life development server feature,
we have this hot reload feature and that's exactly what we
want. So make sure to download or in my case,
enable this extension.
Once this is done,
we can now close this and go back to our explorer here.
A quick side note here,
the first folder now in our Explorer is this VS code folder,
highlighted green here.
This is just added by our live server,
nothing important for us here.
And now you can select one of the HTML files.
I'll go for the full week HTML file here.
Right click onto the file name and now select
open with live server.
This should open a new browser window.
And if we switched to this window, now you see that up here,
where we entered our URL,
we previously had the path to our file stored
locally on our system.
Now we have a combination of the IP of our computer,
the so-called port, and here default week HTML file again.
This is not very important at this point of the course.
It just shows you that the development server is running in
the end.
Now and if we switch back to our code
and add back our upcoming
text here into the H1 element,
save this and switch back.
Well, suddenly the upcoming text is already added.
As I said,
with this live development server running,
we now immediately have this hot reload feature and the
content gets updated immediately.
So this is it about your preparation here.
Let's now dive into the core content of this module.