1 00:00:02,040 --> 00:00:04,340 Now when we added third-party libraries 2 00:00:04,340 --> 00:00:07,220 to our browser-side code, 3 00:00:07,220 --> 00:00:11,080 no matter if it was CSS or JavaScript code, 4 00:00:11,080 --> 00:00:15,140 we worked with link or script HTML elements 5 00:00:15,140 --> 00:00:19,790 where we simply used an external URL resource path, 6 00:00:19,790 --> 00:00:23,710 so where we simply included an external package. 7 00:00:23,710 --> 00:00:25,640 Now, that won't work here 8 00:00:25,640 --> 00:00:28,470 because here we don't have a HTML document 9 00:00:28,470 --> 00:00:30,530 into which we import anything. 10 00:00:30,530 --> 00:00:32,460 Instead here, we have code 11 00:00:32,460 --> 00:00:34,470 that will never reach the browser 12 00:00:34,470 --> 00:00:37,550 and that will instead be executed here 13 00:00:37,550 --> 00:00:41,060 on the remote machine if we deploy this code. 14 00:00:41,060 --> 00:00:43,730 At the moment, on our local machine. 15 00:00:43,730 --> 00:00:45,970 And therefore, we need a different mechanism 16 00:00:45,970 --> 00:00:48,703 for including external packages. 17 00:00:49,560 --> 00:00:51,890 Now, we are including a built-in package 18 00:00:51,890 --> 00:00:53,430 with the require method 19 00:00:53,430 --> 00:00:55,260 and therefore, you could think 20 00:00:55,260 --> 00:00:59,300 that you maybe can also require some external package. 21 00:00:59,300 --> 00:01:02,050 For example, something like https 22 00:01:02,050 --> 00:01:05,450 and then we wanna include the Express package, 23 00:01:05,450 --> 00:01:09,810 so maybe they have a URL like expressjs.com 24 00:01:09,810 --> 00:01:12,253 from which we can load that package. 25 00:01:13,270 --> 00:01:15,910 But that's not how it works. 26 00:01:15,910 --> 00:01:19,090 Instead, including third-party packages 27 00:01:19,090 --> 00:01:23,580 is such a common task in NodeJS development, 28 00:01:23,580 --> 00:01:27,150 in advanced web development in general to be precise, 29 00:01:27,150 --> 00:01:30,379 NodeJS has a built-in mechanism 30 00:01:30,379 --> 00:01:34,900 for installing third-party packages into this project 31 00:01:34,900 --> 00:01:38,600 and for then using these packages in the code. 32 00:01:38,600 --> 00:01:42,200 And for that, we'll have to open the terminal again, 33 00:01:42,200 --> 00:01:43,840 this integrated terminal, 34 00:01:43,840 --> 00:01:47,470 which is navigated into this project folder here, 35 00:01:47,470 --> 00:01:49,150 and in this terminal, 36 00:01:49,150 --> 00:01:52,400 we will now run the npm command. 37 00:01:52,400 --> 00:01:55,090 Before we executed the node command 38 00:01:55,090 --> 00:01:59,000 to run our app.js file with NodeJS. 39 00:01:59,000 --> 00:02:01,000 Now we'll use a different command, 40 00:02:01,000 --> 00:02:03,070 which was also made available 41 00:02:03,070 --> 00:02:06,700 by us installing NodeJS on our system, 42 00:02:06,700 --> 00:02:09,720 and that's the npm command. 43 00:02:09,720 --> 00:02:13,000 Npm stands for Node Package Manager, 44 00:02:13,000 --> 00:02:14,890 and it is an extra tool, 45 00:02:14,890 --> 00:02:17,430 an extra command that was installed together 46 00:02:17,430 --> 00:02:20,020 with NodeJS and it is a command 47 00:02:20,020 --> 00:02:23,280 that helps us install third-party packages 48 00:02:23,280 --> 00:02:24,533 into this project. 49 00:02:25,630 --> 00:02:28,420 For that, we'll have an npm install command 50 00:02:28,420 --> 00:02:31,810 but before we can execute this sub-command here, 51 00:02:31,810 --> 00:02:34,600 we first of all have to run npm init 52 00:02:34,600 --> 00:02:38,280 to turn this standard folder on our system 53 00:02:38,280 --> 00:02:41,290 into a NodeJS-managed project 54 00:02:41,290 --> 00:02:43,460 into which we then will be able 55 00:02:43,460 --> 00:02:45,863 to install third-party packages. 56 00:02:46,790 --> 00:02:49,780 And therefore, you now need to run npm init 57 00:02:49,780 --> 00:02:51,890 in this project folder, 58 00:02:51,890 --> 00:02:54,723 and this will then ask you a couple of questions. 59 00:02:55,770 --> 00:02:58,320 It will, for example, prompt you 60 00:02:58,320 --> 00:03:00,450 to choose a package name. 61 00:03:00,450 --> 00:03:03,060 Now, the package name is up to you, 62 00:03:03,060 --> 00:03:06,890 and it's suggesting a default to us here in parentheses. 63 00:03:06,890 --> 00:03:09,380 That's the default value it will use. 64 00:03:09,380 --> 00:03:12,120 And that's simply my folder name. 65 00:03:12,120 --> 00:03:13,610 And I'm fine with that, 66 00:03:13,610 --> 00:03:17,040 so I will just hit Enter without entering anything 67 00:03:17,040 --> 00:03:18,793 to confirm that default. 68 00:03:19,860 --> 00:03:23,550 It then wants us to assign a version to our project, 69 00:03:23,550 --> 00:03:25,600 and that's not too important here 70 00:03:25,600 --> 00:03:27,350 since we won't publish this 71 00:03:27,350 --> 00:03:29,590 as a standalone third-party package 72 00:03:29,590 --> 00:03:31,090 to other developers, 73 00:03:31,090 --> 00:03:33,910 hence versioning doesn't matter to us here. 74 00:03:33,910 --> 00:03:37,740 Hence, we can also confirm the default 1.0.0 75 00:03:37,740 --> 00:03:39,223 by again hitting Enter. 76 00:03:40,390 --> 00:03:43,080 Now we can enter a human-readable description 77 00:03:43,080 --> 00:03:46,240 but you can also omit this by hitting Enter again. 78 00:03:46,240 --> 00:03:48,640 Alternatively, you could enter something 79 00:03:48,640 --> 00:03:50,100 like getting started 80 00:03:50,100 --> 00:03:53,773 with Node and Express but that's up to you. 81 00:03:54,960 --> 00:03:56,730 Now I'll confirm this with Enter 82 00:03:56,730 --> 00:04:00,060 and now we have to define an entry point. 83 00:04:00,060 --> 00:04:03,210 Basically, the main file, the main code file 84 00:04:03,210 --> 00:04:06,610 that should be executed once this application runs, 85 00:04:06,610 --> 00:04:10,070 and here we can confirm that default app.js, 86 00:04:10,070 --> 00:04:12,823 though this is also not too important right now. 87 00:04:14,120 --> 00:04:16,329 Now, you can omit this test command 88 00:04:16,329 --> 00:04:19,216 and just not enter anything and hit Enter, 89 00:04:19,216 --> 00:04:22,800 and then here I'm also asked for a Git repository 90 00:04:22,800 --> 00:04:24,800 where I wanna store my code. 91 00:04:24,800 --> 00:04:28,170 You will probably not be asked to provide that 92 00:04:28,170 --> 00:04:29,560 if you're not using Git, 93 00:04:29,560 --> 00:04:30,840 which you probably aren't. 94 00:04:30,840 --> 00:04:34,000 You probably don't even know what that is, and that's fine. 95 00:04:34,000 --> 00:04:36,100 We'll dive into that later in the course. 96 00:04:36,100 --> 00:04:38,030 And hence, you can ignore that setting. 97 00:04:38,030 --> 00:04:40,113 I will just use my default here. 98 00:04:41,280 --> 00:04:44,350 Now, you can also add some extra keywords here 99 00:04:44,350 --> 00:04:46,730 if you wanna tag your project 100 00:04:46,730 --> 00:04:49,040 but again, that's not too important here. 101 00:04:49,040 --> 00:04:50,780 And hence, I'll hit Enter again. 102 00:04:50,780 --> 00:04:53,540 Then you can enter your name as an author 103 00:04:53,540 --> 00:04:55,050 of this project 104 00:04:55,050 --> 00:04:58,530 to make it clear who's working on that project. 105 00:04:58,530 --> 00:05:00,350 And you can also choose a license, 106 00:05:00,350 --> 00:05:02,410 which only really matters if you plan 107 00:05:02,410 --> 00:05:04,000 on distributing that code, 108 00:05:04,000 --> 00:05:07,860 and if you wanna make that code usable by others as well. 109 00:05:07,860 --> 00:05:11,380 I'll go for MIT here but it really doesn't matter. 110 00:05:11,380 --> 00:05:13,670 Last but not least, you see a summary 111 00:05:13,670 --> 00:05:15,690 and by hitting Enter one last time, 112 00:05:15,690 --> 00:05:16,993 you confirm all of that. 113 00:05:18,540 --> 00:05:22,250 Now, this did now create such a package.json file, 114 00:05:22,250 --> 00:05:24,720 and this is an important file. 115 00:05:24,720 --> 00:05:27,150 In there, I'll remove this repository setting, 116 00:05:27,150 --> 00:05:28,620 which you might not even have. 117 00:05:28,620 --> 00:05:31,797 And then I have a pretty lean file here. 118 00:05:31,797 --> 00:05:35,640 Also get rid of bugs and homepage though 119 00:05:35,640 --> 00:05:38,683 so that my file looks something like that. 120 00:05:39,570 --> 00:05:41,940 Now, that's basically a configuration file 121 00:05:41,940 --> 00:05:45,220 for this project, for this NodeJS project 122 00:05:45,220 --> 00:05:47,900 and we need such a configuration file 123 00:05:47,900 --> 00:05:52,020 to then successfully install third-party packages. 124 00:05:52,020 --> 00:05:53,870 You can always tweak the information 125 00:05:53,870 --> 00:05:57,010 which you entered before in the command line directly here 126 00:05:57,010 --> 00:05:58,880 in the package.json file 127 00:05:58,880 --> 00:06:02,593 if you, for example, wanna change your description here. 128 00:06:04,360 --> 00:06:08,470 Now, as a little side note, JSON is a file format. 129 00:06:08,470 --> 00:06:11,030 It's basically a standard text file 130 00:06:11,030 --> 00:06:13,950 but following certain formatting rules 131 00:06:13,950 --> 00:06:16,480 and it looks a bit like a JavaScript object 132 00:06:16,480 --> 00:06:18,130 if you take a closer look. 133 00:06:18,130 --> 00:06:20,890 The main difference is that all your keys 134 00:06:20,890 --> 00:06:23,280 are wrapped by double quotes, 135 00:06:23,280 --> 00:06:27,840 and then you have various values stored for those keys. 136 00:06:27,840 --> 00:06:30,960 And that is a format which we'll also see again later 137 00:06:30,960 --> 00:06:33,730 in the course since it's also a standard format 138 00:06:33,730 --> 00:06:37,820 for submitting data between a browser and a server, 139 00:06:37,820 --> 00:06:40,910 for example, or vice versa. 140 00:06:40,910 --> 00:06:43,080 For the moment, we'll not use it for that though 141 00:06:43,080 --> 00:06:46,010 but we need this config file for this project 142 00:06:46,010 --> 00:06:49,000 to now also use the npm install command 143 00:06:49,000 --> 00:06:52,110 to install third-party packages. 144 00:06:52,110 --> 00:06:55,120 And that was the main point of this lecture. 145 00:06:55,120 --> 00:06:58,440 We wanted to install Express.js. 146 00:06:58,440 --> 00:07:01,430 And for that, I'll reopen that terminal, 147 00:07:01,430 --> 00:07:03,620 this built-in command line, 148 00:07:03,620 --> 00:07:07,860 and now with that package.json file that was created, 149 00:07:07,860 --> 00:07:10,303 we can now run npm install, 150 00:07:11,450 --> 00:07:13,353 and then install express. 151 00:07:14,680 --> 00:07:17,860 Now, you can't enter any arbitrary name here. 152 00:07:17,860 --> 00:07:21,720 Instead, you have to install one of the third-party packages 153 00:07:21,720 --> 00:07:25,440 that is listed on the official npm repository, 154 00:07:25,440 --> 00:07:27,470 the npm library. 155 00:07:27,470 --> 00:07:29,200 For that, you can simply google 156 00:07:29,200 --> 00:07:30,690 or search for npm, 157 00:07:30,690 --> 00:07:33,160 and you should find npmjs.com. 158 00:07:33,160 --> 00:07:36,020 On this page, you can find all the packages 159 00:07:36,020 --> 00:07:38,620 that you can install through npm. 160 00:07:38,620 --> 00:07:41,130 And I will warn you, there are hundreds 161 00:07:41,130 --> 00:07:43,830 of thousands of packages. 162 00:07:43,830 --> 00:07:46,240 So you typically don't go there and look 163 00:07:46,240 --> 00:07:49,140 for packages that sound interesting. 164 00:07:49,140 --> 00:07:52,340 Instead, you typically encounter packages 165 00:07:52,340 --> 00:07:55,300 that you want to install in tutorials, courses, 166 00:07:55,300 --> 00:07:58,660 blog articles or something like that. 167 00:07:58,660 --> 00:08:00,790 Here if you search for Express, 168 00:08:00,790 --> 00:08:02,570 you will find that Express package 169 00:08:02,570 --> 00:08:04,580 that we did just install. 170 00:08:04,580 --> 00:08:05,690 Here it is. 171 00:08:05,690 --> 00:08:08,320 And here you can learn a bit more about it. 172 00:08:08,320 --> 00:08:10,450 You see how often it's being used. 173 00:08:10,450 --> 00:08:12,530 This is a super popular package, 174 00:08:12,530 --> 00:08:14,540 which is being used a lot. 175 00:08:14,540 --> 00:08:17,120 And if you wonder how you would know 176 00:08:17,120 --> 00:08:19,336 that this is a good package to install, 177 00:08:19,336 --> 00:08:22,310 well, you'll learn about it in this course. 178 00:08:22,310 --> 00:08:26,040 And over time, as you gather more and more experience 179 00:08:26,040 --> 00:08:27,300 as a web developer, 180 00:08:27,300 --> 00:08:29,940 you will know more and more common packages 181 00:08:29,940 --> 00:08:32,940 that solve certain problems for you. 182 00:08:32,940 --> 00:08:37,610 And here Express.js will make building NodeJS backends 183 00:08:37,610 --> 00:08:40,179 as a whole easier for us. 184 00:08:40,179 --> 00:08:43,820 That's why we installed it or why we will install it 185 00:08:43,820 --> 00:08:47,003 by running npm install and then this package name. 186 00:08:48,370 --> 00:08:49,930 Here I can now hit Enter 187 00:08:49,930 --> 00:08:51,860 and this will now download this package 188 00:08:51,860 --> 00:08:53,890 from the npm repository 189 00:08:53,890 --> 00:08:57,230 and install it into this local project. 190 00:08:57,230 --> 00:08:59,380 And you can see it there. 191 00:08:59,380 --> 00:09:02,890 This node_modules folder was added here 192 00:09:02,890 --> 00:09:04,270 and that is a folder 193 00:09:04,270 --> 00:09:06,868 that includes all the installed packages. 194 00:09:06,868 --> 00:09:08,610 Now, if you open it, 195 00:09:08,610 --> 00:09:10,920 you will see quite a bit of packages here, 196 00:09:10,920 --> 00:09:12,910 quite a lot of packages, 197 00:09:12,910 --> 00:09:16,340 and you will also see your express package here. 198 00:09:16,340 --> 00:09:18,460 But also a couple of other packages. 199 00:09:18,460 --> 00:09:22,040 The reason for that is that Express itself 200 00:09:22,040 --> 00:09:24,020 also has dependencies. 201 00:09:24,020 --> 00:09:29,000 So express is a package that depends on other packages. 202 00:09:29,000 --> 00:09:32,250 And those other packages also might depend 203 00:09:32,250 --> 00:09:35,080 on yet other packages. 204 00:09:35,080 --> 00:09:36,224 And because of that, 205 00:09:36,224 --> 00:09:38,330 when you run npm install, 206 00:09:38,330 --> 00:09:41,450 you actually install not just the package itself, 207 00:09:41,450 --> 00:09:45,330 express, but also all the dependencies this package needs 208 00:09:45,330 --> 00:09:47,020 to work correctly. 209 00:09:47,020 --> 00:09:51,450 And all those packages are stored in node_modules. 210 00:09:51,450 --> 00:09:54,950 And we will then be able to include the installed packages 211 00:09:54,950 --> 00:09:57,593 from there and use them in our own code. 212 00:09:58,760 --> 00:10:01,720 Now, in addition to this node_modules folder, 213 00:10:01,720 --> 00:10:05,840 in package.json, you'll find this new dependencies entry, 214 00:10:05,840 --> 00:10:07,600 which was not there before. 215 00:10:07,600 --> 00:10:09,000 And that's simply a list 216 00:10:09,000 --> 00:10:11,960 of all the third-party packages you installed 217 00:10:11,960 --> 00:10:14,033 into this NodeJS project. 218 00:10:15,158 --> 00:10:17,742 And whenever you run the npm install command 219 00:10:17,742 --> 00:10:19,847 and you install a new package, 220 00:10:19,847 --> 00:10:22,740 this entry will change and list this new package 221 00:10:22,740 --> 00:10:25,630 with the version that was installed. 222 00:10:25,630 --> 00:10:29,430 This version can matter if you work on a bigger project 223 00:10:29,430 --> 00:10:31,830 and some packages change over time, 224 00:10:31,830 --> 00:10:35,060 and you maybe wanna lock in a specific version 225 00:10:35,060 --> 00:10:38,710 to ensure that your project doesn't crash 226 00:10:38,710 --> 00:10:40,760 because some package changed 227 00:10:40,760 --> 00:10:43,620 and maybe doesn't work as before anymore. 228 00:10:43,620 --> 00:10:45,610 That's why you can lock in a version here. 229 00:10:45,610 --> 00:10:47,350 But here you can simply leave the version 230 00:10:47,350 --> 00:10:48,910 that was installed for you, 231 00:10:48,910 --> 00:10:51,520 even if it's not the same version as you see 232 00:10:51,520 --> 00:10:52,490 in this video. 233 00:10:52,490 --> 00:10:54,640 This won't be a problem. 234 00:10:54,640 --> 00:10:57,350 We also got the package-lock.json file 235 00:10:57,350 --> 00:10:59,830 that's basically a more detailed registry 236 00:10:59,830 --> 00:11:02,410 of all the packages that were installed 237 00:11:02,410 --> 00:11:04,873 and their versions, and you can ignore that. 238 00:11:05,800 --> 00:11:09,410 You should not delete node_modules or package-lock 239 00:11:09,410 --> 00:11:11,220 or package.json though 240 00:11:11,220 --> 00:11:12,780 because if you would do that, 241 00:11:12,780 --> 00:11:15,460 this project wouldn't work correctly anymore, 242 00:11:15,460 --> 00:11:16,490 and you would not be able 243 00:11:16,490 --> 00:11:18,803 to use the third-party package anymore. 244 00:11:19,910 --> 00:11:22,637 You can theoretically delete node_modules 245 00:11:22,637 --> 00:11:26,563 but then you will always have to rerun npm install 246 00:11:26,563 --> 00:11:29,440 without express, just like that, 247 00:11:29,440 --> 00:11:32,530 to reinstall all the dependencies that are listed 248 00:11:32,530 --> 00:11:36,240 in package.json, and then if you refresh here, 249 00:11:36,240 --> 00:11:38,203 you'll see node_modules again. 250 00:11:39,040 --> 00:11:40,190 That can be useful 251 00:11:40,190 --> 00:11:43,970 because the node_modules folder can get pretty big 252 00:11:43,970 --> 00:11:46,150 since it contains a lot of packages. 253 00:11:46,150 --> 00:11:48,820 And therefore, if you wanna share your project code 254 00:11:48,820 --> 00:11:50,430 with other developers, 255 00:11:50,430 --> 00:11:53,350 it is often useful to delete node_modules, 256 00:11:53,350 --> 00:11:57,490 and let those developers run npm install on their systems 257 00:11:57,490 --> 00:12:00,050 to install those packages on their systems 258 00:12:00,050 --> 00:12:02,290 so that you can share a lean project 259 00:12:02,290 --> 00:12:04,900 without all these dependencies. 260 00:12:04,900 --> 00:12:08,870 That's why all the code snapshots you find in this course 261 00:12:08,870 --> 00:12:12,210 also won't have the node_modules folder 262 00:12:12,210 --> 00:12:14,620 because if you download these attachments, 263 00:12:14,620 --> 00:12:16,580 you can simply run npm install 264 00:12:16,580 --> 00:12:19,000 in the extracted code snapshots 265 00:12:19,000 --> 00:12:21,340 and then this will install these dependencies 266 00:12:21,340 --> 00:12:22,840 on your local machine 267 00:12:22,840 --> 00:12:25,310 but the download simply will be smaller 268 00:12:25,310 --> 00:12:28,323 and will not be bloated by all these packages. 269 00:12:29,790 --> 00:12:31,890 And that was now quite a bit of talking 270 00:12:31,890 --> 00:12:34,940 about packages and NodeJS projects, 271 00:12:34,940 --> 00:12:37,730 and how you install those packages. 272 00:12:37,730 --> 00:12:42,080 But this is a vital aspect of building NodeJS applications, 273 00:12:42,080 --> 00:12:44,523 and hence, it is important to understand that. 274 00:12:45,480 --> 00:12:47,870 With Express installed though, 275 00:12:47,870 --> 00:12:49,490 we can now continue 276 00:12:49,490 --> 00:12:52,660 and we can now start writing some Express.js code 277 00:12:52,660 --> 00:12:55,543 and see how that makes our life a bit easier.