1 00:00:00,350 --> 00:00:05,529 Before we look at these static assets I just want to point out this error here. 2 00:00:05,529 --> 00:00:09,775 This is happening because when we redirected we didn't stop 3 00:00:09,775 --> 00:00:12,780 the execution of the rest of the function. 4 00:00:14,060 --> 00:00:18,761 The URL handler is trying to redirect and render. 5 00:00:18,761 --> 00:00:20,860 Obviously you can't do that. 6 00:00:20,860 --> 00:00:25,410 This simple fix is just to return, when you redirect. 7 00:00:26,740 --> 00:00:30,115 This stops the execution after the return statement. 8 00:00:30,115 --> 00:00:32,040 You can see the server is restarted. 9 00:00:33,440 --> 00:00:39,108 And if we go back to the redirect route, the redirections happened and 10 00:00:39,108 --> 00:00:40,911 there's no errors. 11 00:00:42,110 --> 00:00:43,025 Now back to static assets. 12 00:00:43,025 --> 00:00:48,080 Here's what they app will look like when this dial sheet loads. 13 00:00:48,080 --> 00:00:49,221 Pretty different. 14 00:00:49,221 --> 00:00:54,990 The designer that works on this adjusted the HTML structure of the app quite a bit. 15 00:00:54,990 --> 00:00:58,737 Which is not common when you're developing on a team. 16 00:00:58,737 --> 00:01:04,290 Our job will be to tie the HTML into our app logic. 17 00:01:04,290 --> 00:01:06,530 We want everything to work as intended. 18 00:01:07,530 --> 00:01:10,520 The work we'll do is mostly in the templates. 19 00:01:11,550 --> 00:01:16,429 Let's first take a look at how to serve static assets in express. 20 00:01:16,429 --> 00:01:23,666 To serve static assets express has a specific method to serve static assets. 22 00:01:23,666 --> 00:01:26,830 Here's the documentation to that method. 23 00:01:26,830 --> 00:01:29,200 You can read a bit more about it here. 24 00:01:29,200 --> 00:01:34,771 There're two parameters, we're only concerned with the first. 25 00:01:34,771 --> 00:01:39,394 I've already added the CSS files to my project in my folder that I 26 00:01:39,394 --> 00:01:41,200 created called public. 27 00:01:42,970 --> 00:01:48,760 The name Public is commonly used for the folder containing static assets. 28 00:01:49,910 --> 00:01:54,192 Inside Public there's a folder called stylesheets which holds my CSS. 29 00:01:54,192 --> 00:01:58,688 I've got a couple of CSS files that I want to save. 30 00:01:58,688 --> 00:02:04,450 Going into app.js, there's only one line of code that I need to add. 31 00:02:04,450 --> 00:02:06,310 And that's the static middleware. 32 00:02:07,700 --> 00:02:11,785 So I can type app.use, 33 00:02:14,709 --> 00:02:23,080 express.static, Then the public folder. 34 00:02:25,768 --> 00:02:28,820 Now let's see if we can find the CSS file in the browser. 35 00:02:29,890 --> 00:02:33,370 Go to localhost and express 36 00:02:33,370 --> 00:02:37,960 will make the public folder content available from the root of the app. 37 00:02:37,960 --> 00:02:47,169 So I will type public here, I'll type /stylesheets/style.css 38 00:02:50,481 --> 00:02:53,660 Hit Return, and you can see the stylesheet loads. 39 00:02:55,100 --> 00:02:59,270 Notice that the path we typed was at the root of our site. 40 00:03:01,410 --> 00:03:06,580 If we had a route called stylesheets, this could potentially conflict with that. 41 00:03:10,059 --> 00:03:15,330 Normally and that won’t call a rout style sheets, apart from it static content. 42 00:03:16,360 --> 00:03:21,300 But if you think folders are file names, in the public folder will conflict with 43 00:03:21,300 --> 00:03:26,880 other routes in your app, you can route the static server to specific location. 44 00:03:28,070 --> 00:03:31,220 Let's route the static server to static. 45 00:03:34,870 --> 00:03:38,400 So our style sheet will load up this URL. 46 00:03:41,727 --> 00:03:47,099 Next we need to link the HTML app produces to this file. 47 00:03:47,099 --> 00:03:51,851 Since we want to make all the styles available to the pages in our application, 48 00:03:51,851 --> 00:03:56,250 the best place to link to the style sheets will be in the template layout. 49 00:03:56,250 --> 00:04:00,390 Remember the template holds the head elements, 50 00:04:02,490 --> 00:04:05,348 That will be present on every page in our application. 51 00:04:05,348 --> 00:04:09,950 So in layout.pug and in the head, 52 00:04:09,950 --> 00:04:13,450 I'll create a style tag. 53 00:04:23,351 --> 00:04:28,484 Remember the route to where style sheet is, 54 00:04:28,484 --> 00:04:33,120 static, style sheets, style.css. 55 00:04:33,120 --> 00:04:39,004 When expressed renders this template it sends the HTML to the browser, 56 00:04:39,004 --> 00:04:41,945 the browser will see the link tag and 57 00:04:41,945 --> 00:04:46,860 make a request to the static/stylesheets/style.css. 58 00:04:46,860 --> 00:04:53,571 Because we set up the static server, the public folder's contents is at /static. 59 00:04:55,983 --> 00:05:00,890 Any path in the folder will automatically be available to static. 60 00:05:02,430 --> 00:05:07,070 I'll save this, and go back to our home route. 61 00:05:08,570 --> 00:05:09,370 Great. 62 00:05:09,370 --> 00:05:11,505 The pages are loading with my styles. 63 00:05:11,505 --> 00:05:13,803 Our work is far from finish though, 64 00:05:13,803 --> 00:05:18,402 because we still need to sync the HTML from our designer. 65 00:05:18,402 --> 00:05:22,730 If you're feeling ambitious, you can try to do this yourself. 66 00:05:22,730 --> 00:05:24,600 I wouldn't rate this is as an easy task though, so 67 00:05:24,600 --> 00:05:27,440 feel free to move to the next video and see how I did it. 68 00:05:28,450 --> 00:05:30,170 If you do want a challenge, 69 00:05:30,170 --> 00:05:33,330 I've supplied the design files in the teacher's notes below. 70 00:05:34,430 --> 00:05:38,824 They contain the final HTML structure that your app should render, 71 00:05:38,824 --> 00:05:41,302 as the user visits the app's routes. 72 00:05:41,302 --> 00:05:46,285 You can use the HTML to Pug converter to turn your HTML files into 73 00:05:46,285 --> 00:05:50,153 Pug files which should make the process easier. 74 00:05:50,153 --> 00:05:55,550 Find a link to the HTML to pug converter in the teacher's notes as well. 75 00:05:55,550 --> 00:05:59,670 Good luck and I'll see you in the next video where I'll walk through what I did.