Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Combine the static assets with the app.
Design Files
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.
Documentation
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
serve static assets in express.
1:11
To serve static assets express has
a specific method to serve static assets.
1:16
Here's the documentation to that method.
1:23
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up