freeCodeCamp/curriculum/challenges/english/05-apis-and-microservices/basic-node-and-express/serve-static-assets.md

2.0 KiB
Raw Blame History

id title challengeType forumTopicId
587d7fb0367417b2b2512bf0 Serve Static Assets 2 301518

Description

An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express, you can put in place this functionality using the middleware express.static(path), where the path parameter is the absolute path of the folder containing the assets. If you dont know what middleware is... dont worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use(path, middlewareFunction). The first path argument is optional. If you dont pass it, the middleware will be executed for all requests.

Instructions

Mount the express.static() middleware for all requests with app.use(). The absolute path to the assets folder is __dirname + /public. Now your app should be able to serve a CSS stylesheet. From outside, the public folder will appear mounted to the root directory. Your front-page should look a little better now!

Tests

tests:
  - text: Your app should serve asset files from the <code>/public</code> directory
    testString: 'getUserInput => $.get(getUserInput(''url'') + ''/style.css'').then(data => { assert.match(data, /body\s*\{[^\}]*\}/, ''Your app does not serve static assets''); }, xhr => { throw new Error(xhr.responseText); })'

Challenge Seed

Solution

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/