ExpressJS Static Files Serving

Imagine you're building a house. You have bricks for structure, but you also need paint, furniture, and decorations to make it look good. In web applications, HTML is the structure, but CSS makes it beautiful, images add visual appeal, and client-side JavaScript adds interactivity. These are called static files files that don't change based on the request.

What are Static Files?

Static files are files that the server sends to the client exactly as they are, without any processing. Common static files include:

CSS stylesheets
JavaScript files (client-side)
Images (JPG, PNG, GIF, SVG)
Fonts
PDFs and other downloadable files

Serving Static Files with Express

Express provides a built-in middleware function called express.static() to serve static files. You just need to specify the directory name where your static files are stored.

const express = require('express');
const app = express();

// Serve static files from the 'public' directory
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

How It Works

If you have a file structure like this:

my-app/
├── public/
│   ├── css/
│   │   └── style.css
│   ├── images/
│   │   └── logo.png
│   └── js/
│       └── script.js
├── app.js
└── package.json

Then these files will be accessible at:

http://localhost:3000/css/style.css
http://localhost:3000/images/logo.png
http://localhost:3000/js/script.js

Using Static Files in HTML

Once you're serving static files, you can reference them in your HTML like this:

Multiple Static Directories

You can serve static files from multiple directories. Express will search them in the order they are defined:

// Serve from 'public' first, then 'assets'
app.use(express.static('public'));
app.use(express.static('assets'));

// If a file exists in both directories, the one from 'public' will be served

Virtual Path Prefix

Sometimes you want to serve static files under a specific URL path, not directly at the root. You can add a mount path:

// Serve static files under the '/static' path
app.use('/static', express.static('public'));

// Now files are accessible at:
// http://localhost:3000/static/css/style.css
// http://localhost:3000/static/images/logo.png

Practical Example: Complete Website with Static Files

const express = require('express');
const path = require('path');
const app = express();

// Serve static files
app.use(express.static('public'));

// Route for home page
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Route for about page
app.get('/about', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'about.html'));
});

app.listen(3000);

Two Minute Drill

Static files are CSS, images, client-side JS, etc., that don't change per request.
Use express.static('folder-name') to serve static files.
Files become accessible at the root URL (or specified path).
You can serve multiple static directories.
Use a virtual path prefix like app.use('/static', express.static('public')) to organize URLs.
Static file serving is essential for any website with CSS, images, or frontend JavaScript.

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

ExpressJS Static Files Serving

Need more clarification?