Express.js Setting Up Static Folders

Serving static files from specific folders is a common requirement for web applications. Express.js provides an easy way to set up static folder directories where assets like images, stylesheets, JavaScript files, and HTML documents can be accessed.

 

Key Features of Setting Up Static Folders

• express.static Middleware: This middleware is used to serve static files from specified directories.
• Serving from Custom Folders: You can specify one or more custom folders to serve static content.
• Serving Multiple Static Directories: You can serve static files from more than one directory by calling the express.static middleware multiple times.

 

Components of Setting Up Static Folders

Using express.static Middleware
The express.static middleware is used to serve static files like images, CSS, and JavaScript files. You need to provide the folder path where static files are located.

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 stored in the public folder.

Serving Files from a Subfolder
You can specify a subfolder within your main static folder. For instance, if you want to serve images from the public/images folder, you can do this:

Example:

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

Files in the public/images directory will now be accessible at http://localhost:3000/images/filename.

Setting Up Custom Static Folders
You can configure Express to serve files from multiple directories. For example, you might want to serve static files from public/assets or uploads.

Example:

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

Now, files in public/assets will be available at http://localhost:3000/assets, and files in the uploads folder will be available at http://localhost:3000/uploads.

Cache-Control for Static Files
To improve performance, you can specify caching rules for static files. The maxAge option allows you to set a cache duration.

Example:

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

Serving Multiple Static Folders
If you have multiple directories to serve static files from, you can call express.static multiple times with different folder paths.

Example:

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

Accessing Static Files
Once the static folders are set up, you can access the static files directly from the URL. For example:

• A file public/logo.png would be accessible at http://localhost:3000/logo.png.
• A file public/assets/style.css would be accessible at http://localhost:3000/assets/style.css.

 

Example Code

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

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

// Serve files from 'assets' folder under '/assets' URL path
app.use('/assets', express.static('public/assets'));

// Serve images from 'images' folder under '/images' URL path
app.use('/images', express.static('public/images'));

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

 

Summary

Express.js makes it easy to serve static files from specific directories using the express.static middleware. By setting up custom static folders, you can serve images, CSS, JavaScript, and other assets efficiently. You can also enable caching for better performance and serve multiple folders simultaneously to manage your static content.