1 00:00:02,020 --> 00:00:08,740 Welcome back, ladies and gentlemen, this lecture will be about the best configuration, so this couple 2 00:00:08,740 --> 00:00:14,980 of lectures, we are all going to do the configuration we need to start writing the modules right now. 3 00:00:14,980 --> 00:00:22,540 This lecture is going to be not that probably long, but I will I hope that I'm going to manage to do 4 00:00:22,540 --> 00:00:28,830 it in less than 15 minutes now, which is a common used acid bundler. 5 00:00:28,840 --> 00:00:29,240 Right. 6 00:00:29,410 --> 00:00:31,410 This doesn't mean that it's only for genius. 7 00:00:31,420 --> 00:00:35,080 You can see on the left side you have Geass, SAS. 8 00:00:35,650 --> 00:00:37,240 We have bags, images. 9 00:00:37,480 --> 00:00:45,400 So this is the bundler that can put together multiple files into one. 10 00:00:45,820 --> 00:00:50,980 So what we have on the left side, it will be bundled up into a one file. 11 00:00:51,160 --> 00:00:51,550 Right. 12 00:00:52,120 --> 00:00:54,520 This is about how we write the code here. 13 00:00:54,730 --> 00:01:00,640 You're going to use some of this here and yeah, we're going to use this output, but we're going to 14 00:01:00,640 --> 00:01:02,100 write this manually, by the way. 15 00:01:02,110 --> 00:01:02,450 Right. 16 00:01:02,470 --> 00:01:03,580 Don't worry about this. 17 00:01:03,860 --> 00:01:11,260 And by the end of the this lecture, when you go back to these Web Bega's, Doug, you will understand 18 00:01:11,260 --> 00:01:12,130 what we have done. 19 00:01:12,760 --> 00:01:13,150 No. 20 00:01:14,170 --> 00:01:17,470 So this is the first thing that you need to understand. 21 00:01:17,480 --> 00:01:18,460 Open this web back. 22 00:01:18,460 --> 00:01:21,280 That changed at all and you can read more about it. 23 00:01:21,550 --> 00:01:23,440 Now, the documentation is here. 24 00:01:23,710 --> 00:01:27,730 And also what I want to see that sometimes from time to time the things are changed. 25 00:01:28,000 --> 00:01:35,980 Maybe that the moment I'm recording this is the website documentation have a couple of things. 26 00:01:35,980 --> 00:01:39,400 After that, it can add multiple things and stuff like that. 27 00:01:39,580 --> 00:01:39,950 Right. 28 00:01:39,980 --> 00:01:46,330 So we need to you need as a developers to start reading from here a little bit so I can just grab copy 29 00:01:46,330 --> 00:01:46,960 and paste here. 30 00:01:46,960 --> 00:01:50,050 But that is not what we are going to do now. 31 00:01:50,270 --> 00:01:56,380 The first things first is that we need to open up our our file. 32 00:01:56,590 --> 00:01:57,010 Right. 33 00:01:57,010 --> 00:01:58,300 The MAPI starter. 34 00:01:58,540 --> 00:02:03,210 And also I have here I have open it in the terminal. 35 00:02:03,490 --> 00:02:10,660 So for our project we will bundle the modules into one single file called Bundle JS and that file will 36 00:02:10,660 --> 00:02:16,960 go in this distribution folder here, right in our starting entry file will be our source. 37 00:02:17,380 --> 00:02:18,430 G is indexed. 38 00:02:18,430 --> 00:02:24,190 This will be the entry file we're going to use here now for small projects, you don't need a configuration, 39 00:02:24,430 --> 00:02:30,250 but for the projects that are big, you need a configuration of Watpac. 40 00:02:30,260 --> 00:02:32,470 So our project is not that huge. 41 00:02:32,470 --> 00:02:36,580 But still, I want to show you how this is done. 42 00:02:36,580 --> 00:02:41,740 Now let's create one file called Wetback Config that and we going to create here outside. 43 00:02:42,010 --> 00:02:42,400 So. 44 00:02:42,430 --> 00:02:42,880 Right. 45 00:02:43,240 --> 00:02:44,800 So you can even create from the terminal. 46 00:02:44,800 --> 00:02:58,260 But I'm going to just do it here, web back the web, that dot com fix sorry that J is now I have icons. 47 00:02:58,690 --> 00:03:00,020 I come in here install. 48 00:03:00,070 --> 00:03:04,210 That's why these visual studio will recognize. 49 00:03:04,510 --> 00:03:04,870 Right. 50 00:03:04,870 --> 00:03:12,720 Will recognize these as a [REMOVED] file essentially is a J JavaScript file. 51 00:03:12,760 --> 00:03:20,500 OK, now so this is because I have these icons so you can install different themes and you can have 52 00:03:20,500 --> 00:03:21,130 something similar. 53 00:03:21,640 --> 00:03:27,030 Now this is a regular Geass file and this will be our configuration file. 54 00:03:27,040 --> 00:03:34,130 So inside we need to write one object and we will export this object using no J syntax. 55 00:03:34,150 --> 00:03:36,490 Now, you don't have to worry about this syntax. 56 00:03:36,730 --> 00:03:44,020 So I'm going to say module here that exports that will be equal to the object that I want to export. 57 00:03:44,200 --> 00:03:50,020 Make sure that you close this object here and like that now here. 58 00:03:50,830 --> 00:03:53,750 So we going to export this object right here. 59 00:03:53,790 --> 00:03:57,140 And we're going to write a couple of things here now in the content cobwebbed. 60 00:03:57,160 --> 00:03:59,330 There are four main concepts that you need to know. 61 00:03:59,680 --> 00:04:01,620 So the first is that there is an entry point. 62 00:04:01,630 --> 00:04:09,400 The second thing is that there is an output point and the third is loaders and the fourth is plugins. 63 00:04:09,550 --> 00:04:13,250 So we have four main concepts here now in this lecture. 64 00:04:13,250 --> 00:04:16,630 Are we going to go through the entry point and output point? 65 00:04:17,080 --> 00:04:19,000 Now, let's start with the entry point. 66 00:04:19,000 --> 00:04:25,120 The entry point is where Webcke will start bundling process in our entry point, as I told you, will 67 00:04:25,120 --> 00:04:26,260 be in the source. 68 00:04:26,740 --> 00:04:30,930 G is actually this global app controller that we have here. 69 00:04:30,940 --> 00:04:36,400 This will be our global app controller and this will be will need to be specified here. 70 00:04:36,430 --> 00:04:42,790 Now, this is the file that webpage will look into and find the dependency to bundle into the one file 71 00:04:43,060 --> 00:04:44,080 in everything here. 72 00:04:44,080 --> 00:04:52,540 We were going to put it will bundle until this in this directory distribution and that will be our output 73 00:04:52,540 --> 00:04:52,870 file. 74 00:04:52,900 --> 00:04:53,330 OK. 75 00:04:53,620 --> 00:04:57,820 Right now the entry point is in our source index. 76 00:04:58,100 --> 00:04:59,770 So let's write it together. 77 00:05:00,330 --> 00:05:10,050 So I'm going to start see entry here and I'm going to define Dot SIRC, then I'm going to just folder 78 00:05:10,260 --> 00:05:14,010 then inside index is right now. 79 00:05:15,820 --> 00:05:24,550 Why are you using these dot so one dot and slash means the current folder in this folder inside. 80 00:05:24,790 --> 00:05:32,680 So if you take a look here, it will say dot slash and it will give me these current folders that I 81 00:05:32,680 --> 00:05:34,830 have, distribution node and modules. 82 00:05:35,110 --> 00:05:35,440 Right. 83 00:05:35,620 --> 00:05:40,630 But there is also sometimes you don't need the current folder you need to go up from. 84 00:05:40,900 --> 00:05:45,300 For example, you are inside here and you want to go up in the distribution folder. 85 00:05:45,430 --> 00:05:48,760 So for that reason you need to see double dots and then slash. 86 00:05:49,210 --> 00:05:54,790 Now this is going outside and is going to my desktop and it's looking for for something there. 87 00:05:54,790 --> 00:05:56,250 But I don't want to include anything here. 88 00:05:56,350 --> 00:06:03,520 So my entry point is, is again in the current folder source directory, that just folder and I after 89 00:06:03,520 --> 00:06:07,750 that index Gere's so that is one dot and two dots. 90 00:06:07,750 --> 00:06:08,480 It means that. 91 00:06:08,860 --> 00:06:11,980 So now we define the entry point. 92 00:06:12,040 --> 00:06:15,490 Now let's do the same thing for the output property. 93 00:06:15,760 --> 00:06:20,920 So this output will tell Lepik where to bundle the output file in, where to store it. 94 00:06:21,280 --> 00:06:25,780 Now we need to write output object and how are we going to do this? 95 00:06:25,780 --> 00:06:28,660 So comma here and let's say output. 96 00:06:32,310 --> 00:06:32,680 Oops. 97 00:06:34,740 --> 00:06:37,410 And this will be an object, why? 98 00:06:37,410 --> 00:06:39,230 Because he decided we're going to have a couple of things. 99 00:06:39,780 --> 00:06:43,020 The first thing that we're going to have is called the file name in. 100 00:06:43,020 --> 00:06:44,580 Let's just write the file name. 101 00:06:44,760 --> 00:06:50,850 So the file name then I want to bundle all of these things is going to be bundled is in this file will 102 00:06:50,850 --> 00:06:52,920 be created in the distribution folder. 103 00:06:53,220 --> 00:06:56,010 But how the Reppert will know where to create this file. 104 00:06:56,310 --> 00:06:58,510 For that reason we need to give. 105 00:06:58,530 --> 00:07:01,080 So this bundle just is like a standard. 106 00:07:01,080 --> 00:07:02,730 But you can give it any name you want. 107 00:07:03,960 --> 00:07:06,890 It can be like I don't know def that J is. 108 00:07:06,900 --> 00:07:13,890 But this is a bundle that jazz is like by default used by most of the developers now is a dorjee. 109 00:07:14,010 --> 00:07:19,300 The [REMOVED] needs the path and so we need to define the path here on top. 110 00:07:20,760 --> 00:07:28,740 Now the path I'm going to leave it for now empty because I need to explain you how we're going to get 111 00:07:28,740 --> 00:07:29,160 the best. 112 00:07:29,160 --> 00:07:30,000 Now for the bed. 113 00:07:30,000 --> 00:07:36,020 We need to use the note package that will give us the absolute best that we need to include it. 114 00:07:36,360 --> 00:07:40,530 And every time we include something, we're going to include on top here. 115 00:07:40,530 --> 00:07:45,270 And so let's right here const path. 116 00:07:45,270 --> 00:07:49,090 So don't worry about something of some of this if you don't understand. 117 00:07:49,380 --> 00:07:52,160 So I'm going to say required here, equal to require. 118 00:07:52,380 --> 00:07:58,180 So I'm going to require something and what will be that path. 119 00:07:58,230 --> 00:08:00,310 So this is a no syntax. 120 00:08:00,310 --> 00:08:05,810 So you don't want you don't worry, but everything you include make sure that you include on top. 121 00:08:06,400 --> 00:08:13,720 Cuz now I required a path but now we need to include this back. 122 00:08:13,740 --> 00:08:14,790 So how are we going to do this. 123 00:08:15,220 --> 00:08:16,580 OK, inside here. 124 00:08:16,590 --> 00:08:21,820 I'm just going to delete this because otherwise it will give us an error and I'm going to say path that 125 00:08:21,840 --> 00:08:25,500 resolve next year with this method will take here. 126 00:08:26,110 --> 00:08:31,420 Dear directory name double underscore directory needs. 127 00:08:31,420 --> 00:08:39,030 So this directory variable is given from the note in this variable will hold the absolute best in the 128 00:08:39,030 --> 00:08:41,970 resolved method is actually doing two things. 129 00:08:42,180 --> 00:08:51,330 So I have the the directory name, but I want also to join the distribution folder where our from our 130 00:08:52,200 --> 00:08:53,760 here this distribution folder. 131 00:08:53,760 --> 00:08:58,250 So I want to join with this method and I'm going to say distribution. 132 00:08:58,560 --> 00:09:03,580 So I want the bundle that G is to be stored dear. 133 00:09:03,630 --> 00:09:10,680 Now if you have your other folder, like if you have just folder you can say, OK, slash is and it 134 00:09:10,680 --> 00:09:19,050 will go from distribution folder into that Jesus and it will put this output there now cuz we are pretty 135 00:09:19,050 --> 00:09:20,680 much done here. 136 00:09:21,070 --> 00:09:22,050 OK, now. 137 00:09:24,510 --> 00:09:30,810 Before doing anything else, I just want to make clear so what we have done, so we've cleared the entry 138 00:09:31,890 --> 00:09:37,440 and the entry is our index file that's located in the Gere's. 139 00:09:37,800 --> 00:09:45,180 And also we have defined the output in the output file is where this webpage will bundle all of the 140 00:09:45,180 --> 00:09:47,460 files and it will put it in the output. 141 00:09:47,700 --> 00:09:49,880 So that is pretty much what we have done. 142 00:09:50,130 --> 00:09:54,670 We have to specify the bad in the back, going to hold the absolute best. 143 00:09:54,750 --> 00:10:00,470 And this is directory name is going to be given us from the node directly. 144 00:10:00,780 --> 00:10:03,890 Now to make this Watpac little bit simpler. 145 00:10:04,230 --> 00:10:09,150 We need we have here two essential Moat's the first mode is called the production mode. 146 00:10:09,150 --> 00:10:15,300 And the second mode is is called development mode in this modes modes. 147 00:10:15,300 --> 00:10:17,550 Actually we can define it here. 148 00:10:17,550 --> 00:10:24,960 We're going to see mode and we want to say development know now why we want to use this development. 149 00:10:25,170 --> 00:10:36,090 OK, now the second mode that is development mode will create the output that it's usually without any 150 00:10:36,100 --> 00:10:38,250 magnification right in it. 151 00:10:38,250 --> 00:10:41,870 That is bigger and faster for us because we are in development more. 152 00:10:41,880 --> 00:10:48,660 We don't want our program to find bundle just to to create a smaller Jarius Wright. 153 00:10:48,810 --> 00:10:51,770 We just want do things to go faster. 154 00:10:51,870 --> 00:10:54,300 Now in the production mode. 155 00:10:54,870 --> 00:10:58,110 It's where the Bundle J is. 156 00:10:58,420 --> 00:10:59,730 It's Minifie. 157 00:10:59,760 --> 00:11:00,090 Right. 158 00:11:00,180 --> 00:11:02,410 And you will see the difference later on. 159 00:11:02,410 --> 00:11:03,960 Not this mode here. 160 00:11:04,140 --> 00:11:08,580 I'm just going to remove it at the end of the lecture and I'm going to put it in the scripts because 161 00:11:08,670 --> 00:11:14,520 I don't want to hear these mode to be here so we can just use it in the scripts and we're going to call 162 00:11:14,520 --> 00:11:15,240 it from there. 163 00:11:15,270 --> 00:11:22,530 Right now, as I told you, we use the development mode because we're going to change the code too often. 164 00:11:22,530 --> 00:11:28,530 And we don't want this to be minified into this here, into this bundle just to be minified all the 165 00:11:28,530 --> 00:11:28,860 time. 166 00:11:28,860 --> 00:11:29,090 Right. 167 00:11:29,310 --> 00:11:31,620 We don't want to spend resources and time for that. 168 00:11:32,320 --> 00:11:35,490 OK, now we are done actually here. 169 00:11:35,730 --> 00:11:39,510 What we need to do, we need to test to see if this is working. 170 00:11:39,840 --> 00:11:47,760 Now on the entry files, we have the entry files in the output files, but we need first to create to 171 00:11:48,120 --> 00:11:50,370 actually to write NPM script. 172 00:11:50,790 --> 00:11:54,330 So in our scripts we want to call the Web back. 173 00:11:54,330 --> 00:11:55,680 OK, so I'm done here. 174 00:11:56,550 --> 00:12:00,410 I'm just going to go back at Jason and I'm going to modify this script. 175 00:12:00,420 --> 00:12:01,230 Don't worry about it. 176 00:12:01,350 --> 00:12:03,180 So I'm going to call it development here. 177 00:12:03,510 --> 00:12:07,480 And from this script, I'm just going to call it that bad. 178 00:12:08,100 --> 00:12:10,770 So what basically a simple word means this. 179 00:12:11,160 --> 00:12:18,570 When I run this script through the AMPM here, write that script will call the web back and this will 180 00:12:18,570 --> 00:12:20,310 go to the configuration file. 181 00:12:20,610 --> 00:12:22,170 Any configuration file. 182 00:12:22,170 --> 00:12:26,130 We do have the entry point and we'll say, OK, this is the entry point. 183 00:12:26,280 --> 00:12:33,930 What we have here, everything do and then produce the output in the distribution folder that will actually 184 00:12:34,440 --> 00:12:38,550 be done with this with this NPM scripts. 185 00:12:40,820 --> 00:12:47,150 Now, you know why we use these NPM scripts, so you can see that MPM scripts are used to call the luckly 186 00:12:47,150 --> 00:12:48,500 install dependencies here. 187 00:12:48,740 --> 00:12:56,360 At the moment we do have Lepik only webpage, but we're going to install webpage, Kellye, just real 188 00:12:56,360 --> 00:12:56,770 soon. 189 00:12:56,780 --> 00:13:03,770 Right now, the scripts we're going to call this localist all dependency and we can launch them through 190 00:13:03,770 --> 00:13:04,390 the terminal. 191 00:13:04,700 --> 00:13:11,570 But in order to do that, we need to install another package called WebEx Kellye so we can access the 192 00:13:11,570 --> 00:13:16,850 Web back from the command line interface right in how we were installing the dependencies. 193 00:13:17,270 --> 00:13:24,770 Just simply go here and say NPM install web back dash. 194 00:13:25,220 --> 00:13:31,850 I see that we got to see this one as a dependency and I'm going to leave it to run there. 195 00:13:32,120 --> 00:13:36,560 And this package that Jason file here it is will be modified. 196 00:13:36,560 --> 00:13:43,340 So now we do have these Web Bexhill as a dev, as a development dependency, meaning that we can use 197 00:13:43,340 --> 00:13:46,290 it for only for this project only. 198 00:13:48,020 --> 00:13:50,660 So that is pretty much what we have to do. 199 00:13:50,900 --> 00:13:54,360 Now, let's test this out, OK? 200 00:13:54,410 --> 00:13:59,540 Now, in the source in the Geass here, I do have this main controller here. 201 00:13:59,660 --> 00:14:03,830 I'm going to create another file, another JavaScript file called module. 202 00:14:03,830 --> 00:14:09,620 You can call it whatever you want, module dodgiest, because now I just want to bundle a couple of 203 00:14:09,620 --> 00:14:10,730 modules in here. 204 00:14:10,740 --> 00:14:16,610 What I'm going to do, I'm going to bundle means I'm going to put these two files together and I'm going 205 00:14:16,610 --> 00:14:19,990 to bundle its result into these bundled. 206 00:14:20,690 --> 00:14:21,810 That's why we use the Web. 207 00:14:22,190 --> 00:14:24,200 It's a mumbler right now. 208 00:14:25,070 --> 00:14:31,040 What we're going to write here, OK, in our files, let's console lock something. 209 00:14:31,190 --> 00:14:34,400 So we're going to say console log. 210 00:14:34,610 --> 00:14:41,590 And let's say this is this is coming from with one M, right. 211 00:14:41,960 --> 00:14:47,360 This is coming from module, that JS file. 212 00:14:47,390 --> 00:14:55,610 OK, now also what we can do here, we can say we can export default. 213 00:14:56,060 --> 00:15:06,280 I'm going to explain this one later and I'm going to say this is awesome, OK? 214 00:15:06,420 --> 00:15:13,100 And I'm going to put it exclamation mark there and I'm going to leave it space now here. 215 00:15:13,220 --> 00:15:18,320 Explorer is for exporting things from a module more. 216 00:15:18,320 --> 00:15:20,360 We're going to talk about this in future. 217 00:15:20,540 --> 00:15:20,870 Right? 218 00:15:20,880 --> 00:15:22,480 So we're going to use export. 219 00:15:22,670 --> 00:15:29,520 So this is official ESX module Syntex, and we're going to talk a little bit of exporting things in 220 00:15:29,540 --> 00:15:30,050 future. 221 00:15:30,050 --> 00:15:30,350 Right. 222 00:15:30,590 --> 00:15:37,340 This is how we export things and we can import those things in this index JS file. 223 00:15:37,610 --> 00:15:41,110 So now in our control, we can use the key word import. 224 00:15:42,890 --> 00:15:46,850 So this is your six module Syntex. 225 00:15:46,850 --> 00:15:48,350 We haven't done modules before. 226 00:15:48,620 --> 00:15:54,140 This is why I'm creating this course, this part of the course, because we're going to create we're 227 00:15:54,140 --> 00:15:55,580 going to use these modules. 228 00:15:55,580 --> 00:15:58,280 We're going to use this [REMOVED] label and everything. 229 00:15:58,280 --> 00:16:01,070 We need to be professional developers. 230 00:16:01,100 --> 00:16:03,500 No import in here. 231 00:16:03,500 --> 00:16:05,120 We can see output. 232 00:16:06,470 --> 00:16:08,450 We can just create any variable name. 233 00:16:08,450 --> 00:16:09,470 This is a variable here. 234 00:16:09,620 --> 00:16:16,400 I'm going to say out here from and now we need to specify, OK, from where the input will come from. 235 00:16:16,670 --> 00:16:20,750 So I'm going to say in the current directory and I'm going to select the module. 236 00:16:21,080 --> 00:16:22,640 But take a look here. 237 00:16:22,640 --> 00:16:24,680 I don't use the module JS, right. 238 00:16:25,160 --> 00:16:30,170 I just use module because the spec will know what we are trying to do now. 239 00:16:30,170 --> 00:16:30,590 We don't have. 240 00:16:31,130 --> 00:16:37,370 So remember, we don't have to specify the just now the out will be the variable that will hold. 241 00:16:37,670 --> 00:16:40,970 So this variable will hold the output from this one here. 242 00:16:41,210 --> 00:16:41,570 Right. 243 00:16:41,870 --> 00:16:43,760 That's what we're trying to export. 244 00:16:44,300 --> 00:16:44,690 Good. 245 00:16:45,470 --> 00:16:49,100 And so what we're going to do here comes a lock. 246 00:16:50,840 --> 00:16:59,030 We need to write this to the council and we're going to say, OK, and let's say this was imported. 247 00:17:01,280 --> 00:17:09,800 From the module that J.S. file in, how we call it, we were calling, how we were bringing out what 248 00:17:09,800 --> 00:17:12,670 we have in the variable just like this. 249 00:17:12,680 --> 00:17:12,950 Right. 250 00:17:13,750 --> 00:17:18,680 OK, now the whippet will bundle this together because what Peg is a Bandler? 251 00:17:18,680 --> 00:17:21,200 And we just need to go back to the terminal. 252 00:17:22,460 --> 00:17:24,050 We need to go back to the terminal. 253 00:17:24,380 --> 00:17:34,430 We what we need to do is to type NPM run death in by the MP and run deve. 254 00:17:34,820 --> 00:17:39,380 It will look in the package to Jason, it will go to the script in NPRM. 255 00:17:39,380 --> 00:17:44,690 Dev will know that we have [REMOVED] and it will go to the weapon configuration file. 256 00:17:44,900 --> 00:17:46,430 It will find the entry point. 257 00:17:46,730 --> 00:17:50,450 The entry point is this and we are importing things from the module. 258 00:17:50,810 --> 00:17:51,250 Right. 259 00:17:51,800 --> 00:17:59,240 So we have two files now and what it should do, it should produce a bundle file here in the distribution 260 00:17:59,240 --> 00:17:59,750 directory. 261 00:17:59,960 --> 00:18:03,260 OK, save everything, save here everything. 262 00:18:03,830 --> 00:18:09,220 He'd enter here and I expect that I'm going to see Bundle Dodgiest soon. 263 00:18:09,590 --> 00:18:11,510 It is Bundle Dodgiest. 264 00:18:11,510 --> 00:18:15,980 It's four point sixty two kilobytes and that is created. 265 00:18:15,980 --> 00:18:18,470 Let's go back here in the distribution. 266 00:18:18,470 --> 00:18:19,010 Here it is. 267 00:18:19,670 --> 00:18:22,270 Now, if I open this one, you will say, wow, what is this? 268 00:18:23,000 --> 00:18:26,870 So this is what Watpac does in the background, right? 269 00:18:26,870 --> 00:18:29,700 You don't have to understand it, but here it is here. 270 00:18:29,960 --> 00:18:37,070 Some of our code that we read we were reading is here now how we can see the output, actually the output. 271 00:18:37,070 --> 00:18:37,700 We can see it. 272 00:18:37,940 --> 00:18:41,840 What's happening here, OK, for some reason wasn't so here. 273 00:18:41,840 --> 00:18:45,050 I need to create the index file. 274 00:18:45,080 --> 00:18:47,570 OK, I'm just going to create HTML files. 275 00:18:47,570 --> 00:18:54,650 Sorry, I'm going to create a result that html in because I have Emet installed here. 276 00:18:54,650 --> 00:18:59,050 Actually it's coming straight out of the box for, for this text editor. 277 00:18:59,060 --> 00:19:05,900 You can just create a sorry exclamation mark and hit that and that would increase, that will create 278 00:19:06,530 --> 00:19:07,690 an HTML markup. 279 00:19:08,090 --> 00:19:14,990 Now one things here, it's essential we need to call this bundle not just here in the body. 280 00:19:14,990 --> 00:19:16,580 So SIRC. 281 00:19:20,210 --> 00:19:28,640 So I was thinking that it will give me so I will say script, right, sirc so write script and it will 282 00:19:28,640 --> 00:19:31,760 give you the entire path in here. 283 00:19:31,760 --> 00:19:34,610 We need just called the bundle that J is right. 284 00:19:34,760 --> 00:19:38,970 OK, now how remember how we use the terminal to open up this one. 285 00:19:39,380 --> 00:19:42,920 Now we can go the seed back to the distribution folder. 286 00:19:44,180 --> 00:19:47,860 So I'm actually here and I need to open this one. 287 00:19:47,870 --> 00:19:56,600 So I think in was open that result that HTML like this result the HTML, but we don't have open here. 288 00:19:56,600 --> 00:19:58,790 We need to say start in windows. 289 00:19:59,450 --> 00:20:02,330 So start result not html. 290 00:20:02,540 --> 00:20:12,890 So this cool, this will open up our this will open up our e-mail file and if we go inspect, if we 291 00:20:12,890 --> 00:20:15,630 go to the console, look at the output. 292 00:20:16,880 --> 00:20:19,250 This is coming from the module JS file. 293 00:20:19,490 --> 00:20:29,690 This was imported from module JS file and this is awesome cuz now if we did have something else here, 294 00:20:29,870 --> 00:20:35,900 like we can just export in the source in the index, we can just put it here whenever we want. 295 00:20:36,140 --> 00:20:42,200 It can be a number, it can be float's, it can be anything, it can be boolean, trud can be streamed 296 00:20:42,200 --> 00:20:46,370 like this so we can export pretty much a function sorry. 297 00:20:46,370 --> 00:20:47,740 So we can export a couple of things. 298 00:20:47,810 --> 00:20:50,710 And I was saying fifteen minutes but this is going too long. 299 00:20:51,110 --> 00:20:54,700 Now one more thing that I want to show you there. 300 00:20:55,400 --> 00:20:57,020 I'm just going to open this here. 301 00:20:57,230 --> 00:21:02,540 I'm just going to remove this mode from here for development and I'm just going to include it here. 302 00:21:02,570 --> 00:21:02,930 Right. 303 00:21:03,290 --> 00:21:12,790 So I need to just modify a couple of things and I'm going to say [REMOVED] mode and I'm going to say development. 304 00:21:14,420 --> 00:21:22,090 Now, this is for the development, but what if I want to have the final bill to be the production? 305 00:21:22,340 --> 00:21:25,610 So here what we can do is say build. 306 00:21:26,420 --> 00:21:30,680 We're going to create an additional script here and I'm going to say [REMOVED]. 307 00:21:33,040 --> 00:21:38,950 And I'm going to say mode here, I'm going to specify the production. 308 00:21:40,530 --> 00:21:46,950 Now, maybe this is not clear for now, but when we run this development mode, it created this Bundle 309 00:21:46,950 --> 00:21:49,310 Gere's file and this one was bigger, right? 310 00:21:49,470 --> 00:21:51,750 As I told you, it's not going to be compressed. 311 00:21:52,440 --> 00:21:56,900 But now let's run this line here, the build. 312 00:21:57,330 --> 00:21:58,290 So how we can do this. 313 00:21:58,810 --> 00:22:05,670 I'm going to go back KDDI, go back to the MAPI starter and to that folder because I was in the distribution 314 00:22:05,670 --> 00:22:09,990 folder and I'm going to say ampm run, build. 315 00:22:10,440 --> 00:22:15,840 So whatever we put in here, we just run it and let's see what's happening. 316 00:22:18,040 --> 00:22:25,960 OK, now look at here, it's one point zero five kilobyte and here was four, so that is massive decrease. 317 00:22:26,110 --> 00:22:31,380 So if I go here, this Bundakji is file will be one single line. 318 00:22:31,960 --> 00:22:32,890 It will still work. 319 00:22:33,080 --> 00:22:34,120 But this is for the production. 320 00:22:34,120 --> 00:22:37,930 When we are actually finished in here, it will be the same result. 321 00:22:38,680 --> 00:22:41,740 That's pretty much it we created today. 322 00:22:41,740 --> 00:22:47,950 What we learn is to create the web, that configuration and regulation. 323 00:22:47,980 --> 00:22:53,680 I think that you should, if you don't understand, go through this lecture again. 324 00:22:53,680 --> 00:22:57,180 But the next lecture, it will be more interesting. 325 00:22:57,190 --> 00:22:58,960 So stay with me and I will see you then.