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.
To complete this tutorial, you will need the following:
To begin, run the following in your terminal:
Create a new directory for your project named express-static-file-tutorial
:
- mkdir express-static-file-tutorial
Change into your new directory:
- cd express-static-file-tutorial
Initialize a new Node project with defaults. This will set a package.json
file to access your dependencies:
- npm init -y
Create your entry file, index.js
. This is where you will store your Express server:
- touch index.js
Install Express as a dependency:
- npm install express --save
Within your package.json
, update your start
script to include node
and your index.js
file.
{
"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.
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.
In your index.js
file, require in an Express instance and implement a GET
request:
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.
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:
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.
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.
In your terminal, launch your Express project:
- npm start
Server listening on port: 3000
Open your web browser, and navigate to http://localhost:3000
. You will see your project:
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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?