1
00:00:00,000 --> 00:00:09,196
[MUSIC]

2
00:00:09,196 --> 00:00:10,704
Hi everyone, Guil here.

3
00:00:10,704 --> 00:00:14,146
In this practice session,
you'll continue to build your node and

4
00:00:14,146 --> 00:00:17,595
express skills by practicing
the basics of serving static files.

5
00:00:17,595 --> 00:00:21,611
The transition from client side to server
side JavaScript has its challenges.

6
00:00:21,611 --> 00:00:25,290
For example, using static assets like
a custom style sheet and images in

7
00:00:25,290 --> 00:00:26,722
express apps can be tricky.

8
00:00:26,722 --> 00:00:31,052
You can't use them as you would in client
side apps built with JavaScript, node or

9
00:00:31,052 --> 00:00:34,020
express and
a browser are two different environments.

10
00:00:34,020 --> 00:00:37,959
Express involves setting up and using
special static middleware to serve and

11
00:00:37,959 --> 00:00:39,117
display your assets.

12
00:00:39,117 --> 00:00:42,974
So this practice exercise will help
reinforce what you've learned, as well as

13
00:00:42,974 --> 00:00:46,386
provide you examples to reference
when working on express projects.

14
00:00:46,386 --> 00:00:50,220
In this session you are going to work
on a simple recipe collection app.

15
00:00:50,220 --> 00:00:54,418
This is the same recipe application used
in the using data with pug templates

16
00:00:54,418 --> 00:00:57,829
practice session where you use
express routes to pass data and

17
00:00:57,829 --> 00:01:00,006
to pod templates that render recipes.

18
00:01:00,006 --> 00:01:04,075
So I recommend that you complete that
practice session before moving forward

19
00:01:04,075 --> 00:01:05,146
with this session.

20
00:01:05,146 --> 00:01:09,604
Now you're going to serve and display
static assets like CSS, images, and

21
00:01:09,604 --> 00:01:10,450
JavaScript.

22
00:01:10,450 --> 00:01:15,334
You will deliver two custom style
sheets and a JavaScript file to those

23
00:01:15,334 --> 00:01:19,818
visiting the app, as well as
images from a local images folder.

24
00:01:19,818 --> 00:01:22,696
To get started, download the project
files with this video and

25
00:01:22,696 --> 00:01:24,553
open them in your favorite text editor.

26
00:01:24,553 --> 00:01:28,664
The project files consist of a small and
simple express app created

27
00:01:28,664 --> 00:01:32,792
using the express application
generator and slightly modified.

28
00:01:32,792 --> 00:01:36,370
The public folder holds all
the static assets to serve,

29
00:01:36,370 --> 00:01:39,198
like CSS, images, and a JavaScript file.

30
00:01:39,198 --> 00:01:45,608
In the CSS folder, there are two style
sheets, framework.css and style.CSScss.

31
00:01:45,608 --> 00:01:49,887
In the js folder, the script.js
file contains a script that changes

32
00:01:49,887 --> 00:01:52,468
the page's color scheme to a dark mode and

33
00:01:52,468 --> 00:01:56,327
back to its default colors when
you click a button on the page.

34
00:01:56,327 --> 00:01:59,654
It also logs a success
message to the console.

35
00:01:59,654 --> 00:02:02,376
All right,
now that you have the project open,

36
00:02:02,376 --> 00:02:06,478
navigate to the project directory
using your terminal or console app.

37
00:02:06,478 --> 00:02:11,906
Run npm install to install
all the project dependencies.

38
00:02:11,906 --> 00:02:15,134
Then run npm start to start the app.

39
00:02:15,134 --> 00:02:19,772
You can view the app in the browser
on localhost port 3000.

40
00:02:19,772 --> 00:02:20,839
In the browser,

41
00:02:20,839 --> 00:02:25,421
you should see the default index view
which displays a list of recipes.

42
00:02:25,421 --> 00:02:29,206
Now currently the app is
not styled with CSS, and

43
00:02:29,206 --> 00:02:34,656
all images are temporary placeholder
images being served from a image

44
00:02:34,656 --> 00:02:39,661
placeholder service as you can
see here in the data.json file.

45
00:02:39,661 --> 00:02:42,958
Now let's go over what you'll need to do,

46
00:02:42,958 --> 00:02:48,283
following the instructions in app.js and
in Views > layout.pug.

47
00:02:50,725 --> 00:02:52,323
Starting with app.js,

48
00:02:52,323 --> 00:02:56,442
there's one important line of code
you need to add to this file.

49
00:02:56,442 --> 00:02:58,010
See the numbered comet here,

50
00:02:58,010 --> 00:03:02,150
this is where you will need to add the
static middleware which sets up expresses

51
00:03:02,150 --> 00:03:05,426
static server to start sending
static assets to the browser.

52
00:03:05,426 --> 00:03:09,699
Next, to display the CSS, you will
need to link the two style sheets.

53
00:03:09,699 --> 00:03:17,162
In layout.pug, link the framework.css
file, then link the style.css file.

54
00:03:17,162 --> 00:03:18,392
Inside the body,

55
00:03:18,392 --> 00:03:23,323
you will need to link the script.js
file located inside the js folder.

56
00:03:23,323 --> 00:03:26,482
That's going to let the user
toggle between a dark mode and

57
00:03:26,482 --> 00:03:29,135
light mode color scheme
using this button here.

58
00:03:29,135 --> 00:03:33,817
Also if the file is loaded correctly
the console will display the message,

59
00:03:33,817 --> 00:03:37,026
JavaScript file successfully served and
linked.

60
00:03:37,026 --> 00:03:41,561
Finally, in the data.json file,
the image URL property of each

61
00:03:41,561 --> 00:03:45,861
object is used to set the value
of an images source attribute.

62
00:03:45,861 --> 00:03:49,827
So you will need to change each
image URL property to the path of

63
00:03:49,827 --> 00:03:53,884
the appropriate static image
instead of the placeholder URL.

64
00:03:53,884 --> 00:03:58,285
For example, replace the cinnamon
roll object's URL with the path to

65
00:03:58,285 --> 00:04:01,878
the cinnamon_roll.jpg file
in the public directory.

66
00:04:04,045 --> 00:04:08,838
The goal is to get the app to load the
style sheets and display the CSS styles

67
00:04:08,838 --> 00:04:13,267
on the page, as well as the thumbnail and
main image of each recipe.

68
00:04:13,267 --> 00:04:16,883
And when the app loads the JavaScript
file, the JavaScript console

69
00:04:16,883 --> 00:04:21,086
should display the message JavaScript
file successfully served and linked.

70
00:04:21,086 --> 00:04:26,013
And clicking the dark mode button in the
top right corner should change the page to

71
00:04:26,013 --> 00:04:27,831
a light on dark color scheme.

72
00:04:27,831 --> 00:04:31,321
Clicking it again changes it
back to its default colors.

73
00:04:31,321 --> 00:04:33,530
To be successful in this practice session,

74
00:04:33,530 --> 00:04:37,366
you should have completed our lessons
on serving static files and express.

75
00:04:37,366 --> 00:04:40,507
I've posted a link to the lessons in
the teacher's note with this video,

76
00:04:40,507 --> 00:04:41,987
as well as additional resources.

77
00:04:41,987 --> 00:04:45,710
So good luck, have fun, and in the next
video, I'll walk you through one solution.