How to Serve Static Files Using NodeJS & ExpressJS
Introduction
Express is one of the best frameworks out there for creating HTTP servers in Node.js. The framework is commonly used for creating REST APIs, but it's also great for serving static files like CSS, images, videos, text files, PDFs, and more.
To serve these static files, we'll use the built-in express.static() middleware function that comes included with Express. And we'll create a directory where all of our static files can be stored and served from.
To follow along with the code in this article, you'll need to have Node.js installed on your local development machine.
We created a tutorial on installing Node.js if you need help.
Let's get started!
Table of Contents
Create an Express HTTP Server
The first thing we need to do is get an HTTP server up and running. If you already have an ExpressJS server created and running, you can skip to the section on serving static files.
We'll use ExpressJS to quickly get a fast and minimalist server going. If you haven't already installed it, you can do so with one of these commands (using either Yarn or Npm):
Npm
$ npm install --save express
Yarn
$ yarn add express
Then, add this code to the Node.js file you want to work with:
Node.js
 
const express = require("express")
 
const PORT = process.env.PORT || 5000
 
const app = express()
 
app.listen(PORT, function () {
  console.log(`Express server listening on port ${PORT}`)
})
First, we require() the Express npm package we installed earlier.
Then, we create a PORT variable that is either the current process.env.PORT value or 5000. And we create an instance of express using the express() method and hold it in the app variable.
The last thing we add is the app.listen() function to start the Express app and tell it to listen on the PORT we specified.
When you run the code via the command line, you should see this message or something similar logged to the console:
Output
 
Express server listening on port 5000
Awesome! We now have an Express HTTP server running and we can move on to the next step.
Serve Static Files
To serve static files with Express, we will use the built-in express.static() middleware function. This will allow us to serve any kind of static file, including CSS, images, JavaScript, videos, PDFs, etc.
But first, we need to create a folder in our project to hold some static files to serve.
Create a new directory called /assets with this command:
$ mkdir assets
And then add some test static files to it that we can serve. Add whatever kind of files you wish, whether they are images, videos, or basic text files.
Then, open your Node.js file again and update the code to look like this:
Node.js
 
const express = require("express")
const path = require("path")
 
const PORT = process.env.PORT || 5000
 
const app = express()
 
app.use("/assets", express.static(path.join(__dirname, "assets")))
 
app.listen(PORT, function () {
  console.log(`Express server listening on port ${PORT}`)
})
The first thing that's new about our code is that we imported the Path Node.js module. This will help us create a path to where our static files reside. Since this is a Node.js core module and not a npm package, we can require() it into our code without installing anything.
The next new thing is the app.use() middleware we added to our Express server. Inside of the app.use() function, we first tell it to use the /assets URL to make our files accessible at URLs that look like this: http://localhost:5000/assets/name-of-file.png.
And we also use the express.static() function to tell Express what location we want to serve files from. In our case, we want to use the /assets directory so we supply that path to the function.
Save your Node.js file and restart the server.
Open your browser and test it out. If you had a PNG file in your /assets directory called my-photo.png, you would access it through this link:
http://localhost:5000/assets/my-photo.png
Pretty awesome, right?
Feel free to play around with different types of files.
Conclusion
Serving static files is a hallmark feature of any HTTP server or backend API. In this tutorial, we walked through how to do this with an Express HTTP server using the express.static() middleware.
If you're wondering how to deploy your application for the world to see, check out our article on how to deploy a Node.js application to a DigitalOcean server.
That article will walk you through how to setup and configure a server, configure a custom domain name, install and configure Nginx, setup HTTPS/SSL encryption for your domain, configure the Node.js application, and setup Nginx as a reverse proxy.
Thanks for reading and happy coding!
Have any questions or comments about this article? You can contact me via email at nick@coderrocketfuel.com or on Twitter at @CoderRocketFuel.
If you enjoyed this free content, please consider supporting what I do by Buying Me a Coffee.