1 00:00:06,270 --> 00:00:07,590 Welcome back. 2 00:00:07,620 --> 00:00:14,760 In this video, we are going to set up a server to get started with Edge's template engine. 3 00:00:15,120 --> 00:00:17,700 So back to Visual Studio Code. 4 00:00:17,910 --> 00:00:24,000 I have already created a sample Express server with a few lines of code. 5 00:00:24,180 --> 00:00:30,610 So if you want to start with your Fresh Express server, you can go ahead and do it better. 6 00:00:30,630 --> 00:00:35,010 So I'll provide the starter template or project for you. 7 00:00:35,160 --> 00:00:42,000 So now that we have our simple Express server and let's look at it for that structure, we have only 8 00:00:42,000 --> 00:00:43,650 server file here. 9 00:00:43,830 --> 00:00:49,150 So the next step is we need to configure our server to use Aegis. 10 00:00:49,170 --> 00:00:54,720 So let's go to Esko and let's click on getting started. 11 00:00:55,020 --> 00:01:03,300 The first step is we need to install Aegis and after installing we will learn a few syntax about Aegis. 12 00:01:03,330 --> 00:01:04,680 It's not a match. 13 00:01:04,709 --> 00:01:10,080 I will show you the most common used syntax when it comes to Aegis. 14 00:01:10,410 --> 00:01:12,660 So now back to the terminal. 15 00:01:12,990 --> 00:01:16,160 Let's go ahead and install Aegis. 16 00:01:16,170 --> 00:01:25,350 So I've opened my terminal here and I'll make use of npm, i e g s and hit enter. 17 00:01:25,590 --> 00:01:27,850 Now EGS has finished installing. 18 00:01:27,870 --> 00:01:31,470 Let me clear the console and let me run the server. 19 00:01:31,710 --> 00:01:38,370 I can make use of John because I have John being installed, but let me stick to npm run server. 20 00:01:38,550 --> 00:01:42,180 And now the server is up and running. 21 00:01:42,270 --> 00:01:43,310 All right. 22 00:01:43,320 --> 00:01:49,650 The next step is we need to configure our server to use Aegis. 23 00:01:49,830 --> 00:01:51,240 So here we go. 24 00:01:51,270 --> 00:01:53,730 So let me give it a bill for comment here. 25 00:01:53,730 --> 00:02:00,120 And it says that sets the view engine. 26 00:02:00,240 --> 00:02:08,729 So this means that we are configuring Express to use a specific template engine and we can do that by 27 00:02:08,729 --> 00:02:11,430 using app dot set. 28 00:02:11,790 --> 00:02:17,760 And for set, we pass in the view engine as the property name here. 29 00:02:18,830 --> 00:02:26,150 And then if you want to use park or mustache, you go ahead and pass in the second argument. 30 00:02:26,330 --> 00:02:30,700 But since we are using eggs, you provide the eggs. 31 00:02:30,710 --> 00:02:36,620 We don't need to require the package with this one as soon as we have it been installed. 32 00:02:36,650 --> 00:02:40,580 Express will locate that package which is here. 33 00:02:40,940 --> 00:02:46,970 Now that we have that one done, the next step is we need to create our pages to be rendered. 34 00:02:47,180 --> 00:02:53,040 Now, inside our project here, let's create one folder called Views. 35 00:02:53,060 --> 00:02:55,180 The name must be views. 36 00:02:55,190 --> 00:03:01,250 If you make a different thing, Express will not know this folder that we want to serve. 37 00:03:01,280 --> 00:03:10,850 So inside the Views folder we are going to create our first Aegis file, our make use of index darts, 38 00:03:10,880 --> 00:03:12,020 aegis. 39 00:03:12,110 --> 00:03:16,810 So with this one we are going to write a HTML code. 40 00:03:16,820 --> 00:03:20,960 So let me use image by pressing shift and exclamation mark. 41 00:03:20,960 --> 00:03:21,770 Enter. 42 00:03:21,860 --> 00:03:25,300 Now I have my email template. 43 00:03:25,310 --> 00:03:29,680 Well, this is not a HTML, but instead aegis. 44 00:03:29,690 --> 00:03:33,110 But behind the scene we are using HTML. 45 00:03:33,530 --> 00:03:34,050 Good. 46 00:03:34,070 --> 00:03:39,380 So now inside here, let's give it h one and says welcome home. 47 00:03:40,310 --> 00:03:40,970 Let me see where. 48 00:03:40,970 --> 00:03:41,450 Come. 49 00:03:42,110 --> 00:03:44,150 All right, this is enough for me. 50 00:03:44,630 --> 00:03:48,710 So the next thing is, how can we render this? 51 00:03:48,710 --> 00:03:50,210 So here you go. 52 00:03:50,450 --> 00:03:53,240 So back to the server file. 53 00:03:53,360 --> 00:03:57,890 This is a root that I want to display that page. 54 00:03:58,100 --> 00:04:02,930 So the way we are going to render the page is going to be different. 55 00:04:02,930 --> 00:04:10,430 When we're rendering or displaying a HTML, we use what is called ST file this method. 56 00:04:10,520 --> 00:04:19,040 But if you want to render a template like EDGE or a template engine, the method is going to be render 57 00:04:19,160 --> 00:04:23,180 and then we pass in the path of the template. 58 00:04:23,180 --> 00:04:25,550 So it is inside view. 59 00:04:25,580 --> 00:04:29,920 So by default the view folder is the home directory. 60 00:04:29,930 --> 00:04:33,920 So our provide as index. 61 00:04:36,630 --> 00:04:40,770 Dart is now saved. 62 00:04:40,800 --> 00:04:42,960 Our server has restarted. 63 00:04:42,990 --> 00:04:47,270 Let's get to the browser and then make use of lookout 3000. 64 00:04:47,280 --> 00:04:52,340 And indeed we have what Edge's template be rendered. 65 00:04:52,350 --> 00:04:58,260 So let's add more text in the mix by adding p tag here and room text here. 66 00:04:58,290 --> 00:05:00,120 Save it now and check it out. 67 00:05:00,120 --> 00:05:05,190 Refresh it and you are able to, quote, render a HTML. 68 00:05:05,400 --> 00:05:13,380 So with this one, we have more flexibility to pass in data from back end and send data from front end 69 00:05:13,380 --> 00:05:14,610 to the back end. 70 00:05:14,730 --> 00:05:22,110 So now that we're able to render Edge's template, the next video, let's have a look at the syntax 71 00:05:22,110 --> 00:05:27,030 of injecting dynamic value inside our Edge's templates.