Tutorial

How To Serve Static Files in Express

Updated on October 13, 2020
authorauthor

Cooper Makhijani and Natalia Vargas-Caba

How To Serve Static Files in Express

Introduction

In this article, you will learn how to serve static files in Express. A Node.js framework, Express facilitates data in a server and includes rendering your static files on the client-side such as images, HTML, CSS, and JavaScript.

If you’re new to Express, check out our Introduction to Express to get caught up on the basics.

Prerequisites

To complete this tutorial, you will need the following:

  • An understanding of Node.js is suggested but not required. If you’d like to learn more about Node.js, check out the How To Code in Node.js series.
  • As Express is a Node.js framework, ensure you have Node.js installed from Node.js prior to following the next steps.

Step 1 — Setting up Express

To begin, run the following in your terminal:

Create a new directory for your project named express-static-file-tutorial:

  1. mkdir express-static-file-tutorial

Change into your new directory:

  1. cd express-static-file-tutorial

Initialize a new Node project with defaults. This will set a package.json file to access your dependencies:

  1. npm init -y

Create your entry file, index.js. This is where you will store your Express server:

  1. touch index.js

Install Express as a dependency:

  1. npm install express --save

Within your package.json, update your start script to include node and your index.js file.

package.json
{
  "name": "express-static-file-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "Paul Halliday",
  "license": "MIT"
}

This will allow you to use the npm start command in your terminal to launch your Express server.

Step 2 — Structuring Your Files

To store your files on the client-side, create a public directory and include an index.html file along with an image. Your file structure will look like this:

express-static-file-tutorial
  |- index.js
  |- public
    |- shark.png
    |- index.html

Now that your files are set up let’s begin your Express server.

Step 3 — Creating Your Express Server

In your index.js file, require in an Express instance and implement a GET request:

index.js
const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

Now let’s tell Express to handle your static files.

Step 4 — Serving Your Static Files

Express provides a built-in method to serve your static files:

app.use(express.static('public'));

When you call app.use(), you’re telling Express to use a piece of middleware. Middleware is a function that Express passes requests through before sending them to your routing functions, such as your app.get('/') route. express.static() finds and returns the static files requested. The argument you pass into express.static() is the name of the directory you want Express to serve files. Here, the public directory.

In index.js, serve your static files below your PORT variable. Pass in your public directory as the argument:

index.js
const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

With your Express server set, let’s focus on the client-side.

Step 5 — Building Your Web Page

Navigate to your index.html file in the public directory. Populate the file with body and image elements:

[label index.html] 
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <img src="shark.png" alt="shark">
  </body>
</html>

Notice the image element source to shark.png. Since you’ve served the public directory through Express, you can add the file name as your image source’s value.

Step 6 — Running Your Project

In your terminal, launch your Express project:

  1. npm start
Server listening on port: 3000

Open your web browser, and navigate to http://localhost:3000. You will see your project:

Screenshot of the web page displaying a Hello World message and shark image.

Conclusion

Express offers a built-in middleware to serve your static files and modularizes content within a client-side directory in one line of code.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Cooper Makhijani

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

This comment has been deleted

    Hi, thanks a lot but for me it only worked after I visited http://localhost:3000/index.html ,why is that?

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more