WEBVTT 00:04.150 --> 00:08.950 Let's go ahead and talk more about this package, start, Jason, and try to create over some files 00:08.950 --> 00:10.120 in this application. 00:10.150 --> 00:11.580 Hey there, everyone, at this year. 00:11.590 --> 00:15.150 And let's go ahead and get started further diving deep into this. 00:15.160 --> 00:19.060 So when you open up this package there, Jason, you're going to see that there are some script files. 00:19.060 --> 00:23.230 Rest of them are pretty obvious, like the main file is indexed shares description version. 00:23.230 --> 00:27.940 We get that we are already understanding that part of bit dependencies we have already talked about 00:27.940 --> 00:28.120 it. 00:28.120 --> 00:32.200 I will install a dev dependency in this video so that you can see the difference between them here. 00:32.200 --> 00:34.060 But what are these scripts now? 00:34.060 --> 00:38.650 These scripts are really, really important when you put things into production or even if you run things 00:38.650 --> 00:44.020 locally, this is the very first file which you should be looking up if the project is coming from somebody 00:44.020 --> 00:44.350 else. 00:44.350 --> 00:45.940 So make sure you take care of that. 00:46.090 --> 00:49.450 The first modification that we are going to do is modify a start script. 00:49.450 --> 00:51.580 So just go ahead and replace it with the start. 00:51.700 --> 00:57.430 And in here we're going to say that I want to run a file with the help of Node and the file name is 00:57.430 --> 00:59.050 Index dot JS. 00:59.080 --> 01:01.840 Now similar to this, we can create much more of these scripts. 01:01.840 --> 01:05.980 Like this is a start script, there can be a dev script, there can be a test script. 01:06.040 --> 01:07.900 You can just pretty much name anything. 01:07.900 --> 01:12.280 The way how we run this one is simply say NPM start now. 01:12.280 --> 01:17.710 NPM is a package manager which will look into the current directory and you should be able to see your 01:17.710 --> 01:19.450 package store JSON in that directory. 01:19.480 --> 01:23.500 As soon as it sees packages or JSON file, it will come into the script section and we'll see. 01:23.500 --> 01:24.460 Okay, there is a start. 01:24.460 --> 01:27.520 What should I do when somebody gives me a command of start? 01:27.550 --> 01:31.990 You simply go ahead and say Node indexed or JS this will run it. 01:32.020 --> 01:33.670 Can I run it manually also? 01:33.670 --> 01:34.330 Yes, of course. 01:34.330 --> 01:34.870 Yes, of course. 01:34.870 --> 01:37.330 You can run this one directly as well. 01:37.750 --> 01:39.130 Let's go ahead and save this one. 01:39.130 --> 01:40.000 This is all good. 01:40.000 --> 01:41.890 Let's go ahead and create our very first file. 01:41.890 --> 01:44.710 This is going to be index dot JS. 01:44.710 --> 01:49.390 There we go, nice and easy and all we are going to do here is console.log. 01:49.390 --> 01:51.940 I know, not very interesting, but this is what we'll be doing. 01:51.940 --> 01:54.310 So we'll be saying hello from AE. 01:54.310 --> 01:56.110 This is all what we'll be doing now. 01:56.110 --> 01:57.460 How can I run this file? 01:57.460 --> 02:03.100 Now, obviously you can go ahead and run this file simply by saying Node and make sure the file is in 02:03.100 --> 02:03.910 the current directory. 02:03.910 --> 02:09.070 When you do an LZ or Dir on Windows, you should be able to see index or JS. 02:09.520 --> 02:15.220 Now, once you're done with that, you simply go ahead and say let's first run it by the node so node 02:15.220 --> 02:17.350 and then simply say index or JS. 02:17.350 --> 02:23.980 It gives me the same result and I will also get the same result when I say end PM start because technically 02:23.980 --> 02:26.560 and PM start is also issuing the same command. 02:26.560 --> 02:28.900 So I'm getting the hello from AE. 02:28.930 --> 02:33.520 Definitely a couple of more things about versioning of the app and everything, but end of the day, 02:33.520 --> 02:34.960 we are getting the same result. 02:34.960 --> 02:40.690 That is all clear now since we have also installed the Express, let's go ahead and use that express. 02:40.690 --> 02:44.890 But before that I promised you I'll talk about the dev dependencies, so let's go ahead and do that. 02:45.010 --> 02:50.230 Now what happens when I say instead of AE, I go ahead and say, hey, take or your name. 02:50.230 --> 02:52.570 I go ahead and don't see the output directly. 02:52.570 --> 02:55.900 I have to say NPM start again and then I see the changes. 02:55.900 --> 03:00.040 Now this is such a common practice that you want to keep on writing in your file and want to see the 03:00.040 --> 03:01.330 output immediately. 03:01.330 --> 03:04.930 Almost somebody needs a refresh, just like a hot reloading. 03:04.930 --> 03:07.840 We have this famous hot reloading available to us. 03:07.960 --> 03:12.070 All we got to do is simply say npm install node mod. 03:12.070 --> 03:15.580 But this node mod is not a regular package that we want to install. 03:15.580 --> 03:19.210 When we go to server, we either use PM too or something more complex. 03:19.210 --> 03:23.020 Don't pay too much attention on them as of now, but this is a dev dependency. 03:23.020 --> 03:28.300 All you got to do is simply say dash capital D or you can write dash dash dev dependency, but that's 03:28.300 --> 03:30.250 too much of a big to mouthful. 03:30.250 --> 03:37.060 So we use issues simple flag that says dash D and I hit enter and installs Node one for me. 03:37.510 --> 03:40.690 Now what this is going to do is simply go ahead. 03:40.690 --> 03:45.190 When I see the package store JSON, it simply says, hey, your dependencies are here, but something 03:45.190 --> 03:50.530 which helps you for development, you can go ahead and use node advantage of Node one is that instead 03:50.530 --> 03:57.760 of now saying with the node, I can simply say Node on and I save this and this time when I go ahead 03:57.760 --> 04:01.000 and say NPM start, let's go ahead and clean this up. 04:01.000 --> 04:03.070 Now it will not exit. 04:03.070 --> 04:05.080 It will keep on looking into the file. 04:05.080 --> 04:12.190 So for example, if I go to index or JS, I close this one and I turn it back to AE, it will continuously 04:12.190 --> 04:17.650 monitor my application or in this case index or JS and will give me the output. 04:17.770 --> 04:18.550 That's fantastic. 04:18.550 --> 04:19.870 That's exactly what we want. 04:20.170 --> 04:21.100 Okay, enough of this. 04:21.100 --> 04:25.330 Now let's go back on to the Express and read a little bit more on the documentation. 04:25.330 --> 04:27.520 So I know that installation now. 04:27.520 --> 04:30.220 Now let's see how I can write a simple hello world in here. 04:30.430 --> 04:35.260 So Express Documentation says it very clearly that first you need to require the express. 04:35.260 --> 04:40.000 You don't need to provide a version and then you have to create an app from this express, define a 04:40.000 --> 04:44.200 port, get a route all done, and then you can listen to any of the port. 04:44.260 --> 04:48.520 Now, this is a little bit too much and a fast pace, so let's break it down one by one and see it in 04:48.520 --> 04:53.110 the code studio or the VS code to see that what it's saying. 04:53.140 --> 04:58.510 Now, whenever you are going to install any dependency, the common syntax is just name it like this. 04:58.510 --> 05:00.820 So if you're installing express, call it Express. 05:00.820 --> 05:01.800 If you are installing X, Y, Z. 05:01.960 --> 05:03.010 Call it X, Y, Z. 05:03.130 --> 05:08.320 And that is going to be simply saying, I need you to require if the package is installed after writing 05:08.320 --> 05:11.800 a couple of words, it's supposed to be suggesting you, but sometimes it doesn't. 05:11.830 --> 05:12.640 Don't panic. 05:12.850 --> 05:14.330 So now the express is here. 05:14.350 --> 05:16.390 Now we need to create an app with the Express. 05:16.390 --> 05:17.760 So we're going to call this one as app. 05:17.770 --> 05:18.800 Do I need to call it app? 05:18.820 --> 05:19.510 No, not at all. 05:19.510 --> 05:20.380 It's a variable name. 05:20.410 --> 05:24.760 Feel free to call it anything and we're going to go ahead and use Express for this one. 05:24.760 --> 05:28.930 This is the syntax and we just saw the exact same thing up here. 05:28.930 --> 05:30.260 So these are the two things. 05:30.280 --> 05:33.610 Now it says you need to say what port number you are using. 05:33.640 --> 05:39.510 The important question here is, which you are not even asking is why we are putting a port into variable. 05:39.520 --> 05:41.290 Are we using it at a ton of places? 05:41.320 --> 05:44.260 No, you are not using it a ton of places, just one place. 05:44.260 --> 05:48.700 If we are using it at just one place, why we are creating and holding it in available because this 05:48.700 --> 05:49.960 will help you a lot. 05:50.440 --> 05:54.460 Now what's going to happen is let's just say we are going to define it in all caps. 05:54.460 --> 05:59.560 The port is going to be 4000, but sometimes you're going to see that when you deploy the application. 05:59.560 --> 06:04.360 I will point it out that you want to keep some of your variables coming from the central location. 06:04.360 --> 06:09.820 Usually that location is process dot E and V, dot port. 06:09.850 --> 06:11.440 How does it know there is a port? 06:11.470 --> 06:12.850 No, it doesn't know that. 06:12.850 --> 06:15.790 It will eventually know it when we'll install relevant packages. 06:15.790 --> 06:18.790 But this is a common syntax you are going to see, which is a pipe. 06:18.910 --> 06:21.190 So use the port number as 4000. 06:21.190 --> 06:26.860 But if something is defined into process dot and we are also known as environment variables, use a 06:26.860 --> 06:28.110 port variable from there. 06:28.120 --> 06:29.410 Right now we don't have that. 06:29.410 --> 06:30.520 So don't you worry on that. 06:30.520 --> 06:34.420 Right now it's going to use 4000 and this is going to introduce us. 06:34.420 --> 06:36.130 Some of the issues will take care of them. 06:36.130 --> 06:37.540 That's why this line is here. 06:37.900 --> 06:38.340 Okay. 06:39.100 --> 06:41.800 Now, next up, importantly is app dot. 06:41.860 --> 06:48.310 Listen, as soon as you create express and use an app, it allows you to listen where you can listen. 06:48.310 --> 06:51.130 You just have to mention the port where you are going to listen. 06:51.190 --> 06:53.470 And it also gives you a callback. 06:53.470 --> 06:58.660 Now, what you can do in this callback, you can just simply write this and you can simply say, I want 06:58.660 --> 07:07.000 to have a console log, and I can say in the back deck that server is running at, and then we can use 07:07.000 --> 07:12.880 a dollar, these classic back ticks and variables, and I can simply go in and say, Port, is this 07:12.880 --> 07:14.410 okay and is this all fine? 07:14.410 --> 07:15.670 Yeah, it is all fine. 07:15.670 --> 07:19.450 It says server is running at port, so definitely something is running at port. 07:19.990 --> 07:22.600 What does it mean when it says server is running at port? 07:22.600 --> 07:28.330 That means there is a localhost server created in your system and if you visit that specific port it 07:28.330 --> 07:29.500 should be up and running. 07:29.500 --> 07:30.910 Let's go ahead and see that. 07:30.910 --> 07:37.330 If I go ahead and see this local host, not 3000 coming up from whole development, 4000. 07:37.330 --> 07:40.330 It says, hey, I cannot get what does it mean? 07:40.330 --> 07:42.490 It means that the server is running. 07:42.490 --> 07:44.980 That is definitely 100% proven now. 07:44.980 --> 07:49.990 But you haven't defined what should I do when I just make a get request onto the slash? 07:50.560 --> 07:55.270 Yeah, we studied about the get now for this, the documentation says a little bit that you can use 07:55.270 --> 07:57.700 this exact same line to define the get root. 07:57.700 --> 08:02.710 Let's go ahead and copy this and then we are going to kind of dissect it. 08:02.860 --> 08:04.060 Let's go ahead and see this. 08:04.060 --> 08:05.740 If this works, save this. 08:05.740 --> 08:10.420 It says server is still running and if I go back onto my application, hit a reload. 08:11.050 --> 08:16.090 I see a hello world job done, but let's understand this a little bit more in depth. 08:16.090 --> 08:18.700 Let's go ahead and delete this one and write it again. 08:18.790 --> 08:22.870 First, you use the same app which you have created using the express. 08:22.870 --> 08:26.230 Then you define your methods and there can be a lot of methods. 08:26.230 --> 08:31.840 There can be a get, there can be a post, whatever is important or whatever you are doing in that case. 08:31.960 --> 08:33.730 In this case, I'm using a get. 08:33.760 --> 08:39.340 Now this get method takes to parameter almost always post also, but there can be more as well. 08:39.340 --> 08:41.800 At least two are there the first one being slash? 08:41.800 --> 08:42.670 That is my home. 08:42.670 --> 08:49.210 Root slash is defined as just the home root and then simply by putting a comma, you again get a callback. 08:49.210 --> 08:50.050 There we go. 08:50.200 --> 08:54.700 Now in this callback you get to variables or parameters. 08:54.700 --> 08:57.970 There are definitely more, but request and response. 08:57.970 --> 09:02.860 Now these are really classic objects when we definitely want to study them in more detail, in more 09:02.860 --> 09:03.430 depth. 09:03.580 --> 09:06.850 So let's go ahead and simply say that I have this once. 09:06.850 --> 09:12.820 So now I'm going to say that I'll use this one parameter, which is rest also short for response. 09:12.820 --> 09:15.160 And I want to just send a response. 09:15.160 --> 09:16.930 What do you want to send in the response? 09:16.930 --> 09:20.650 I want to send a string that says hello from AE. 09:20.740 --> 09:22.330 Let's go ahead and save this one. 09:22.450 --> 09:24.580 Thanks to Node one server, it is up and running. 09:24.580 --> 09:28.420 I go back and I hit a reload and it says hello from AE. 09:28.750 --> 09:29.290 That's great. 09:29.290 --> 09:36.400 But what also you can do is actually you can go ahead and wrap this up into an H one and it can actually 09:36.400 --> 09:37.810 render that for you. 09:38.170 --> 09:43.510 So we're going to go ahead and say each one, save that it reloads my server. 09:43.510 --> 09:47.620 I go back up here, I hit a reload and now it's in the H1 tag. 09:47.710 --> 09:50.050 Now obviously this is just the basics. 09:50.050 --> 09:51.520 You don't want to send it like that. 09:51.520 --> 09:53.080 Sometimes you send the templates. 09:53.080 --> 09:58.360 There are a lot of templates like Pug, handlebar, mustache, there's a lot of them and you can send 09:58.360 --> 09:58.900 those files. 09:58.900 --> 10:01.720 But we are not going to be doing that because modern approach is to send. 10:01.830 --> 10:03.150 The API responds. 10:03.420 --> 10:05.960 Okay, quite a lot of stuff that we have discussed in just one video. 10:05.970 --> 10:07.800 Let's go ahead and catch up in the next one.