Express express.static() Function

In Express.js, serving static files like images, CSS, and JavaScript used to require custom routes. With the express.static() function, you can serve static content directly from a folder, making it easier and faster. Let’s explore how this function works and how you can use it in your web applications.

What is express.static()?

The express.static() is a built-in middleware function in Express.js that allows you to serve static files (like images, HTML, CSS, and JavaScript) directly to the client. It automatically makes all files inside a specified folder accessible via HTTP requests. You don’t have to create custom routes for each file.

Syntax

app.use(express.static('directory_name'));

• directory_name: The path to the folder containing the static files (e.g., ‘public’, ‘assets’).

Code implementation of express.static()

Step 1: Create a public Folder

First, create a folder named public in your project directory. Inside this folder, place an index.html file and any images you want to display.

public folder

Step 2: Make a server.js file

Make a server.js file that contains the code logic to send the image to the specified route on to your localhost route

//server.js
const express = require('express');
const app = express();

// Use express.static middleware to serve static files from the "public" folder
app.use(express.static('public'));

// Define a route (this is optional)
app.get('/', (req, res) => {
  res.send('Welcome to my static website!');
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

• Middleware Setup: express.static is a built-in middleware function in Express that serves static files.
• Directory Path: It takes a directory path as an argument, indicating where static assets (like images, CSS, and JavaScript) are stored.
• Request Handling: When a request is made for a specific file, Express searches the specified directory for the file.
• File Delivery: If the requested file exists, Express sends it directly to the client (browser) with the appropriate content type.
• 404 Error: If the file is not found, Express returns a 404 error, indicating the resource is not available.

Step 3: Run the server

Use the following command to run the server.js file in your current working directory of the project

node server.js

Step 4: Open Your Browser

Visit the localhost:3000 to see the image that has been rendered on the page

How the express.static() works?

• express.static is a built-in middleware function in Express that serves static files.
• It takes a directory path as an argument, indicating where static assets (like images, CSS, and JavaScript) are stored.
• When a request is made for a specific file, Express searches the specified directory for the file.
• If the requested file exists, Express sends it directly to the client (browser) with the appropriate content type.
• If the file is not found, Express returns a 404 error, indicating the resource is not available.

What is the use of express.static() function?

• Serve Static Files: It serves static assets like HTML, CSS, JavaScript, and image files from a specified directory.
• Improved Performance: Express handles caching and optimized delivery of static content to improve load times.
• Simplified Routing: It eliminates the need for manually creating routes for each static file, making code cleaner.
• Organize Static Assets: It allows you to keep all static files in one directory, improving file management.
• Efficient File Delivery: It automatically serves files with the correct content type, making it easy to work with different file formats.

Advantages of express.static() function

• Efficient File Serving: It automatically serves static files like images, CSS, and JavaScript, saving time and effort.
• Improved Performance: Express handles caching and optimized delivery of static assets, reducing server load and speeding up content delivery.
• Simplicity: You don’t need to create custom routes for each static file, making the code cleaner and easier to maintain.
• Automatic Content Type Handling: Express automatically sets the correct content type for files (like text/html, image/jpeg), ensuring proper rendering in browsers.
• Organized File Management: It helps keep static assets in a dedicated directory, making it easier to manage and maintain your files.

Conclusion

The express.static() function makes serving static files in your Express app much easier. Instead of writing custom routes for each file, you simply specify a directory, and Express handles the rest. It improves performance with caching, simplifies routing, and automatically serves files with the correct content type.

gouravhammad

Follow

Improve

Article Tags :

• Express.js
• JavaScript
• Node.js
• Web Technologies