Original subtitles

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.