1 00:00:00,550 --> 00:00:08,680 In this section, we are going to connect front end to the API that we have created in the previous 2 00:00:08,680 --> 00:00:11,920 section for what we have done so far. 3 00:00:11,950 --> 00:00:21,400 Now we have the flexibility to use any front end library or framework to consume the API, and we can 4 00:00:21,400 --> 00:00:28,690 use a HTML to consume the API or React or Vue or Angular. 5 00:00:28,870 --> 00:00:35,230 For our purpose, we are going to use HTML to consume the API. 6 00:00:35,500 --> 00:00:43,690 For React, we have a project where we use React to consume the API and the project is called Income 7 00:00:43,690 --> 00:00:45,170 expenses Tracker. 8 00:00:45,190 --> 00:00:50,440 So let's see how we are going to use HTML to consume the API. 9 00:00:50,470 --> 00:00:55,150 Because of that, we need to add a couple of folders into this. 10 00:00:55,150 --> 00:01:03,340 The next folder, you're going to be the public folder and this one is going to contain a HTML, CSS 11 00:01:03,340 --> 00:01:07,300 and images that we want to use in our application. 12 00:01:07,660 --> 00:01:15,510 The next folder is going to be view folder, and here we go, because we are going to use template engine 13 00:01:15,520 --> 00:01:16,890 like edges. 14 00:01:16,900 --> 00:01:24,820 That's why we need this view folder and this is going to contain the HTML that we want to render. 15 00:01:24,820 --> 00:01:31,120 Again, in case you're not familiar with template engines, we have a section where we dive in details 16 00:01:31,120 --> 00:01:33,160 how to use this technology. 17 00:01:33,340 --> 00:01:40,810 Next step is that we need to configure our server to be able to serve static file and we are going to 18 00:01:40,810 --> 00:01:42,850 use Edge's template engine. 19 00:01:42,850 --> 00:01:45,280 So let's go ahead and then install that. 20 00:01:45,280 --> 00:01:53,620 So let me get back to the terminal and let me shut down, clear the terminal and install npm. 21 00:01:53,650 --> 00:01:55,990 I Edge's. 22 00:01:58,310 --> 00:01:59,750 It says finished installing. 23 00:01:59,750 --> 00:02:08,389 So let me restart the server and let's get into the server to G file and let's go ahead and configure 24 00:02:08,419 --> 00:02:09,710 Aegis. 25 00:02:10,160 --> 00:02:12,590 So below the metaverse here. 26 00:02:12,620 --> 00:02:23,480 Let's add a comment and I'll call this one as configure Aegis and going to be as app dot set. 27 00:02:25,070 --> 00:02:28,190 And you're going to use view engine. 28 00:02:28,190 --> 00:02:31,370 And the view engine is called Aegis. 29 00:02:32,810 --> 00:02:33,730 Perfect. 30 00:02:33,740 --> 00:02:40,970 The next step is we need to tell experts to be able to serve any asset that we put it inside the public 31 00:02:40,970 --> 00:02:41,580 folder. 32 00:02:41,600 --> 00:02:44,020 So here is the syntax. 33 00:02:44,030 --> 00:02:47,330 I will add a comment here by saying Serve. 34 00:02:48,550 --> 00:02:49,840 Static fires. 35 00:02:52,540 --> 00:03:03,790 And you're going to use app dot use and you're going to use Xpress dot static and inside we are going 36 00:03:03,790 --> 00:03:12,790 to locate which folder that we want to serve and the folder is called public and we want to have a dynamic 37 00:03:12,790 --> 00:03:20,290 you are or path to this folder because the path to this folder will differ based on operating system. 38 00:03:20,290 --> 00:03:26,200 So let's make it more dynamic by using what is called dirt name going to be as underscore, underscore, 39 00:03:26,230 --> 00:03:33,460 dir name and this one going to be the folder that we want to save when to be plus and then quote the 40 00:03:33,460 --> 00:03:36,490 name of the folder is going to be public. 41 00:03:36,880 --> 00:03:40,780 Now we are done with the configuration in the next video. 42 00:03:40,780 --> 00:03:43,990 Let's see how we can render a HTML pages.