WEBVTT 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.