BETAThis is a new service – your feedback will help us to improve it.

Serving static files

Web servers do two things:

  • Serve static, unchanging files like images, videos and CSS files
  • Serve dynamic content, created in real-time based on the user's request

We're going to start by making our Express app serve some static files, and then move on to dynamic content.

In the last lesson, we added this line to our server.js file:

server.use(express.static(__dirname + '/static'))

This line tells Express to serve whatever is in the folder /static.

Create that folder, and put a new file called test.html inside it. Put some HTML in that file for testing.

Make sure your app is running if it isn't already.

Visit your app on the web, and then add /test.html to the end of the URL. You should see your own HTML page.

Anything you put in the static folder can be visited on the web by putting the right path in the URL.

Later, we'll use this functionality to serve a CSS file. You might also want to store images like logos in here.

Try visiting preview URL on a different device, like a smartphone. You should be able to view your app anywhere, so long as it is running on Codenvy.

Next, we'll use dynamic content to build your app's user interface.

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Web servers
  1. Create your serverP
  2. Create your appP
  3. Node and the terminalP
  4. More about the terminalP
  5. Web frameworksP
  6. Using ExpressP
  7. Serving static files
  8. Views and templates
  9. Routing
  10. Real data
  11. Includes
  12. Get confident with Express
  13. Build your app in ExpressP