Preview
Video Player
00:00
00:00
Adding Static Assets to the App
6:00Combine the static assets with the app.
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