WEBVTT 00:03.910 --> 00:05.410 Hey, did everyone take share? 00:05.410 --> 00:09.500 And in this video, we'll be flipping back and forth between index chairs and dogs. 00:09.550 --> 00:14.050 We'll try to set up a basic structure so that we see something on the screen, at least as a result. 00:14.200 --> 00:14.540 Okay. 00:14.560 --> 00:16.820 So how we're going to be working with that first package draw? 00:16.840 --> 00:20.350 Jason, we need to create some of the scripts just like we have done in the past as well. 00:20.380 --> 00:25.270 The first one is always going to be the start script, which is majorly going to be there on the servers 00:25.270 --> 00:25.930 usually. 00:25.930 --> 00:30.100 So this is going to be run by the node environment, whatever the environment you have mentioned up 00:30.100 --> 00:30.460 here. 00:30.460 --> 00:35.440 And then we just want to target one thing which is index or JS, but similar to this, we want to run 00:35.440 --> 00:37.330 things into dev environment as well. 00:37.330 --> 00:41.650 So what we're going to do is instead of the node, we're going to say, hey, please, let's just run 00:41.650 --> 00:46.360 this with Node one and let's go ahead and say that this instead of the start, this is a dev script 00:46.360 --> 00:46.990 for development. 00:46.990 --> 00:51.400 But again, there can be a whole lot of configuration of providing the environment, whether this is 00:51.400 --> 00:55.660 a production environment, development environment, and all of these things can go up here like people 00:55.660 --> 00:57.790 just try to set the environment and all of that. 00:58.030 --> 01:01.000 We'll be doing that through the dot and V file as well. 01:01.000 --> 01:05.920 This reminds me that we need to create the dot and V file as well, so let's go ahead and create a dot 01:05.950 --> 01:07.030 E and V file. 01:07.210 --> 01:11.590 Now again, a big reminder, some people like to put this dot and V file into config. 01:11.590 --> 01:13.060 Feel free to go ahead and do that. 01:13.060 --> 01:15.280 I like to keep it into the root of the structure. 01:15.280 --> 01:19.060 This is majorly being done by majority of the organization. 01:19.060 --> 01:23.770 In case you are putting it up into config or any other place, you have to mention that path always 01:23.770 --> 01:24.700 while configuring it. 01:24.700 --> 01:25.990 So that's what basic is. 01:26.260 --> 01:30.970 So if we go ahead and say, hey, we need to run it through on the port 4000, that is fine. 01:30.970 --> 01:36.550 We'll be connecting with the port just from here all the time, not even once on the local development 01:36.550 --> 01:37.360 any other way. 01:37.630 --> 01:37.870 Okay. 01:37.930 --> 01:40.090 So this is the basics we have gone through with that. 01:40.120 --> 01:42.910 Now let's go ahead and move into JS. 01:42.910 --> 01:50.740 So here the first thing that we need is express that is going to be coming from require express. 01:50.740 --> 01:52.780 Let's go ahead and create an app from this one. 01:52.780 --> 01:56.350 So we're going to go ahead and say, hey, I want to create an app from Express. 01:56.350 --> 01:58.840 So there we go and there we go. 01:58.900 --> 02:00.190 Not like that, of course. 02:00.190 --> 02:00.880 There we go. 02:00.880 --> 02:03.280 So, okay, so now our Express app is ready. 02:03.280 --> 02:05.230 Now we won't be doing anything with this app. 02:05.230 --> 02:06.850 We will be just exporting this. 02:06.850 --> 02:09.610 So I'll be writing a lot of comments in this course for you. 02:09.610 --> 02:13.570 So in this section, especially so export app. 02:14.350 --> 02:16.630 JS So how do we export that? 02:16.630 --> 02:23.650 We simply go ahead and say a module dot exports that is going to be equal to app. 02:23.650 --> 02:27.640 So whatever is now happening inside that, we'll keep it just into app dogs. 02:27.640 --> 02:32.920 But one thing who is responsible for starting or initializing our application is going to be indexed 02:32.920 --> 02:33.040 or. 02:33.040 --> 02:36.490 JS So the first thing that is let's bring in the app itself. 02:36.940 --> 02:42.250 So that is going to be require since it's in the same directory, I can just go ahead and say dot slash 02:42.250 --> 02:45.550 of course in the codes dot dot slash app. 02:45.580 --> 02:46.840 Now this app is here. 02:46.840 --> 02:50.560 I can use this app just like I would have been using it into app file. 02:50.560 --> 02:54.310 So let's go ahead and kind of create a basic server for that. 02:55.240 --> 03:01.780 So we can just go directly go ahead and say app listen or you can hold that server into a variable, 03:01.780 --> 03:04.360 maybe you want to use it later on or something like that. 03:04.360 --> 03:07.270 Let's go ahead and say that I just want to directly use that app. 03:07.510 --> 03:10.180 Listen, so how you want to listen on which port? 03:10.180 --> 03:16.870 So for that we'll be having process dot E and V E and V dot port, of course. 03:17.110 --> 03:18.340 Now onto this one. 03:18.340 --> 03:22.450 Further down the road, I would like to fire up a callback function just like this. 03:23.230 --> 03:28.510 And this is simply going to log a message for me, of course in the back takes that will say server 03:28.510 --> 03:38.920 is running, running, come on at port and then we are going to inject available just like this and 03:38.920 --> 03:44.530 we'll be saying same process, dot E and V dot port. 03:44.560 --> 03:47.890 Now the important thing is this is not going to work. 03:47.890 --> 03:53.560 Let's go ahead and save this one and I go ahead and say npm, run Dev, this should fail right now. 03:54.010 --> 03:54.970 So there we go. 03:54.970 --> 03:57.760 It says server is running at port, but port is undefined. 03:57.760 --> 04:01.720 The reason for that is it doesn't know from where to where to bring in the port. 04:01.720 --> 04:03.220 You just said, hey, process that tab. 04:03.220 --> 04:05.920 But I don't know what this process E and V is for you. 04:05.920 --> 04:09.130 So I need to make sure that I go ahead and require this one up here. 04:09.130 --> 04:13.120 So just up here, I'm going to go ahead and say, Hey, I don't need to hold a reference of it. 04:13.120 --> 04:17.050 I can just go ahead and directly say that, Hey, I'm going to need this dot E and V, so I'm going 04:17.050 --> 04:19.270 to go ahead and say, Hey, I, come on. 04:20.940 --> 04:21.540 Here. 04:22.320 --> 04:24.720 I'll just say, hey, I require a package. 04:24.750 --> 04:30.300 The package name is Dot, E and V and I can go ahead and simply on. 04:30.660 --> 04:32.130 I can chain a config on that. 04:32.130 --> 04:36.840 I don't need to pass on anything there in case you have got something different. 04:36.840 --> 04:42.600 Like for example, you have got your E and V file into config or somewhere else, then you need to provide 04:42.600 --> 04:45.980 that path and sometimes you also need to import the path from there. 04:45.990 --> 04:50.720 Now as soon as you do this, you are going to see that server is running at Port 4000 because Node one 04:50.730 --> 04:52.200 is refreshing it all the time. 04:52.890 --> 04:55.620 So this is all great and fine so far. 04:55.650 --> 05:01.620 Now also, sometimes you are going to notice that all this is if you load it up here, it is going to 05:01.620 --> 05:04.200 just go through everywhere into JSON, everything. 05:04.200 --> 05:10.170 But I have noticed that sometimes it creates an issue and it is kind of sometimes just you avoid the 05:10.170 --> 05:11.220 issue if you load it up here. 05:11.220 --> 05:15.480 Although although let me remind you again that if you load it up in the index, that is the main file, 05:15.480 --> 05:18.090 that means it has loaded up into all of your application. 05:18.090 --> 05:23.850 But I have been into a strange, weird situation where just adding this line actually fixes that up. 05:23.910 --> 05:26.910 And again, if you have more information on that, please do share me. 05:26.910 --> 05:32.040 I have tried to debug it line by line and sometimes it requires it up here as well as there as well. 05:32.070 --> 05:33.330 Again, very strange situation. 05:33.330 --> 05:35.310 I'm still trying to learn that part up here. 05:35.580 --> 05:37.350 Okay, so this is all basics of it. 05:37.350 --> 05:39.840 Now we have gone through with our server is up and running. 05:39.840 --> 05:44.010 Now in the next video we are going to go ahead and create the basic first home page route. 05:44.010 --> 05:48.420 It's going to be a dummy route, but will help us to understand the architecture of the application. 05:48.420 --> 05:50.370 Let's go there and catch up in the next one.