1 00:00:01,620 --> 00:00:06,270 Welcome back, guys, in this lecture, are we going to start a deaf server so this will make our life 2 00:00:06,270 --> 00:00:06,950 easy. 3 00:00:07,260 --> 00:00:10,800 That will be for automatic Piccirillo when we change the code. 4 00:00:10,980 --> 00:00:13,010 So everything that we save is going to be there. 5 00:00:13,020 --> 00:00:17,990 Now we need to go back to the AMPM, right. 6 00:00:19,140 --> 00:00:22,770 So, I mean, I'm happy starter and we need to install this package. 7 00:00:22,800 --> 00:00:31,200 So the name of the package is NPM install weap back and I'm going to save it. 8 00:00:31,200 --> 00:00:40,200 BIPAC def server dash dash Steve dash the def that will save it as a dependency. 9 00:00:40,210 --> 00:00:47,850 Right now the packages for the file will be modified and if we go here, it's not there yet. 10 00:00:48,720 --> 00:00:50,750 OK, this is finished so it's still running. 11 00:00:51,120 --> 00:00:51,400 Right. 12 00:00:51,780 --> 00:00:53,250 OK now here it is. 13 00:00:53,250 --> 00:00:58,510 The Web dev server is installed and is installed as a def dependency. 14 00:00:58,830 --> 00:01:04,740 Now we need to configure this one into our web, that config file right here. 15 00:01:04,740 --> 00:01:12,320 What we can do to make sure that you have a comma here right now, we need first to create a def server. 16 00:01:12,390 --> 00:01:15,000 Oops, sorry, def server. 17 00:01:15,210 --> 00:01:25,920 And I will say content based and that will be e that will be our distribution folder actually. 18 00:01:26,250 --> 00:01:27,900 This folder here. 19 00:01:29,100 --> 00:01:29,940 Yeah that one. 20 00:01:32,350 --> 00:01:37,570 And I know this here that I have some file that I don't need actually is going to remove this one. 21 00:01:37,770 --> 00:01:38,700 Right, good. 22 00:01:39,110 --> 00:01:41,080 Now, you should have that file. 23 00:01:41,080 --> 00:01:43,450 That file was by mistake created by me. 24 00:01:43,600 --> 00:01:44,010 No way. 25 00:01:44,180 --> 00:01:48,750 Now, here, I'm going to create that list. 26 00:01:49,120 --> 00:01:54,380 OK, so this is the folder which the Web server will serve the file. 27 00:01:54,580 --> 00:02:00,190 So this directory is when we are going to submit, we're going to give to the developers. 28 00:02:00,340 --> 00:02:01,780 That's why it's called distribution. 29 00:02:02,200 --> 00:02:03,350 This is the source. 30 00:02:03,760 --> 00:02:07,210 So here we are putting our source code in. 31 00:02:07,210 --> 00:02:10,930 We are working during the development process and we're not giving this one to anyone. 32 00:02:10,930 --> 00:02:12,810 But this is OK. 33 00:02:12,850 --> 00:02:16,700 No, here I noticed a couple of things that we can improve. 34 00:02:16,990 --> 00:02:17,240 Right. 35 00:02:17,270 --> 00:02:19,010 The first thing is that you need to save it. 36 00:02:19,570 --> 00:02:23,230 Now, I just want to create a new folder called Ge'ez here. 37 00:02:23,620 --> 00:02:26,830 And I want I'm just going to delete this file here. 38 00:02:28,150 --> 00:02:28,490 Right. 39 00:02:28,690 --> 00:02:29,580 You don't need that anymore. 40 00:02:29,590 --> 00:02:30,650 Are we going to create it later? 41 00:02:31,030 --> 00:02:33,480 Now, here, we need to change the path. 42 00:02:33,700 --> 00:02:34,240 Why? 43 00:02:34,240 --> 00:02:42,550 Because every time when I run these some of the scripts here, I want the output to be server saved, 44 00:02:42,760 --> 00:02:46,780 introduced and insight just right. 45 00:02:46,990 --> 00:02:48,800 So how we can do this, it's a simple. 46 00:02:48,820 --> 00:02:56,410 So what we can do here is we can change just to this to JSA because we already have the path it's going 47 00:02:56,410 --> 00:02:59,380 to do this in here is going to just then bundle. 48 00:02:59,390 --> 00:03:00,030 Dodgiest. 49 00:03:00,490 --> 00:03:00,730 Cool. 50 00:03:01,210 --> 00:03:05,460 Now also I'm going to rename this one, I'm going to see Index. 51 00:03:05,470 --> 00:03:11,250 You will see why in a future and make sure that you put this here code. 52 00:03:11,380 --> 00:03:13,840 So for me it was automatically edit. 53 00:03:14,230 --> 00:03:14,640 Right. 54 00:03:14,650 --> 00:03:18,440 But for you it was probably like this right now. 55 00:03:18,670 --> 00:03:22,320 Make sure that you go there and you find it right. 56 00:03:22,540 --> 00:03:23,770 OK, let's write it together. 57 00:03:24,610 --> 00:03:34,060 So in the current folder, J.S., then I don't have anything inside bandeau just right because I've 58 00:03:34,210 --> 00:03:35,080 deleted that one. 59 00:03:35,110 --> 00:03:39,130 OK, so how are we going to create this one easy npm around def. 60 00:03:39,280 --> 00:03:41,480 So I'm going to run one of the commands here. 61 00:03:43,120 --> 00:03:43,450 Yeah. 62 00:03:43,480 --> 00:03:44,020 This one. 63 00:03:44,170 --> 00:03:46,600 And I expect that file to be created here. 64 00:03:46,600 --> 00:03:48,190 It is the bundle dodgiest. 65 00:03:48,190 --> 00:03:49,240 It's already created. 66 00:03:49,240 --> 00:03:51,040 They're good now. 67 00:03:51,040 --> 00:03:54,940 I installed it that back server and configure these deaf server here. 68 00:03:55,240 --> 00:03:56,430 What is next. 69 00:03:57,040 --> 00:04:00,820 Now we need actually to call it right. 70 00:04:01,060 --> 00:04:03,340 But how we are going to call it. 71 00:04:03,370 --> 00:04:08,390 Well we can create a new script here and I can open this package. 72 00:04:08,390 --> 00:04:09,250 Look, Jason here. 73 00:04:09,460 --> 00:04:11,200 I'm going to put a comma in. 74 00:04:11,200 --> 00:04:16,060 I'm going to see in it and I'm going to write Web back. 75 00:04:16,210 --> 00:04:20,830 So I'm just going to copy the entire thing and I'm going to explain everything in a minute. 76 00:04:21,010 --> 00:04:27,140 And I'm going to say mode development in the dash dash open. 77 00:04:27,250 --> 00:04:32,290 No, this init here is the key word we're going to use when we run the script. 78 00:04:32,510 --> 00:04:41,230 It can be neat or it can be start right now the Moseley's is saying mostly the developers use init or 79 00:04:41,230 --> 00:04:42,960 start, but I'm going to stick with it. 80 00:04:43,120 --> 00:04:50,320 So the purpose is this to run to run the script in the background as soon as we make some changes and 81 00:04:50,320 --> 00:04:52,410 save those changes back. 82 00:04:52,870 --> 00:04:59,710 OK, now I'm just using the same word here as a development because it's going to be faster for us. 83 00:04:59,710 --> 00:05:04,360 We're not finished to go into the production because we're going to change the code a lot. 84 00:05:04,600 --> 00:05:09,970 And now these dash dash open means that it will open the browser automatically. 85 00:05:09,970 --> 00:05:10,250 Right. 86 00:05:10,390 --> 00:05:11,610 So that is the flat. 87 00:05:11,740 --> 00:05:15,540 No, everything else is pretty much it. 88 00:05:16,030 --> 00:05:17,170 We just change it. 89 00:05:17,170 --> 00:05:20,500 This one to here save make sure that you save this one. 90 00:05:20,830 --> 00:05:25,180 We just add it in what else we can do. 91 00:05:25,420 --> 00:05:29,650 Actually we will need to create a couple of other changes. 92 00:05:30,220 --> 00:05:34,000 And let me just let me just think what we need to do next. 93 00:05:36,310 --> 00:05:38,140 Actually we just going to run the script. 94 00:05:38,140 --> 00:05:38,460 Right. 95 00:05:38,590 --> 00:05:43,750 OK, let's run the script, npm run in it and let's see what will happen. 96 00:05:44,740 --> 00:05:45,310 Let's wait. 97 00:05:46,930 --> 00:05:48,460 And I hope it's going to open. 98 00:05:48,460 --> 00:05:49,930 Here it is. 99 00:05:50,500 --> 00:05:54,580 It's opening the index file that I just gave it here. 100 00:05:54,670 --> 00:05:55,120 Right. 101 00:05:55,630 --> 00:06:02,830 So it's saying it's localhost eighty eighty now this is a different so it's a it's a making. 102 00:06:03,880 --> 00:06:06,490 This is like a real HDB server. 103 00:06:06,490 --> 00:06:12,730 It's not a local Huelsman before will we with the full part here was the full but now it's like localhost 104 00:06:12,730 --> 00:06:13,330 in the port. 105 00:06:13,550 --> 00:06:16,570 OK, let's inspect it in seeing the console. 106 00:06:17,200 --> 00:06:20,740 We do have the output right now. 107 00:06:20,740 --> 00:06:22,090 This is awesome. 108 00:06:22,090 --> 00:06:25,240 Is something that we did before from the source. 109 00:06:26,380 --> 00:06:28,240 So let's change that one to. 110 00:06:30,530 --> 00:06:36,320 Let's put a year here, 20, 20, right, save it and now I'm going to go back, I don't refresh, and 111 00:06:36,320 --> 00:06:36,980 here it is. 112 00:06:37,910 --> 00:06:39,760 Now, don't worry about this one here. 113 00:06:40,370 --> 00:06:41,840 You don't need to worry about that one. 114 00:06:41,850 --> 00:06:43,350 That that's not an error. 115 00:06:43,600 --> 00:06:48,220 Now, that was compiled and it was safe. 116 00:06:48,500 --> 00:06:49,490 And now this. 117 00:06:49,490 --> 00:06:50,640 I can't do anything here. 118 00:06:50,640 --> 00:06:50,900 Right. 119 00:06:50,930 --> 00:06:53,500 I can't write anything here because this is running in the background. 120 00:06:53,690 --> 00:06:55,330 So you have an error. 121 00:06:55,490 --> 00:06:56,900 It will be here, right? 122 00:06:57,350 --> 00:06:57,690 Good. 123 00:06:58,970 --> 00:07:04,790 So what we can do here so we can change anything, 20, 20, 21, save it. 124 00:07:04,790 --> 00:07:06,590 And you go back in now. 125 00:07:06,620 --> 00:07:09,160 Actually, it didn't work like that. 126 00:07:09,890 --> 00:07:10,420 No idea. 127 00:07:10,970 --> 00:07:16,910 Create five, press five here and it's going to recompile sometimes these can get stuck right now when 128 00:07:16,910 --> 00:07:18,670 it's recompile is going to be here. 129 00:07:18,680 --> 00:07:18,980 Right. 130 00:07:19,190 --> 00:07:24,410 So make sure that you don't refresh all of the time because this is the most important thing. 131 00:07:24,610 --> 00:07:27,770 This should run in the background, cuz now we know how to do this. 132 00:07:27,830 --> 00:07:29,690 So let's move to something more interesting. 133 00:07:29,990 --> 00:07:37,130 And I want our indexed file here that that's in the source, which just going to close everything else, 134 00:07:38,000 --> 00:07:39,040 close everything else. 135 00:07:39,470 --> 00:07:44,180 So I haven't go over I haven't go over to the structure. 136 00:07:44,270 --> 00:07:47,150 But this is the map that I've shown you the before. 137 00:07:47,330 --> 00:07:50,230 This is the e-mail template that I used. 138 00:07:50,240 --> 00:07:54,270 And there is a link to the styles that we have here, right. 139 00:07:54,290 --> 00:07:56,010 In this cases in the distribution. 140 00:07:56,030 --> 00:07:56,720 Don't worry about it. 141 00:07:56,880 --> 00:07:57,980 I'm just going to explain later. 142 00:07:58,190 --> 00:08:05,780 Now, I just want to copy this entire file and move it back to the distribution folder so how I can 143 00:08:05,780 --> 00:08:06,260 do this. 144 00:08:06,740 --> 00:08:15,650 So this is very easy in Web back, so our code can be automatically copied to the distribution folder 145 00:08:15,800 --> 00:08:21,410 and then it can inject these bundle dodgiest into that file automatically. 146 00:08:21,440 --> 00:08:26,210 So this is super powerful, but we need to use a plugin for that one. 147 00:08:26,480 --> 00:08:30,140 And that plug is called HGL Wetback plugging in. 148 00:08:30,140 --> 00:08:31,580 We need to go back here. 149 00:08:31,910 --> 00:08:34,380 And actually I'm not I'm going to leave this one here to run. 150 00:08:34,670 --> 00:08:38,720 I'm just going to open a new new window here. 151 00:08:38,930 --> 00:08:39,380 Right. 152 00:08:39,550 --> 00:08:44,960 And I'm going to go see the desktop and CD mapi starter. 153 00:08:44,990 --> 00:08:47,610 So this is possible, right? 154 00:08:47,630 --> 00:08:48,660 We can open a new window. 155 00:08:48,680 --> 00:08:53,790 It's not going to be anything wrong with it, with the it's not going to interfere with the other window. 156 00:08:53,820 --> 00:08:57,010 OK, so I'm going to install NPM install. 157 00:08:57,260 --> 00:09:04,820 So I'm doing this just to show you that this is possible html dash web back plugin. 158 00:09:04,830 --> 00:09:07,410 So remember, this is a plugin and I'm going to save it. 159 00:09:07,430 --> 00:09:09,790 This as a dependency as well. 160 00:09:10,010 --> 00:09:17,750 So let's run this one a little bit in here in the package that Jason I should be able to see it. 161 00:09:17,990 --> 00:09:22,280 Here it is HTML weapon web back plugin. 162 00:09:22,580 --> 00:09:26,370 But we need to do a couple of changes in order to use this plugin. 163 00:09:26,630 --> 00:09:28,340 Now, this plugin we need to eat. 164 00:09:28,730 --> 00:09:35,230 We already we install, we need to use it in our web back config file, right. 165 00:09:35,390 --> 00:09:35,870 Unit. 166 00:09:36,980 --> 00:09:48,200 So we need to require it here and we're going to save it in a const called Let's call HP, AML Web back. 167 00:09:48,680 --> 00:09:54,830 You can call whatever you want plugin and that will be equal to require. 168 00:09:55,790 --> 00:09:57,230 So what are we going to require here? 169 00:09:58,100 --> 00:09:59,920 And actually I'm missing a letter here. 170 00:09:59,930 --> 00:10:01,100 That's why he's giving me that one. 171 00:10:01,280 --> 00:10:08,150 And I'm going to say HTML and for some reason should give me the entire one. 172 00:10:08,720 --> 00:10:09,230 Here it is. 173 00:10:11,330 --> 00:10:12,200 HTML what? 174 00:10:12,350 --> 00:10:12,800 Plugging. 175 00:10:12,800 --> 00:10:15,370 So I'm going to require the same plugin that I'm going to use it here. 176 00:10:15,650 --> 00:10:20,900 So you need to use it here and see plugins so you can have more than one plug plugins in. 177 00:10:20,900 --> 00:10:22,420 This takes an area. 178 00:10:22,520 --> 00:10:30,830 Right, OK, inside I'm going to specify if I knew the variable, the constants here I just created 179 00:10:31,190 --> 00:10:34,070 right here we can pass in the object. 180 00:10:34,880 --> 00:10:40,530 So this is a good idea to learn how you can do this so you can pass in an object here. 181 00:10:40,880 --> 00:10:41,270 Good. 182 00:10:41,990 --> 00:10:47,720 Now, here we want the source file to be copied into distribution folder. 183 00:10:47,720 --> 00:10:48,100 Right. 184 00:10:48,260 --> 00:10:50,480 So we need to specify two things. 185 00:10:50,660 --> 00:10:57,770 The first is, will be the file name in the file name will be the index, that HTML. 186 00:10:58,340 --> 00:10:58,700 Right. 187 00:10:58,700 --> 00:11:02,960 And that will be this file here that's coming from this source. 188 00:11:03,410 --> 00:11:10,310 In the second one, we need to say comma here and the second one will be the template and this template. 189 00:11:11,030 --> 00:11:13,610 I want to go to the source. 190 00:11:14,660 --> 00:11:16,520 Sorry, I just mixed it a little bit. 191 00:11:16,610 --> 00:11:26,900 I want to go to the source and then index that hgl so the template is actually our this our HTML structure 192 00:11:26,900 --> 00:11:30,290 that we have before, and I want that one to go. 193 00:11:30,660 --> 00:11:35,820 Back to the distribution folder in inside the distribution folder, we're going to have only the index 194 00:11:35,830 --> 00:11:38,640 right now, just mix those two. 195 00:11:38,670 --> 00:11:39,650 Sorry about this, guys. 196 00:11:40,060 --> 00:11:47,700 Yeah, so this is the starting file source code and this is what we're going to end up here right now 197 00:11:48,780 --> 00:11:50,860 in the distribution folder. 198 00:11:50,880 --> 00:11:54,480 We need to see the index file after we run the command. 199 00:11:54,660 --> 00:11:55,080 OK. 200 00:11:57,530 --> 00:12:03,080 Next, what we need to do, so we just got to close this one, because I do have this index file here, 201 00:12:03,090 --> 00:12:04,030 I'm just going to delete it. 202 00:12:05,150 --> 00:12:12,530 And if you go back to this index file, if you notice something there, I don't have never I don't have 203 00:12:12,530 --> 00:12:14,720 here in the full in the body. 204 00:12:15,800 --> 00:12:16,940 I don't have a script here. 205 00:12:16,940 --> 00:12:17,210 Right. 206 00:12:17,270 --> 00:12:18,260 I don't have script that. 207 00:12:18,690 --> 00:12:23,780 And I want these guys folder, this script, this script to be injected as well. 208 00:12:23,990 --> 00:12:27,020 And this can be done through this plugin. 209 00:12:27,110 --> 00:12:31,940 OK, so what we need to do here is actually I can close this one. 210 00:12:31,950 --> 00:12:32,960 I don't need it anymore. 211 00:12:33,590 --> 00:12:35,420 But this I can stop it. 212 00:12:35,420 --> 00:12:37,070 I'm just going to say control see here. 213 00:12:37,320 --> 00:12:37,940 Yes. 214 00:12:37,970 --> 00:12:41,780 Because I need to stop the current process and I'm going to run it again. 215 00:12:41,780 --> 00:12:43,410 NPM run in it. 216 00:12:43,910 --> 00:12:48,580 Now this should open something for me and let's check this one out. 217 00:12:49,430 --> 00:12:51,310 And here you go. 218 00:12:51,770 --> 00:12:52,610 Why do you have to. 219 00:12:52,610 --> 00:12:52,950 I don't know. 220 00:12:53,180 --> 00:12:59,530 So here we successfully copied this one into the distribution folder. 221 00:12:59,540 --> 00:13:00,760 But where is it? 222 00:13:01,040 --> 00:13:01,790 I don't see it. 223 00:13:01,790 --> 00:13:06,770 I do see the bundle just because we run the development before, but I don't see it now. 224 00:13:07,340 --> 00:13:15,200 This this plugin, what this meant, what he's doing is not storing the data to physically to the disk, 225 00:13:15,200 --> 00:13:19,600 but it's streaming the data, same as we do streaming the Netflix and stuff like that. 226 00:13:19,760 --> 00:13:20,080 Right. 227 00:13:20,240 --> 00:13:24,030 So it's not here, but if you want to see it, it's easy. 228 00:13:24,410 --> 00:13:26,210 So I'm just going to go control see. 229 00:13:26,720 --> 00:13:29,090 But before that, I just want to show you something. 230 00:13:29,750 --> 00:13:34,520 So here I'm just going to open the inspect element and go to the console. 231 00:13:35,030 --> 00:13:35,960 And here it is. 232 00:13:36,290 --> 00:13:39,550 I do have the result from the previous right. 233 00:13:39,560 --> 00:13:44,660 I do have the result from the index and the module that I created before. 234 00:13:45,110 --> 00:13:45,560 Good. 235 00:13:45,560 --> 00:13:46,640 But how is it possible? 236 00:13:46,640 --> 00:13:48,140 Because I don't link it here. 237 00:13:48,470 --> 00:13:55,550 The in the index that HDMI in the source, I don't have any link to the rebundled JS, but look at what's 238 00:13:55,550 --> 00:13:56,170 happening here. 239 00:13:56,180 --> 00:14:00,230 If you do go to the inspector, just going to go like this. 240 00:14:00,770 --> 00:14:04,550 Here is script source Geass Bundall. 241 00:14:04,550 --> 00:14:10,190 Not just so this script is automatically injected into our HTML page. 242 00:14:10,640 --> 00:14:12,320 How powerful and cool is this? 243 00:14:12,630 --> 00:14:16,790 OK, so we are one step closer to what we need, right? 244 00:14:16,820 --> 00:14:22,280 So this is the file that we're going to work I don't need here actually, but how are we going to see 245 00:14:22,280 --> 00:14:22,730 it here? 246 00:14:23,010 --> 00:14:30,920 OK, so I'm just going to control see again, stop this one and I'm going to say npm sorry npm run def. 247 00:14:31,610 --> 00:14:39,230 Now this should run and it should see should save these bundle. 248 00:14:40,370 --> 00:14:42,020 But we have the bundle before. 249 00:14:42,290 --> 00:14:44,030 But also we do have the index now. 250 00:14:44,030 --> 00:14:44,390 Right. 251 00:14:45,620 --> 00:14:48,050 Let's go down, let's go down in here. 252 00:14:48,050 --> 00:14:53,240 You can see this script tag is added and we don't have it here in this index. 253 00:14:53,240 --> 00:14:54,140 We don't have this one. 254 00:14:54,510 --> 00:14:54,910 Right. 255 00:14:55,130 --> 00:14:55,530 Good. 256 00:14:55,760 --> 00:14:59,180 Now that is pretty much it for today's lecture. 257 00:14:59,390 --> 00:15:06,740 Now you know how we can move, we can copy one file using the plugins from the source into the distribution 258 00:15:06,740 --> 00:15:14,720 folder in how we can just add Web back dev server and how that one can run in the background. 259 00:15:14,840 --> 00:15:19,340 So you can use two or three more terminal windows because sometimes you need to install you don't want 260 00:15:19,340 --> 00:15:20,120 to stop this. 261 00:15:20,270 --> 00:15:21,860 So you can do it that way. 262 00:15:21,860 --> 00:15:27,410 Right now, if you want to see the changes that we're going to do here, for example, you can add more 263 00:15:27,410 --> 00:15:34,160 changes here in the module or the index, but you need to run the dev server. 264 00:15:34,250 --> 00:15:41,120 And sometimes when it's stuck here, press F5 or restart the server, the the service, because sometimes 265 00:15:41,120 --> 00:15:45,740 it gets stuck in, you will not be able to see the output and you will try to refresh here. 266 00:15:45,740 --> 00:15:53,660 But that is not how it is working because we just the entire process, we installed a plug ins, we 267 00:15:53,900 --> 00:15:59,120 installed the server because we want that to be automatically and if it's not working means that something 268 00:15:59,120 --> 00:16:00,110 is wrong with the process. 269 00:16:00,380 --> 00:16:02,260 And yeah, that's pretty much it. 270 00:16:02,540 --> 00:16:04,910 So I will see you in the next lecture. 271 00:16:04,910 --> 00:16:05,960 I hope you enjoyed this one. 272 00:16:06,170 --> 00:16:08,960 If you didn't understand, just please go watch it. 273 00:16:09,200 --> 00:16:11,080 And yeah, that's pretty much it. 274 00:16:11,090 --> 00:16:13,850 So stay safe and I will see you in the next one.