Enabling static files

Enabling Static Files in Express.js

In this tutorial, we will learn how to serve static files using Express.js. Static files include HTML, CSS, JavaScript, images, and other assets that don't change dynamically. By serving static files, we can enhance the performance of our web applications and provide users with more immersive content, such as images and style sheets.

Step 1: Setting Up Static File Serving

In the last video, we created a basic Express.js server. Now, we will enhance that server to serve static files from a specific directory in our project. To do this, we need to make use of the express.static() middleware.

Open your index.js file and add the following line of code to set up the public directory as a source of static files:

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

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

This line of code tells Express to serve any file placed in the public directory directly to the user. This means that any HTML, CSS, images, or JavaScript placed in the public folder will now be accessible via a URL.

Update (2024): If you're working with ES Modules, consider importing Express like this: import express from 'express';. Also, make sure your package.json file has "type": "module" specified.

Step 2: Creating a Public Folder

The next step is to create a public folder in your project directory. Inside this folder, you can add static files such as an HTML file, CSS files, JavaScript files, and images.

For example, let's create a simple index.html file inside the public folder with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Site</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Static Site!</h1>
    <p>This is an example of serving static files using Express.js.</p>
</body>
</html>

You can add a styles.css file to the public folder as well to style the HTML content.

Step 3: Restarting the Server

After adding the static files, you need to restart your server to see the changes. Stop the server using CTRL + C (or Command + C on macOS) and start it again using the following command:

node index.js

Once the server is running, open your browser and navigate to http://localhost:3000. You should see the content from index.html that you added to the public folder.

Testing the Static File Access

To test if the static file serving is working, you can add an image or another HTML file to the public folder and access it directly via the browser. For example, if you add an image named logo.png inside the public folder, you can access it by navigating to http://localhost:3000/logo.png.

This makes it really easy to serve assets that are required by your front end without writing any additional server-side code.

Conclusion

In this tutorial, you learned how to enable static file serving in Express.js by using the express.static() middleware. Serving static files is a crucial part of creating user-friendly and visually appealing web applications. In the next lesson, we'll take a look at how to handle routing and create more dynamic server responses using Express.js.

Stay tuned, and keep building!

Starting up an Express.js server

Learn how to start up an Express.js server, including installation, basic setup, and creating a Hello World server.