Step 9: Serving Static Files

Let's add minimal styling to our application! Create the following style.css file and place it inside express-app/assets:

body {
  margin: 2em;
  text-align: center;
  line-height: 1.5;
  font-size: 1.1em;
}

Put a link to style.css in index.html and dashboard.njk:

<link rel="stylesheet" href="style.css">

Notice the href attribute does not include the folder assets in the CSS file path. We will have the Express to serve the content of assets folder as a static files.

Static files are files such as images, CSS files, and even JavaScript files which are shared among your HTML pages and do not change during runtime as a result of user interaction (hence, "static").

To serve static files, place the following statement somewhere after declaration of the app variable:

app.use(express.static("assets"));

Rerun your Express app. Visit http://localhost:5000/. You must see the look of the application changed!