Original subtitles

1 1

Up until now, whenever we changed our code 2

2

and then wanted to see the effect of the code 3

3

in the browser, we saved the code 4

4

and then manually reloaded the browser. 5

5

But there is a much better way. 6

6

So instead, we can make the page reload automatically 7

7

whenever we change our code in the editor. 8

8

So let's now learn how. 9

9

So in the real world, 10

10

no professional developer reloads their browsers manually 11

11

like we have been doing. 12

12

So everyone uses some kind of tool to do that. 13

13

So to make our life easier as we go through this course, 14

14

we will now also install such a development tool 15

15

which is called Live Server. 16

16

And we can actually use Live Server in two different ways. 17

17

First, we can install a VS Code extension, 18

18

or second, we can use a bit of a more professional workflow 19

19

using Node.js and a so-called npm package. 20

20

And let's actually start with the easier approach 21

21

which is to simply install the Live Server, 22

22

the extension here on VS Code. 23

23

So that's Live Server, 24

24

and it's this one here. 25

25

So just click Install as always. 26

26

And then as we close this, you will see that down here 27

27

we have this Go Live button, right? 28

28

And so let's try to log something to the console here now, 29

29

or actually let's try to click this button here first. 30

30

So you see it says starting 31

31

and now it opened up a new browser tab on this address here. 32

32

So this URL, okay? 33

33

Then here we click on inspect just to open up 34

34

the developer console. 35

35

Let's increase it a little bit and you see that right now, 36

36

we have no output here at all. 37

37

And that's because we are not logging anything 38

38

here in the script. Right? 39

39

And so now let's try to actually change the file. 40

40

So let's just call the calcAge function here 41

41

and now watch what happens as I simply save this file now. 42

42

So I hit Command + S and you see that here 43

43

on the other side, 44

44

the output automatically appeared without me having 45

45

to reload the browser. Right? 46

46

And if I try some other value, give it a save again, 47

47

then you see that it updated here again. 48

48

And so that is the Live Server extension doing its work. 49

49

Okay, but let's take it back here 50

50

and actually close this window, 51

51

because this was only the first way of using Live Server. 52

52

So as I said before, there is a more professional way 53

53

of running Live Server 54

54

which just by using something called Node.jS, 55

55

which is a JavaScript runtime 56

56

that we can install on our computers. 57

57

Now, if the extension that we just installed works just fine 58

58

for you and you don't want to add any more complexity, 59

59

then you can just skip the rest of this video 60

60

and move on in the course. 61

61

But I will actually use the second approach 62

62

in the rest of the course, 63

63

which is to first install Node.js, 64

64

and then use an npm package called Live Server there. 65

65

But again, you can follow the rest of the course, 66

66

just as well by simply using the extension 67

67

that we just installed. 68

68

You don't need to install Node.js 69

69

and the Live Server npm package. 70

70

But if you're curious and want to see how 71

71

the second approach works, 72

72

then let's now quickly go ahead 73

73

and install Node.js on our computers. 74

74

So just Google Node.js here. 75

75

And then it's probably this first result that you saw here. 76

76

And Node.js is a way of running JavaScript 77

77

outside of the browser, 78

78

but also it's a way of running development tools, 79

79

just like the Live Server that we want to install now. 80

80

So go here to download, 81

81

and then you can use the LTS version 82

82

for whatever platform that you're using. 83

83

So Windows, Mac, Linux, 84

84

just download whatever you need for your use case 85

85

then install it and then come back to this video. 86

86

Now, if for some reason you cannot do this, 87

87

or if anything goes wrong, then don't worry. 88

88

You can of course continue this course 89

89

without using a Live Server. 90

90

So please don't get stuck on this video 91

91

if you don't manage to install Live Server 92

92

for some reason. Okay? 93

93

Now, anyway, after you successfully installed Node.js, 94

94

it will become available as a program 95

95

in the so-called terminal. 96

96

and let's use the VS Code built-in terminal. 97

97

So VS code has a terminal included and to open it, 98

98

we need to go to the menu bar and then new terminal. 99

99

Or we can also use this weird shortcut here, 100

100

but I prefer to do it like this. 101

101

So let's increase this a little bit. 102

102

And then I will clear this terminal here 103

103

by hitting Command or Control + K. 104

104

And that looks a little bit better. 105

105

I can also increase this by hitting Command, + , 106

106

and actually that increases the whole window. 107

107

So that I don't want, so let's go back. 108

108

But anyway, in case you're not familiar with the terminal, 109

