One Solution

Hi, how'd it go? 0:00 Hopefully, you were able to complete this practice session successfully. 0:01 The goal was to load and display the app CSS Images and 0:04 a static JavaScript file, using the Express.Static middleware. 0:08 Now, I'll show you my solution, which you can compare with what you wrote. 0:12 You can also reference all my code when you download the project files. 0:15 The small recipe app generates dynamic content, using templates, variables, 0:19 and a data.JSON file. 0:24 Static files like images and 0:26 style sheets do not need to be processed by the application. 0:28 They just need to be delivered to the browser. 0:32 To send static files from the server's file system to the client, 0:34 Express uses a static server. 0:38 So first, in the file, app.js, 0:40 I passed express.static, into app.use as an argument. 0:43 Then, passed the pass to the folder I wanted express to use which is public. 0:50 Remember, express.static is a piece of middleware built into express. 0:54 You use it to find, and return a static file, 0:59 requested by your template, like an image. 1:01 With the static middleware setup, 1:03 express makes the public folder contents available at the root of the application. 1:05 So next, in views, layout.pug, I link the two 1:11 style sheets using the path forward/css/framework.css, 1:16 and /css/style.css, and inside the body, 1:22 I link the script.js file using the path /js/script.js. 1:27 Finally, in data.json, 1:33 I changed each object's image_url property to the path of its respective 1:38 recipe image, located inside the public Images directory. 1:42 I replaced the cinnamon rolls objects url with the path/images/cinnamon_roll.jpg, 1:48 then the next objects to /images/donut.jpg, 1:56 then /images/pumpkin_pie.jpg. 2:00 All right, now, I'll run the app. 2:04 Over in the browser, we see that the style sheets load, 2:09 as well as the recipe thumbnails, click on one, and there's the full image. 2:12 Checking the console displays the message JavaScript file successfully 2:17 served and linked! 2:21 And when I click the Dark Mode button in the top right corner, 2:23 the page changes to a light on dark color scheme. 2:26 The buttons text is now Light Mode. 2:29 Click it again. 2:33 The page changes back to its default colors and the button text to Dark Mode. 2:34 Good. 2:38 Another way you could have set up the express.static middleware is by 2:42 routing the static server to /static, like this. 2:47 This serves the public folders contents at /static. 2:57 That way, all your static assets load at this URL, for 3:01 example, static/css and static/images. 3:05 Routing the static server to a specific location prevents any folders or 3:09 file names and 3:13 the public directory from conflicting with the other routes and your app. 3:14 Now in layout.pug, I need to change the style sheet pads to /static/css. 3:19 And the JavaScript file's path to /static/js. 3:31 In data.json, I'll change the image_url paths to /static/images. 3:37 In my terminal, I'll stop and restart the server. 3:55 Over in the browser, the assets still load and display as expected. 4:01 There's yet another way to set up the static middleware to have Express serve 4:10 static files from the public folder or 4:15 any folder located at the root of your application using nodes dirname variable. 4:17 You can read about it in the teacher's notes with this video. 4:22 If you weren't able to complete certain parts of this practice session, 4:25 that's totally okay. 4:28 Why not start over and try it again without looking at my version? 4:29 You're also going to learn more about working with Express and 4:33 static assets as you progress through our full stack JavaScript curriculum. 4:35 Thanks everyone, and happy learning. 4:39