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
This practice challenge will help reinforce what you've learned about Express, as well as provide examples to reference when working on other Express projects.
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
[MUSIC]
0:00
Hi everyone, Guil here.
0:09
In this practice session,
you'll continue to build your node and
0:10
express skills by practicing
the basics of serving static files.
0:14
The transition from client side to server
side JavaScript has its challenges.
0:17
For example, using static assets like
a custom style sheet and images in
0:21
express apps can be tricky.
0:25
You can't use them as you would in client
side apps built with JavaScript, node or
0:26
express and
a browser are two different environments.
0:31
Express involves setting up and using
special static middleware to serve and
0:34
display your assets.
0:37
So this practice exercise will help
reinforce what you've learned, as well as
0:39
provide you examples to reference
when working on express projects.
0:42
In this session you are going to work
on a simple recipe collection app.
0:46
This is the same recipe application used
in the using data with pug templates
0:50
practice session where you use
express routes to pass data and
0:54
to pod templates that render recipes.
0:57
So I recommend that you complete that
practice session before moving forward
1:00
with this session.
1:04
Now you're going to serve and display
static assets like CSS, images, and
1:05
JavaScript.
1:09
You will deliver two custom style
sheets and a JavaScript file to those
1:10
visiting the app, as well as
images from a local images folder.
1:15
To get started, download the project
files with this video and
1:19
open them in your favorite text editor.
1:22
The project files consist of a small and
simple express app created
1:24
using the express application
generator and slightly modified.
1:28
The public folder holds all
the static assets to serve,
1:32
like CSS, images, and a JavaScript file.
1:36
In the CSS folder, there are two style
sheets, framework.css and style.CSScss.
1:39
In the js folder, the script.js
file contains a script that changes
1:45
the page's color scheme to a dark mode and
1:49
back to its default colors when
you click a button on the page.
1:52
It also logs a success
message to the console.
1:56
All right,
now that you have the project open,
1:59
navigate to the project directory
using your terminal or console app.
2:02
Run npm install to install
all the project dependencies.
2:06
Then run npm start to start the app.
2:11
You can view the app in the browser
on localhost port 3000.
2:15
In the browser,
2:19
you should see the default index view
which displays a list of recipes.
2:20
Now currently the app is
not styled with CSS, and
2:25
all images are temporary placeholder
images being served from a image
2:29
placeholder service as you can
see here in the data.json file.
2:34
Now let's go over what you'll need to do,
2:39
following the instructions in app.js and
in Views > layout.pug.
2:42
Starting with app.js,
2:50
there's one important line of code
you need to add to this file.
2:52
See the numbered comet here,
2:56
this is where you will need to add the
static middleware which sets up expresses
2:58
static server to start sending
static assets to the browser.
3:02
Next, to display the CSS, you will
need to link the two style sheets.
3:05
In layout.pug, link the framework.css
file, then link the style.css file.
3:09
Inside the body,
3:17
you will need to link the script.js
file located inside the js folder.
3:18
That's going to let the user
toggle between a dark mode and
3:23
light mode color scheme
using this button here.
3:26
Also if the file is loaded correctly
the console will display the message,
3:29
JavaScript file successfully served and
linked.
3:33
Finally, in the data.json file,
the image URL property of each
3:37
object is used to set the value
of an images source attribute.
3:41
So you will need to change each
image URL property to the path of
3:45
the appropriate static image
instead of the placeholder URL.
3:49
For example, replace the cinnamon
roll object's URL with the path to
3:53
the cinnamon_roll.jpg file
in the public directory.
3:58
The goal is to get the app to load the
style sheets and display the CSS styles
4:04
on the page, as well as the thumbnail and
main image of each recipe.
4:08
And when the app loads the JavaScript
file, the JavaScript console
4:13
should display the message JavaScript
file successfully served and linked.
4:16
And clicking the dark mode button in the
top right corner should change the page to
4:21
a light on dark color scheme.
4:26
Clicking it again changes it
back to its default colors.
4:27
To be successful in this practice session,
4:31
you should have completed our lessons
on serving static files and express.
4:33
I've posted a link to the lessons in
the teacher's note with this video,
4:37
as well as additional resources.
4:40
So good luck, have fun, and in the next
video, I'll walk you through one solution.
4:41
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