109

it is basically a way of giving a computer instructions. 110

110

And we will learn more about the terminal 111

111

later in the course. 112

112

This not the point to worry about a terminal. 113

113

All I want you to do is to write note -v, 114

114

then hit Return or Enter. 115

115

And then you should see some kind of number here. 116

116

It doesn't matter what number, 117

117

but as long as you see a number, 118

118

it means that you successfully installed Node.js 119

119

So if you have this number here 120

120

then you can now write npm install live-server -g. 121

121

And in case you're on a Mac, 122

122

you will probably need to sudo this command. 123

123

So start a command with sudo 124

124

and then npm install live-server g. 125

125

So again, it's not important 126

126

that you understand what this does. 127

127

Let me just, in 10 seconds, 128

128

tell you that npm is the Node package manager, 129

129

which is basically a program to download tools. 130

130

Then here we say install. 131

131

And then here we say that the tool we want to install 132

132

is called Live Server and -g means 133

133

that it should be installed globally. 134

134

And that will make the Live Server tool 135

135

available everywhere on your computer. 136

136

So if you're on a Mac use sudo here before the command, 137

137

but on Windows you don't need sudo. 138

138

And it won't work even if you use sudo. 139

139

Then hit Enter and if you're on a Mac, 140

140

you now need to enter your password. 141

141

And don't worry if you don't see anything there, 142

142

that is on purpose, just write it anyway, hit Return, 143

143

and then it should start doing something. 144

144

So right now it is being installed 145

145

and I get some errors here apparently, 146

146

but I think they are not really important. 147

147

Anyway, I already had Live Server installed anyway. 148

148

And so these errors here, they should be no problem. 149

149

So we can clear our console again 150

150

by hitting Command or Control key. 151

151

(keyboard clacks) 152

152

Like this. And so that looks much better. 153

153

And now all we need to do 154

154

is to write live-server and then hit Return. 155

155

So try that and it worked. 156

156

So it automatically opened up a tab in the browser. 157

157

So probably in your predefined browser 158

158

and this browser tab is now connected 159

159

to your current project folder. 160

160

And so in the console here, you can see the folder, 161

161

which is this one. 162

162

So developer skills in this case 163

163

and so that's exactly the project folder 164

164

that we are in right now. 165

165

So whenever you run Live Server in some folder, 166

166

that folder will then be opened in the browser. 167

167

And whenever we open a folder in the browser, 168

168

it will then open the index.html file by default. 169

169

And that's why we always 170

170

have an index.html file in any folder. 171

171

Okay, so let's open up the console here. 172

172

Then we get a small error, but as we reload the page, 173

173

this error will disappear. 174

174

Yeah, that's right. 175

175

And so here, let's actually get rid of this. 176

176

And here let's log to the console, 177

177

the result of calcAge and then with some year, 178

178

just so that we can now test this. 179

179

So when I give it a save, 180

180

watch what happens here on the right side in a browser. 181

181

So I will not reload the browser, 182

182

I will only hit Command + S to save this file. 183

183

And you see, it took like half a second, 184

184

then the browser reloaded 185

185

and now we get the result here automatically. 186

186

Also you can see down here in the terminal 187

187

that a change was detected 188

188

and so that's what triggered the reload. 189

189

So any file that changes in this folder now 190

190

will trigger a reload. 191

191

So even if I changed something in the HTML file. 192

192

For example, if I save now, 193

193

then see how it changed here as well, right away. 194

194

So let's put that back, close it. 195

195

And actually we can even close this terminal. 196

196

So if I close it and save it again, 197

197

you see it reloaded again very quickly 198

198

and it's still working. 199

199

So the terminal, it's still down there, 200

200

it's just not visible, 201

201

but we can always get it back by hitting new terminal. 202

202

And actually that's a new one, 203

203

but then just click this menu here 204

204

and go to the first one that we had, which says node. 205

205

Okay, and with this, 206

206

we established a real world web development environment 207

207

or workflow. 208

208

And so now you can really start to feel like 209

209

a real JavaScript developer, not one of the kind 210

210

that has to manually reload their browser. 211

211

So I hope that you find this as cool as I do, 212

212

but in any way, we are now finished setting up our browser 213

213

and also our development workflow. 214

214

So basically this part here of the section, 215

215

so the editor setup. 216

216

And so now we're ready to go a little bit 217

217

into developer skills because that's also an area 218

218

that's important to develop for you as a new developer. 219

219

And so the next couple of videos will be how to learn 220

220

and how to solve problems.