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!
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!