Combine the static assets with the app.
Here are the assets from the designer. They model the HTML you'll need to replicate with Pug templates. This can be a difficult, non-linear project, and there aren't necessarily right or wrong answers.
HTML to Pug
HTML to Pug converters may still refer to Pug's old name, Jade. These tools aren't absolutely failsafe, but they will get you close. In most cases, they will probably get you close enough to be helpful.
Before we look at these static assets I just want to point out this error here. 0:00 This is happening because when we redirected we didn't stop 0:05 the execution of the rest of the function. 0:09 The URL handler is trying to redirect and render. 0:14 Obviously you can't do that. 0:18 This simple fix is just to return, when you redirect. 0:20 This stops the execution after the return statement. 0:26 You can see the server is restarted. 0:30 And if we go back to the redirect route, the redirections happened and 0:33 there's no errors. 0:39 Now back to static assets. 0:42 Here's what they app will look like when this dial sheet loads. 0:43 Pretty different. 0:48 The designer that works on this adjusted the HTML structure of the app quite a bit. 0:49 Which is not common when you're developing on a team. 0:54 Our job will be to tie the HTML into our app logic. 0:58 We want everything to work as intended. 1:04 The work we'll do is mostly in the templates. 1:07 Let's first take a look at how to 1:11 serve static assets in express. 1:16 To serve static assets express has a specific method to serve static assets. 1:21 Here's the documentation to that method. 1:24 You can read a bit more about it here. 1:26 There're two parameters, we're only concerned with the first. 1:29 I've already added the CSS files to my project in my folder that I 1:34 created called public. 1:39 The name Public is commonly used for the folder containing static assets. 1:42 Inside Public there's a folder called stylesheets which holds my CSS. 1:49 I've got a couple of CSS files that I want to save. 1:54 Going into app.js, there's only one line of code that I need to add. 1:58 And that's the static middleware. 2:04 So I can type app.use, 2:07 express.static, Then the public folder. 2:14 Now let's see if we can find the CSS file in the browser. 2:25 Go to localhost and express 2:29 will make the public folder content available from the root of the app. 2:33 So I will type public here, I'll type /stylesheets/style.css 2:37 Hit Return, and you can see the stylesheet loads. 2:50 Notice that the path we typed was at the root of our site. 2:55 If we had a route called stylesheets, this could potentially conflict with that. 3:01 Normally and that won’t call a rout style sheets, apart from it static content. 3:10 But if you think folders are file names, in the public folder will conflict with 3:16 other routes in your app, you can route the static server to specific location. 3:21 Let's route the static server to static. 3:28 So our style sheet will load up this URL. 3:34 Next we need to link the HTML app produces to this file. 3:41 Since we want to make all the styles available to the pages in our application, 3:47 the best place to link to the style sheets will be in the template layout. 3:51 Remember the template holds the head elements, 3:56 That will be present on every page in our application. 4:02 So in layout.pug and in the head, 4:05 I'll create a style tag. 4:09 Remember the route to where style sheet is, 4:23 static, style sheets, style.css. 4:28 When expressed renders this template it sends the HTML to the browser, 4:33 the browser will see the link tag and 4:39 make a request to the static/stylesheets/style.css. 4:41 Because we set up the static server, the public folder's contents is at /static. 4:46 Any path in the folder will automatically be available to static. 4:55 I'll save this, and go back to our home route. 5:02 Great. 5:08 The pages are loading with my styles. 5:09 Our work is far from finish though, 5:11 because we still need to sync the HTML from our designer. 5:13 If you're feeling ambitious, you can try to do this yourself. 5:18 I wouldn't rate this is as an easy task though, so 5:22 feel free to move to the next video and see how I did it. 5:24 If you do want a challenge, 5:28 I've supplied the design files in the teacher's notes below. 5:30 They contain the final HTML structure that your app should render, 5:34 as the user visits the app's routes. 5:38 You can use the HTML to Pug converter to turn your HTML files into 5:41 Pug files which should make the process easier. 5:46 Find a link to the HTML to pug converter in the teacher's notes as well. 5:50 Good luck and I'll see you in the next video where I'll walk through what I did. 5:55
You need to sign up for Treehouse in order to download course files.Sign up