Express.js Serving Static Files

Serving static files like images, CSS files, JavaScript files, and HTML documents is a common requirement for web applications. Express.js simplifies this process by providing built-in middleware to serve static assets.

 

Key Features of Serving Static Files

• Built-in Middleware: Express provides the express.static middleware to serve static files from a specific directory.
• Serving from a Folder: You can specify a folder to serve static content, making it accessible to the browser.
• Public Directory: It is common practice to store static files in a public directory.

 

Components of Serving Static Files

Using express.static Middleware
The express.static middleware is used to serve static files such as images, stylesheets, and scripts. You provide a directory path, and Express will automatically look for files in that directory.

Example:

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 is running on port 3000');
});

In this example, Express will serve any static files (e.g., images, CSS, JavaScript) stored in the public folder.

Serving Files from a Specific Subfolder
If you have a subfolder within your static folder, you can specify that as well. For example, serving static files from a public/images folder:

Example:

app.use('/images', express.static('public/images'));

Now, all files in the public/images folder will be available at http://localhost:3000/images/filename.

Setting Up a Custom Static Folder
You can serve static files from a custom directory by specifying its path.

Example:

app.use('/assets', express.static('assets'));

Accessing Static Files
Once static files are served, you can access them directly from the URL path you set. For example, a file public/logo.png would be accessible via http://localhost:3000/logo.png if served from the public directory.

Cache-Control Headers
You can configure cache settings for static files to improve performance. Use express.static's maxAge option to set cache expiration.

Example:

app.use(express.static('public', {
    maxAge: '1d'  // Cache static files for 1 day
}));

Serving Multiple Static Folders
Express allows you to serve files from multiple directories. Simply call express.static multiple times with different paths.

Example:

app.use(express.static('public'));
app.use('/uploads', express.static('uploads'));

 

Example Code

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

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

// Serve images from the 'images' folder and make it accessible from '/images'
app.use('/images', express.static('public/images'));

// Serve assets from the 'assets' folder and make them accessible from '/assets'
app.use('/assets', express.static('assets'));

// Start the server
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

 

Summary

Express.js makes it easy to serve static files by using the express.static middleware. By setting up a specific directory, you can serve images, stylesheets, JavaScript files, and more. You can customize the file paths, set cache control headers, and serve multiple directories to handle your static content efficiently.