WEBVTT 00:03.880 --> 00:05.430 Hey there, everyone that they share. 00:05.440 --> 00:07.060 And welcome to another video. 00:07.120 --> 00:12.040 Now, in this video, we're going to start our very first project, not very first, but first for this 00:12.040 --> 00:12.810 section. 00:12.820 --> 00:17.140 And before we move there, I have to actually diverge a little bit. 00:17.140 --> 00:19.540 Not too much, but a little bit now. 00:19.540 --> 00:24.490 A little front end is going to be introduced in this section now, although I wanted it to be absolutely 00:24.490 --> 00:27.730 free from the front end so that we can focus just on the back end. 00:27.730 --> 00:32.020 But I can truly understand that how important it is to understand the forms. 00:32.320 --> 00:36.160 And we do have our own postman that can do a lot of stuff. 00:36.160 --> 00:40.780 In fact, it's going to teach us a lot of things that why we need the front end and the first place. 00:40.780 --> 00:45.940 But there is very, very much of the need here that we introduce some kind of front end here. 00:45.970 --> 00:50.140 Now, don't you worry, we're not going to inject something heavy that react or angular or something 00:50.140 --> 00:52.120 so that our entire attention goes there. 00:52.120 --> 00:53.380 We won't be doing that. 00:53.380 --> 00:58.510 I will be creating some forms, just using the bare minimum bootstrap and you don't even need to know 00:58.510 --> 00:59.770 the bootstrap for that. 00:59.770 --> 01:02.890 You can use just the basic HTML form and that's it. 01:02.890 --> 01:04.090 They're going to do the job. 01:04.090 --> 01:08.050 I'm using bootstrap so that it looks a little bit pretty, but again, it's no big deal. 01:08.050 --> 01:12.790 We'll be just copy pasting code from the bootstrap website itself and I'll show you that why we are 01:12.790 --> 01:17.650 bringing that code, what each line does and what are the issues even in the bootstrap documentation 01:17.650 --> 01:19.360 if you bring in the code as it is. 01:19.540 --> 01:23.590 So what we're going to use for the frontend, we're going to use edges. 01:23.620 --> 01:26.290 Now what is this edges and why we are bringing in. 01:26.290 --> 01:28.090 Can we use just directly the bootstrap? 01:28.090 --> 01:33.190 Yes, you can use the bootstrap directly and even you can use the basic HTML and JavaScript. 01:33.190 --> 01:39.460 But if I inject those code, I have to prepare my back end here and then I have to call the front end 01:39.460 --> 01:45.220 via the JavaScript and I have to introduce course and I have to introduce the fetch request and a whole 01:45.220 --> 01:46.300 bunch of other things. 01:46.300 --> 01:48.010 I really don't want to do that. 01:48.010 --> 01:52.510 I want to make a unified system so that if anything is being called or anything goes like that, that 01:52.510 --> 01:53.500 can happen there. 01:53.530 --> 01:57.160 Now for these some of these templates, engine actually comes in. 01:57.160 --> 02:01.930 So if I go up into the Edge's website, you're going to notice that this is how eggs look like, which 02:01.930 --> 02:02.950 is embedded JavaScript. 02:02.950 --> 02:03.700 Templating. 02:03.850 --> 02:10.300 Templating simply means I will be able to just put all of this code, HTML kind of code into my node 02:10.300 --> 02:12.820 application itself and it will work just fine. 02:12.820 --> 02:18.250 Now in some of the application, even the mid scale or the smaller ones, eggs is used to make a full 02:18.250 --> 02:20.590 fledged website just using the node itself. 02:20.590 --> 02:21.730 No front end at all. 02:21.760 --> 02:28.000 We won't be doing that, which is not approach used by many people these days because these API driven 02:28.000 --> 02:33.130 approach is more familiar because things are things need to be consumed on mobile as well as web. 02:33.130 --> 02:36.100 So yes, this is being used, but we won't be doing too much. 02:36.100 --> 02:37.750 So I'll explain to you what it does. 02:37.750 --> 02:42.490 I won't be going into the weird syntax of how to use these kinds of codes and all of that. 02:42.490 --> 02:44.260 We won't be doing that at all. 02:44.260 --> 02:46.030 We're just using edges. 02:46.120 --> 02:48.640 But you might be asking, hey, is there eggs only? 02:48.640 --> 02:53.590 No, there is pug, there is a mustache, there is a whole bunch of other variety of these templating 02:53.590 --> 02:53.860 engine. 02:53.860 --> 02:58.750 We happen to use eggs because it is the most simplest of all in order to work with that. 02:58.780 --> 02:59.100 Okay. 02:59.110 --> 03:04.630 So this is the basics now as we move forward, this is all what we'll be doing when we are going to 03:04.630 --> 03:05.740 handle our forms. 03:05.740 --> 03:09.640 And I'll walk you through even with the postman as well, that what are the issues that comes up in 03:09.640 --> 03:13.960 the postman and how we are able to even identify that the issues are there in the postman? 03:13.990 --> 03:15.940 Issues are not with the postman, to be honest. 03:15.940 --> 03:17.590 It's moreover how it functions. 03:17.590 --> 03:18.700 So that is there. 03:18.820 --> 03:21.340 Now we're going to use cloud energy as well. 03:21.340 --> 03:25.810 And what we are using cloud and we are going to be using cloud only for handling our images. 03:25.810 --> 03:31.130 So let me go up onto the Google and show you first that, hey, I want to go ahead and use cloud in. 03:31.660 --> 03:32.500 There we go. 03:32.800 --> 03:35.320 And you can go ahead and create an account on the cloud. 03:35.580 --> 03:37.300 Now, creating an account is really simple. 03:37.300 --> 03:39.520 You can go ahead and hit the sign up button there. 03:39.520 --> 03:43.810 And right now it's going to redirect me onto the console because I have already signed up. 03:43.810 --> 03:46.060 But this is how it looks like when you signed up. 03:46.060 --> 03:51.820 Now it is free, so you can go ahead and look for the pricing that hey, as of now had the time of recording, 03:51.820 --> 03:55.000 at least they have given us a generous free tier. 03:55.210 --> 03:56.530 No credit card required nothing. 03:56.530 --> 04:02.110 You have one user and more than enough credits, 25 credits monthly are given to you, which is more 04:02.110 --> 04:04.930 than enough, way more than enough even to host your application. 04:04.930 --> 04:07.180 So they are really generous in that case. 04:07.180 --> 04:08.560 So we'll be using that. 04:08.590 --> 04:11.710 Now, are we going to use cloud only to the extent? 04:11.710 --> 04:12.970 No, we are not going to do that. 04:12.970 --> 04:15.010 We're going to just throw up our images there. 04:15.010 --> 04:19.930 But it is definitely possible that if you study a little bit more about the cloud Native API, you will 04:19.930 --> 04:24.370 be able to transform your image, rotate your image, find if there is something wrong in the image. 04:24.370 --> 04:29.080 There is a whole lot of options and product array that they actually offer, even optimize your media 04:29.080 --> 04:29.800 and everything. 04:30.010 --> 04:34.840 Now obviously this brings a question that, hey, why cloud nerdy and why not the other option? 04:34.840 --> 04:37.180 And what if is always there? 04:37.180 --> 04:38.290 Why not eight of us? 04:38.290 --> 04:38.980 Why not as you? 04:39.010 --> 04:43.900 Why not fair or not even self-hosted now self-hosted part I have already covered. 04:43.900 --> 04:47.050 This is exactly how we did in the documentation section. 04:47.050 --> 04:53.470 We use the move and we move the file from the clients directory into our own server that we have already 04:53.470 --> 04:53.920 seen. 04:53.920 --> 04:55.780 So that is why I'm not bringing in. 04:55.780 --> 05:01.690 And once you understand how to send the file onto the cloud, it is just a matter of reading the documentation 05:01.690 --> 05:01.810 and. 05:01.890 --> 05:05.640 Finding what functions are there and what library is there, and that's it. 05:05.640 --> 05:10.140 You will have the clear cut understanding that, okay, if I don't want to use cloud, that's okay. 05:10.140 --> 05:11.920 I can go ahead and move on with a W. 05:11.940 --> 05:14.460 S as your maybe other cloud provider. 05:14.460 --> 05:15.390 It's all there. 05:15.390 --> 05:19.290 All of them provides you as SDK and helper methods that can help you with that. 05:19.560 --> 05:20.070 Okay. 05:20.640 --> 05:24.780 So now this is all clear that we are using edges, but yes, there are other options. 05:24.780 --> 05:29.100 We are using cloud native, but yes, there are other options, but we are going with them to just clear 05:29.100 --> 05:29.970 up our concept. 05:30.150 --> 05:33.510 So now let's go ahead and let me fire up my terminal. 05:33.510 --> 05:34.230 There we go. 05:34.560 --> 05:40.380 Let me go up into desktop and we have this AE back end. 05:40.380 --> 05:41.730 Let's go ahead and do a quick list. 05:41.730 --> 05:44.160 So these are the apps that we have created. 05:44.160 --> 05:45.900 So let's go ahead and create another one. 05:45.900 --> 05:48.750 So I'm going to go ahead and say, hey, I want to create another app. 05:48.810 --> 05:50.070 What should we call this? 05:50.070 --> 05:51.690 This is always a tricky question. 05:51.690 --> 05:55.230 So let's go hold this one as forms. 05:55.470 --> 05:59.940 Let's all lowercase forms and images, a bit of a longer name. 05:59.940 --> 06:01.320 But yeah, let's go with that. 06:01.320 --> 06:03.450 So we're going to go into forms and images. 06:03.480 --> 06:08.130 Obviously, we are going to go ahead and say, hey, I want to initialize an application here, so let's 06:08.130 --> 06:09.330 go ahead and initialize that. 06:09.330 --> 06:10.410 That is awesome. 06:10.410 --> 06:15.000 With all the default settings, once this is done, we obviously know what we need to install. 06:15.000 --> 06:19.890 So first and foremost, of course, without a doubt, we're going to go ahead and say, hey, I need 06:19.890 --> 06:25.710 an express now since we are using Express and we want to work on later on with the Express file upload. 06:25.710 --> 06:29.370 So we're going to go ahead and say, hey, I want to use Express File upload. 06:29.670 --> 06:31.560 Okay, we will be using edges. 06:31.560 --> 06:35.820 I haven't talked to you with the documentation and everything and probably I will not because it's not 06:35.820 --> 06:37.080 really important in this case. 06:37.080 --> 06:39.360 We'll be just working with the plain HTML. 06:39.360 --> 06:40.650 So I'll be yet. 06:40.650 --> 06:42.210 I will be installing eggs. 06:42.210 --> 06:42.750 Don't you worry. 06:42.750 --> 06:47.310 I'll walk you through with that and we'll be working with cloud and every now cloud and definitely we 06:47.310 --> 06:49.800 will study the documentation part and all of that. 06:49.800 --> 06:55.020 But these are all the libraries that we need probably for this entire section, but there might be more 06:55.050 --> 06:56.580 no promises on that part. 06:56.610 --> 06:58.320 Let's go ahead and install that. 07:00.180 --> 07:01.710 So it gave me a simple error. 07:01.710 --> 07:04.890 And again, sometimes typing and writing can be a little bit tricky. 07:04.890 --> 07:06.630 So expires. 07:06.630 --> 07:07.770 It's not expires. 07:07.770 --> 07:08.340 It is. 07:08.340 --> 07:12.630 EXPRESS And I'm pretty sure most of you might have already noticed that part. 07:12.750 --> 07:15.870 So again, these kinds of things do happen with everyone. 07:16.030 --> 07:21.840 Okay, this time, hopefully everything is being installed and yep, this time everything is installed. 07:21.840 --> 07:24.120 We'll check that into our package JSON as well. 07:24.120 --> 07:26.790 But I do have another dependency which is dev dependency. 07:26.790 --> 07:32.400 So I'm going to go ahead and say, hey Dev and this one is our all time favorite node on. 07:34.330 --> 07:34.760 Okay. 07:34.780 --> 07:36.070 So this should be up and running. 07:36.070 --> 07:36.520 There we go. 07:36.520 --> 07:40.260 And I can just fire up my coordinator from here in case yours is not working. 07:40.270 --> 07:41.410 Don't you sweat it out. 07:41.410 --> 07:46.420 You can just go ahead and use this file and this documentary that we don't need. 07:46.660 --> 07:48.200 Come on, open this up, please. 07:48.220 --> 07:48.840 There we go. 07:48.850 --> 07:50.740 You can just drag and drop your folder here. 07:50.740 --> 07:51.340 And that's it. 07:51.340 --> 07:53.290 That's all it takes, hopefully. 07:54.770 --> 07:55.670 Come on. 07:56.060 --> 07:57.810 Oh, I'm dragging and dropping and terminal. 07:57.830 --> 07:59.210 My bad, my bad. 07:59.420 --> 08:00.140 There we go. 08:00.230 --> 08:01.970 And let's go ahead and drag and drop. 08:01.970 --> 08:02.510 And there we go. 08:02.510 --> 08:04.340 It will open up the entire project here. 08:04.640 --> 08:07.730 Yes, I definitely trust the author because it's me. 08:08.450 --> 08:10.100 Okay, let's go in the package, start JSON. 08:10.100 --> 08:15.230 So we have dependency cloud Edge's Express Express file upload and the dev dependency. 08:15.260 --> 08:15.950 Awesome. 08:15.950 --> 08:18.450 Let's go ahead and create a simple start script. 08:18.470 --> 08:23.600 No, I'm not going to be creating a script for for the dev. 08:23.600 --> 08:27.040 I won't be installing the dot EMV because we have already worked on with that. 08:27.050 --> 08:31.370 We will be definitely working when we'll be working on our major project, the mega one. 08:31.550 --> 08:35.900 But right now I'll skip that because that will additionally add extra layer of complexity here. 08:36.020 --> 08:41.870 I'm going to go ahead and say Node one, please work with my index or JZ or JZ, whatever you like, 08:41.870 --> 08:43.190 even set order JZ. 08:43.550 --> 08:43.820 Okay. 08:43.850 --> 08:48.530 One thing I would like to mention here that go ahead and please create an account on the cloud. 08:48.530 --> 08:53.180 Netty, let me go ahead and try to log in and I will share all these details. 08:53.190 --> 08:55.670 I'll just create an account as a dummy one here. 08:55.670 --> 09:01.560 I don't use cloud very that much in production for my app, at least for the others I use quite a lot. 09:01.580 --> 09:03.620 Now here you are going to find the cloud name. 09:03.620 --> 09:07.740 You can choose a better cloud name than me I just randomly picked up. 09:07.760 --> 09:10.220 Then we have the API key and the API secret. 09:10.220 --> 09:12.230 Now I will be showing you my secret as well. 09:12.230 --> 09:13.070 No big deal. 09:13.070 --> 09:16.310 But probably it is not. 09:16.310 --> 09:17.090 Probably always. 09:17.090 --> 09:22.340 It is a good idea to place these keys safe and separately into your dot envy so that when we upload 09:22.340 --> 09:25.370 these things on the Heroku, we can just add that onto the settings. 09:25.460 --> 09:31.760 Now in case your keys are also exposed, because I'm about to expose mines as well, you can always 09:31.760 --> 09:36.380 go into the settings and inside the settings inside you will find the security. 09:36.380 --> 09:41.330 And at the very end of it you can just generate a new pair and can mark this one as disable. 09:41.330 --> 09:44.510 So it is pretty easy, as easy as it could be. 09:44.510 --> 09:50.330 So while at the time when you'll be seeing these videos, my keys will obviously be changed, but please 09:50.330 --> 09:51.890 use your own keys at that time. 09:51.890 --> 09:54.170 So this is all the basics that I wanted to show you. 09:54.440 --> 10:02.090 Okay, now moving back, let's go ahead and create a simple index JS And let's use the basics here at 10:02.090 --> 10:02.600 least. 10:02.750 --> 10:10.550 So let's go ahead and say, Hey, I will need Express and that express will be coming up from require. 10:10.550 --> 10:14.780 Let's go ahead and use Express and let's create an app from it. 10:14.780 --> 10:16.370 So we have already seen that. 10:16.370 --> 10:20.840 So that's why we are going that much faster that we just need to create an app with the Express. 10:20.840 --> 10:22.610 I won't be even creating another file. 10:22.610 --> 10:26.390 I just want to show everything up here, so I'll be just focusing on teaching part. 10:26.390 --> 10:31.040 I won't be even creating a port variable because you know that already we have got a quite in-depth 10:31.040 --> 10:32.690 detail on that one. 10:32.990 --> 10:37.640 I'll be saying simply console.log and here I'll be just throwing up. 10:37.640 --> 10:45.200 That server is running at port 4000 everything hardcoded so far because that is not our focus. 10:45.200 --> 10:50.150 Our focus is mainly on to itself, how to handle the farms and everything. 10:50.840 --> 10:56.570 Okay, now one more thing that we know of about it is how to inject these middleware and everything. 10:56.570 --> 11:01.760 I wouldn't be doing that right now because I want to show you each and every value of what this actually 11:01.760 --> 11:04.670 brings in, what the middleware actually does and all of that. 11:04.880 --> 11:07.490 And we are going to definitely do that in the next video. 11:07.490 --> 11:08.630 Let's catch up there.