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.