Up until now, whenever we changed our code
and then wanted to see the effect of the code
in the browser, we saved the code
and then manually reloaded the browser.
But there is a much better way.
So instead, we can make the page reload automatically
whenever we change our code in the editor.
So let's now learn how.
So in the real world,
no professional developer reloads their browsers manually
like we have been doing.
So everyone uses some kind of tool to do that.
So to make our life easier as we go through this course,
we will now also install such a development tool
which is called Live Server.
And we can actually use Live Server in two different ways.
First, we can install a VS Code extension,
or second, we can use a bit of a more professional workflow
using Node.js and a so-called npm package.
And let's actually start with the easier approach
which is to simply install the Live Server,
the extension here on VS Code.
So that's Live Server,
and it's this one here.
So just click Install as always.
And then as we close this, you will see that down here
we have this Go Live button, right?
And so let's try to log something to the console here now,
or actually let's try to click this button here first.
So you see it says starting
and now it opened up a new browser tab on this address here.
So this URL, okay?
Then here we click on inspect just to open up
the developer console.
Let's increase it a little bit and you see that right now,
we have no output here at all.
And that's because we are not logging anything
here in the script. Right?
And so now let's try to actually change the file.
So let's just call the calcAge function here
and now watch what happens as I simply save this file now.
So I hit Command + S and you see that here
on the other side,
the output automatically appeared without me having
to reload the browser. Right?
And if I try some other value, give it a save again,
then you see that it updated here again.
And so that is the Live Server extension doing its work.
Okay, but let's take it back here
and actually close this window,
because this was only the first way of using Live Server.
So as I said before, there is a more professional way
of running Live Server
which just by using something called Node.jS,
which is a JavaScript runtime
that we can install on our computers.
Now, if the extension that we just installed works just fine
for you and you don't want to add any more complexity,
then you can just skip the rest of this video
and move on in the course.
But I will actually use the second approach
in the rest of the course,
which is to first install Node.js,
and then use an npm package called Live Server there.
But again, you can follow the rest of the course,
just as well by simply using the extension
that we just installed.
You don't need to install Node.js
and the Live Server npm package.
But if you're curious and want to see how
the second approach works,
then let's now quickly go ahead
and install Node.js on our computers.
So just Google Node.js here.
And then it's probably this first result that you saw here.
And Node.js is a way of running JavaScript
outside of the browser,
but also it's a way of running development tools,
just like the Live Server that we want to install now.
So go here to download,
and then you can use the LTS version
for whatever platform that you're using.
So Windows, Mac, Linux,
just download whatever you need for your use case
then install it and then come back to this video.
Now, if for some reason you cannot do this,
or if anything goes wrong, then don't worry.
You can of course continue this course
without using a Live Server.
So please don't get stuck on this video
if you don't manage to install Live Server
for some reason. Okay?
Now, anyway, after you successfully installed Node.js,
it will become available as a program
in the so-called terminal.
and let's use the VS Code built-in terminal.
So VS code has a terminal included and to open it,
we need to go to the menu bar and then new terminal.
Or we can also use this weird shortcut here,
but I prefer to do it like this.
So let's increase this a little bit.
And then I will clear this terminal here
by hitting Command or Control + K.
And that looks a little bit better.
I can also increase this by hitting Command, + ,
and actually that increases the whole window.
So that I don't want, so let's go back.
But anyway, in case you're not familiar with the terminal,
it is basically a way of giving a computer instructions.
And we will learn more about the terminal
later in the course.
This not the point to worry about a terminal.
All I want you to do is to write note -v,
then hit Return or Enter.
And then you should see some kind of number here.
It doesn't matter what number,
but as long as you see a number,
it means that you successfully installed Node.js
So if you have this number here
then you can now write npm install live-server -g.
And in case you're on a Mac,
you will probably need to sudo this command.
So start a command with sudo
and then npm install live-server g.
So again, it's not important
that you understand what this does.
Let me just, in 10 seconds,
tell you that npm is the Node package manager,
which is basically a program to download tools.
Then here we say install.
And then here we say that the tool we want to install
is called Live Server and -g means
that it should be installed globally.
And that will make the Live Server tool
available everywhere on your computer.
So if you're on a Mac use sudo here before the command,
but on Windows you don't need sudo.
And it won't work even if you use sudo.
Then hit Enter and if you're on a Mac,
you now need to enter your password.
And don't worry if you don't see anything there,
that is on purpose, just write it anyway, hit Return,
and then it should start doing something.
So right now it is being installed
and I get some errors here apparently,
but I think they are not really important.
Anyway, I already had Live Server installed anyway.
And so these errors here, they should be no problem.
So we can clear our console again
by hitting Command or Control key.
(keyboard clacks)
Like this. And so that looks much better.
And now all we need to do
is to write live-server and then hit Return.
So try that and it worked.
So it automatically opened up a tab in the browser.
So probably in your predefined browser
and this browser tab is now connected
to your current project folder.
And so in the console here, you can see the folder,
which is this one.
So developer skills in this case
and so that's exactly the project folder
that we are in right now.
So whenever you run Live Server in some folder,
that folder will then be opened in the browser.
And whenever we open a folder in the browser,
it will then open the index.html file by default.
And that's why we always
have an index.html file in any folder.
Okay, so let's open up the console here.
Then we get a small error, but as we reload the page,
this error will disappear.
Yeah, that's right.
And so here, let's actually get rid of this.
And here let's log to the console,
the result of calcAge and then with some year,
just so that we can now test this.
So when I give it a save,
watch what happens here on the right side in a browser.
So I will not reload the browser,
I will only hit Command + S to save this file.
And you see, it took like half a second,
then the browser reloaded
and now we get the result here automatically.
Also you can see down here in the terminal
that a change was detected
and so that's what triggered the reload.
So any file that changes in this folder now
will trigger a reload.
So even if I changed something in the HTML file.
For example, if I save now,
then see how it changed here as well, right away.
So let's put that back, close it.
And actually we can even close this terminal.
So if I close it and save it again,
you see it reloaded again very quickly
and it's still working.
So the terminal, it's still down there,
it's just not visible,
but we can always get it back by hitting new terminal.
And actually that's a new one,
but then just click this menu here
and go to the first one that we had, which says node.
Okay, and with this,
we established a real world web development environment
or workflow.
And so now you can really start to feel like
a real JavaScript developer, not one of the kind
that has to manually reload their browser.
So I hope that you find this as cool as I do,
but in any way, we are now finished setting up our browser
and also our development workflow.
So basically this part here of the section,
so the editor setup.
And so now we're ready to go a little bit
into developer skills because that's also an area
that's important to develop for you as a new developer.
And so the next couple of videos will be how to learn
and how to solve problems.