1 00:00:01,340 --> 00:00:04,110 Up until now, whenever we changed our code 2 00:00:04,110 --> 00:00:06,640 and then wanted to see the effect of the code 3 00:00:06,640 --> 00:00:09,210 in the browser, we saved the code 4 00:00:09,210 --> 00:00:12,070 and then manually reloaded the browser. 5 00:00:12,070 --> 00:00:14,410 But there is a much better way. 6 00:00:14,410 --> 00:00:18,010 So instead, we can make the page reload automatically 7 00:00:18,010 --> 00:00:21,200 whenever we change our code in the editor. 8 00:00:21,200 --> 00:00:22,853 So let's now learn how. 9 00:00:24,790 --> 00:00:26,260 So in the real world, 10 00:00:26,260 --> 00:00:30,200 no professional developer reloads their browsers manually 11 00:00:30,200 --> 00:00:32,060 like we have been doing. 12 00:00:32,060 --> 00:00:35,990 So everyone uses some kind of tool to do that. 13 00:00:35,990 --> 00:00:39,730 So to make our life easier as we go through this course, 14 00:00:39,730 --> 00:00:42,980 we will now also install such a development tool 15 00:00:42,980 --> 00:00:44,903 which is called Live Server. 16 00:00:45,750 --> 00:00:49,850 And we can actually use Live Server in two different ways. 17 00:00:49,850 --> 00:00:53,640 First, we can install a VS Code extension, 18 00:00:53,640 --> 00:00:58,640 or second, we can use a bit of a more professional workflow 19 00:00:58,810 --> 00:01:03,580 using Node.js and a so-called npm package. 20 00:01:03,580 --> 00:01:06,520 And let's actually start with the easier approach 21 00:01:06,520 --> 00:01:09,770 which is to simply install the Live Server, 22 00:01:09,770 --> 00:01:11,653 the extension here on VS Code. 23 00:01:12,830 --> 00:01:15,210 So that's Live Server, 24 00:01:15,210 --> 00:01:17,600 and it's this one here. 25 00:01:17,600 --> 00:01:20,800 So just click Install as always. 26 00:01:20,800 --> 00:01:25,030 And then as we close this, you will see that down here 27 00:01:25,030 --> 00:01:29,540 we have this Go Live button, right? 28 00:01:29,540 --> 00:01:33,670 And so let's try to log something to the console here now, 29 00:01:33,670 --> 00:01:36,403 or actually let's try to click this button here first. 30 00:01:37,550 --> 00:01:40,030 So you see it says starting 31 00:01:40,030 --> 00:01:45,030 and now it opened up a new browser tab on this address here. 32 00:01:45,160 --> 00:01:48,920 So this URL, okay? 33 00:01:48,920 --> 00:01:53,560 Then here we click on inspect just to open up 34 00:01:53,560 --> 00:01:55,053 the developer console. 35 00:01:56,700 --> 00:02:00,820 Let's increase it a little bit and you see that right now, 36 00:02:00,820 --> 00:02:02,940 we have no output here at all. 37 00:02:02,940 --> 00:02:06,230 And that's because we are not logging anything 38 00:02:06,230 --> 00:02:10,410 here in the script. Right? 39 00:02:10,410 --> 00:02:14,220 And so now let's try to actually change the file. 40 00:02:14,220 --> 00:02:17,890 So let's just call the calcAge function here 41 00:02:17,890 --> 00:02:22,110 and now watch what happens as I simply save this file now. 42 00:02:22,110 --> 00:02:25,040 So I hit Command + S and you see that here 43 00:02:25,040 --> 00:02:26,240 on the other side, 44 00:02:26,240 --> 00:02:29,670 the output automatically appeared without me having 45 00:02:29,670 --> 00:02:33,400 to reload the browser. Right? 46 00:02:33,400 --> 00:02:36,990 And if I try some other value, give it a save again, 47 00:02:36,990 --> 00:02:39,990 then you see that it updated here again. 48 00:02:39,990 --> 00:02:44,683 And so that is the Live Server extension doing its work. 49 00:02:45,640 --> 00:02:48,530 Okay, but let's take it back here 50 00:02:48,530 --> 00:02:51,010 and actually close this window, 51 00:02:51,010 --> 00:02:55,550 because this was only the first way of using Live Server. 52 00:02:55,550 --> 00:02:59,910 So as I said before, there is a more professional way 53 00:02:59,910 --> 00:03:01,580 of running Live Server 54 00:03:01,580 --> 00:03:04,600 which just by using something called Node.jS, 55 00:03:04,600 --> 00:03:06,760 which is a JavaScript runtime 56 00:03:06,760 --> 00:03:09,303 that we can install on our computers. 57 00:03:10,160 --> 00:03:13,790 Now, if the extension that we just installed works just fine 58 00:03:13,790 --> 00:03:17,890 for you and you don't want to add any more complexity, 59 00:03:17,890 --> 00:03:20,850 then you can just skip the rest of this video 60 00:03:20,850 --> 00:03:22,760 and move on in the course. 61 00:03:22,760 --> 00:03:25,970 But I will actually use the second approach 62 00:03:25,970 --> 00:03:27,630 in the rest of the course, 63 00:03:27,630 --> 00:03:29,980 which is to first install Node.js, 64 00:03:29,980 --> 00:03:34,600 and then use an npm package called Live Server there. 65 00:03:34,600 --> 00:03:37,270 But again, you can follow the rest of the course, 66 00:03:37,270 --> 00:03:40,410 just as well by simply using the extension 67 00:03:40,410 --> 00:03:41,910 that we just installed. 68 00:03:41,910 --> 00:03:44,270 You don't need to install Node.js 69 00:03:44,270 --> 00:03:47,230 and the Live Server npm package. 70 00:03:47,230 --> 00:03:49,750 But if you're curious and want to see how 71 00:03:49,750 --> 00:03:51,430 the second approach works, 72 00:03:51,430 --> 00:03:53,250 then let's now quickly go ahead 73 00:03:53,250 --> 00:03:57,720 and install Node.js on our computers. 74 00:03:57,720 --> 00:04:00,230 So just Google Node.js here. 75 00:04:00,230 --> 00:04:04,880 And then it's probably this first result that you saw here. 76 00:04:04,880 --> 00:04:08,020 And Node.js is a way of running JavaScript 77 00:04:08,020 --> 00:04:09,950 outside of the browser, 78 00:04:09,950 --> 00:04:13,100 but also it's a way of running development tools, 79 00:04:13,100 --> 00:04:17,150 just like the Live Server that we want to install now. 80 00:04:17,150 --> 00:04:19,660 So go here to download, 81 00:04:19,660 --> 00:04:22,700 and then you can use the LTS version 82 00:04:22,700 --> 00:04:25,460 for whatever platform that you're using. 83 00:04:25,460 --> 00:04:28,670 So Windows, Mac, Linux, 84 00:04:28,670 --> 00:04:31,720 just download whatever you need for your use case 85 00:04:31,720 --> 00:04:35,970 then install it and then come back to this video. 86 00:04:35,970 --> 00:04:38,890 Now, if for some reason you cannot do this, 87 00:04:38,890 --> 00:04:42,010 or if anything goes wrong, then don't worry. 88 00:04:42,010 --> 00:04:43,900 You can of course continue this course 89 00:04:43,900 --> 00:04:46,150 without using a Live Server. 90 00:04:46,150 --> 00:04:48,720 So please don't get stuck on this video 91 00:04:48,720 --> 00:04:51,320 if you don't manage to install Live Server 92 00:04:51,320 --> 00:04:54,060 for some reason. Okay? 93 00:04:54,060 --> 00:04:57,850 Now, anyway, after you successfully installed Node.js, 94 00:04:57,850 --> 00:05:00,370 it will become available as a program 95 00:05:00,370 --> 00:05:02,680 in the so-called terminal. 96 00:05:02,680 --> 00:05:05,973 and let's use the VS Code built-in terminal. 97 00:05:07,420 --> 00:05:12,030 So VS code has a terminal included and to open it, 98 00:05:12,030 --> 00:05:15,880 we need to go to the menu bar and then new terminal. 99 00:05:15,880 --> 00:05:18,993 Or we can also use this weird shortcut here, 100 00:05:20,820 --> 00:05:22,693 but I prefer to do it like this. 101 00:05:23,580 --> 00:05:26,863 So let's increase this a little bit. 102 00:05:27,740 --> 00:05:30,130 And then I will clear this terminal here 103 00:05:30,130 --> 00:05:32,733 by hitting Command or Control + K. 104 00:05:33,760 --> 00:05:36,340 And that looks a little bit better. 105 00:05:36,340 --> 00:05:39,343 I can also increase this by hitting Command, + , 106 00:05:40,400 --> 00:05:43,010 and actually that increases the whole window. 107 00:05:43,010 --> 00:05:46,540 So that I don't want, so let's go back. 108 00:05:46,540 --> 00:05:49,440 But anyway, in case you're not familiar with the terminal, 109 00:05:49,440 --> 00:05:53,530 it is basically a way of giving a computer instructions. 110 00:05:53,530 --> 00:05:55,570 And we will learn more about the terminal 111 00:05:55,570 --> 00:05:57,040 later in the course. 112 00:05:57,040 --> 00:05:59,630 This not the point to worry about a terminal. 113 00:05:59,630 --> 00:06:04,630 All I want you to do is to write note -v, 114 00:06:04,740 --> 00:06:07,320 then hit Return or Enter. 115 00:06:07,320 --> 00:06:10,910 And then you should see some kind of number here. 116 00:06:10,910 --> 00:06:12,740 It doesn't matter what number, 117 00:06:12,740 --> 00:06:14,570 but as long as you see a number, 118 00:06:14,570 --> 00:06:18,210 it means that you successfully installed Node.js 119 00:06:18,210 --> 00:06:20,510 So if you have this number here 120 00:06:20,510 --> 00:06:25,510 then you can now write npm install live-server -g. 121 00:06:30,140 --> 00:06:31,490 And in case you're on a Mac, 122 00:06:31,490 --> 00:06:35,200 you will probably need to sudo this command. 123 00:06:35,200 --> 00:06:37,400 So start a command with sudo 124 00:06:37,400 --> 00:06:41,430 and then npm install live-server g. 125 00:06:41,430 --> 00:06:42,960 So again, it's not important 126 00:06:42,960 --> 00:06:44,853 that you understand what this does. 127 00:06:45,730 --> 00:06:47,380 Let me just, in 10 seconds, 128 00:06:47,380 --> 00:06:50,880 tell you that npm is the Node package manager, 129 00:06:50,880 --> 00:06:54,150 which is basically a program to download tools. 130 00:06:54,150 --> 00:06:55,500 Then here we say install. 131 00:06:55,500 --> 00:06:58,670 And then here we say that the tool we want to install 132 00:06:58,670 --> 00:07:02,520 is called Live Server and -g means 133 00:07:02,520 --> 00:07:04,690 that it should be installed globally. 134 00:07:04,690 --> 00:07:06,440 And that will make the Live Server tool 135 00:07:06,440 --> 00:07:09,520 available everywhere on your computer. 136 00:07:09,520 --> 00:07:14,040 So if you're on a Mac use sudo here before the command, 137 00:07:14,040 --> 00:07:16,320 but on Windows you don't need sudo. 138 00:07:16,320 --> 00:07:19,010 And it won't work even if you use sudo. 139 00:07:19,010 --> 00:07:21,520 Then hit Enter and if you're on a Mac, 140 00:07:21,520 --> 00:07:24,300 you now need to enter your password. 141 00:07:24,300 --> 00:07:26,830 And don't worry if you don't see anything there, 142 00:07:26,830 --> 00:07:30,093 that is on purpose, just write it anyway, hit Return, 143 00:07:31,020 --> 00:07:33,563 and then it should start doing something. 144 00:07:38,110 --> 00:07:40,680 So right now it is being installed 145 00:07:40,680 --> 00:07:44,283 and I get some errors here apparently, 146 00:07:45,600 --> 00:07:49,130 but I think they are not really important. 147 00:07:49,130 --> 00:07:52,830 Anyway, I already had Live Server installed anyway. 148 00:07:52,830 --> 00:07:56,070 And so these errors here, they should be no problem. 149 00:07:56,070 --> 00:07:58,160 So we can clear our console again 150 00:07:58,160 --> 00:08:01,051 by hitting Command or Control key. 151 00:08:01,051 --> 00:08:01,884 (keyboard clacks) 152 00:08:01,884 --> 00:08:05,160 Like this. And so that looks much better. 153 00:08:05,160 --> 00:08:06,780 And now all we need to do 154 00:08:06,780 --> 00:08:11,780 is to write live-server and then hit Return. 155 00:08:11,800 --> 00:08:16,500 So try that and it worked. 156 00:08:16,500 --> 00:08:21,460 So it automatically opened up a tab in the browser. 157 00:08:21,460 --> 00:08:23,990 So probably in your predefined browser 158 00:08:23,990 --> 00:08:26,320 and this browser tab is now connected 159 00:08:26,320 --> 00:08:28,610 to your current project folder. 160 00:08:28,610 --> 00:08:31,650 And so in the console here, you can see the folder, 161 00:08:31,650 --> 00:08:33,240 which is this one. 162 00:08:33,240 --> 00:08:35,690 So developer skills in this case 163 00:08:35,690 --> 00:08:37,740 and so that's exactly the project folder 164 00:08:37,740 --> 00:08:40,000 that we are in right now. 165 00:08:40,000 --> 00:08:43,270 So whenever you run Live Server in some folder, 166 00:08:43,270 --> 00:08:46,810 that folder will then be opened in the browser. 167 00:08:46,810 --> 00:08:49,420 And whenever we open a folder in the browser, 168 00:08:49,420 --> 00:08:53,290 it will then open the index.html file by default. 169 00:08:53,290 --> 00:08:54,270 And that's why we always 170 00:08:54,270 --> 00:08:57,733 have an index.html file in any folder. 171 00:08:58,890 --> 00:09:03,080 Okay, so let's open up the console here. 172 00:09:03,080 --> 00:09:06,060 Then we get a small error, but as we reload the page, 173 00:09:06,060 --> 00:09:07,923 this error will disappear. 174 00:09:09,700 --> 00:09:11,240 Yeah, that's right. 175 00:09:11,240 --> 00:09:15,503 And so here, let's actually get rid of this. 176 00:09:17,780 --> 00:09:20,000 And here let's log to the console, 177 00:09:20,000 --> 00:09:24,050 the result of calcAge and then with some year, 178 00:09:24,050 --> 00:09:26,410 just so that we can now test this. 179 00:09:26,410 --> 00:09:28,060 So when I give it a save, 180 00:09:28,060 --> 00:09:31,120 watch what happens here on the right side in a browser. 181 00:09:31,120 --> 00:09:32,910 So I will not reload the browser, 182 00:09:32,910 --> 00:09:36,133 I will only hit Command + S to save this file. 183 00:09:37,336 --> 00:09:39,780 And you see, it took like half a second, 184 00:09:39,780 --> 00:09:41,230 then the browser reloaded 185 00:09:41,230 --> 00:09:44,590 and now we get the result here automatically. 186 00:09:44,590 --> 00:09:46,780 Also you can see down here in the terminal 187 00:09:46,780 --> 00:09:48,550 that a change was detected 188 00:09:48,550 --> 00:09:51,400 and so that's what triggered the reload. 189 00:09:51,400 --> 00:09:55,000 So any file that changes in this folder now 190 00:09:55,000 --> 00:09:56,820 will trigger a reload. 191 00:09:56,820 --> 00:10:00,343 So even if I changed something in the HTML file. 192 00:10:02,820 --> 00:10:04,960 For example, if I save now, 193 00:10:04,960 --> 00:10:08,713 then see how it changed here as well, right away. 194 00:10:09,750 --> 00:10:13,650 So let's put that back, close it. 195 00:10:13,650 --> 00:10:16,480 And actually we can even close this terminal. 196 00:10:16,480 --> 00:10:19,040 So if I close it and save it again, 197 00:10:19,040 --> 00:10:22,360 you see it reloaded again very quickly 198 00:10:23,750 --> 00:10:25,140 and it's still working. 199 00:10:25,140 --> 00:10:27,460 So the terminal, it's still down there, 200 00:10:27,460 --> 00:10:28,900 it's just not visible, 201 00:10:28,900 --> 00:10:32,173 but we can always get it back by hitting new terminal. 202 00:10:33,920 --> 00:10:35,830 And actually that's a new one, 203 00:10:35,830 --> 00:10:37,770 but then just click this menu here 204 00:10:37,770 --> 00:10:41,313 and go to the first one that we had, which says node. 205 00:10:42,990 --> 00:10:44,130 Okay, and with this, 206 00:10:44,130 --> 00:10:48,100 we established a real world web development environment 207 00:10:48,100 --> 00:10:49,660 or workflow. 208 00:10:49,660 --> 00:10:52,220 And so now you can really start to feel like 209 00:10:52,220 --> 00:10:55,560 a real JavaScript developer, not one of the kind 210 00:10:55,560 --> 00:10:58,383 that has to manually reload their browser. 211 00:10:59,750 --> 00:11:03,650 So I hope that you find this as cool as I do, 212 00:11:03,650 --> 00:11:07,660 but in any way, we are now finished setting up our browser 213 00:11:07,660 --> 00:11:10,610 and also our development workflow. 214 00:11:10,610 --> 00:11:13,590 So basically this part here of the section, 215 00:11:13,590 --> 00:11:15,110 so the editor setup. 216 00:11:15,110 --> 00:11:17,080 And so now we're ready to go a little bit 217 00:11:17,080 --> 00:11:20,900 into developer skills because that's also an area 218 00:11:20,900 --> 00:11:25,050 that's important to develop for you as a new developer. 219 00:11:25,050 --> 00:11:28,210 And so the next couple of videos will be how to learn 220 00:11:28,210 --> 00:11:29,993 and how to solve problems.