In this tutorial, we will learn how to serve static files such as HTML, CSS, and JavaScript using Node.js. These files are essential for any web application and must be delivered to the client efficiently.
By the end of this tutorial, you will:
To follow this tutorial, you should have:
To serve static files in Node.js, we will use the Express.js framework, a fast, unopinionated, and flexible Node.js web application framework. Express provides a built-in middleware function, express.static, to serve static files.
First, you need to install Express. In your project directory, run the following command:
npm install express
This will install Express in your project and add it to your package.json file's dependencies.
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
Here's a basic 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 code, express.static('public') serves static assets from the public directory. If you put a file named style.css in the public directory, you can access it at http://localhost:3000/style.css.
Create a directory named public and put a file named index.html in it. Write some HTML in index.html:
<!DOCTYPE html>
<html>
<head>
<title>My First Static Server</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Here's the Node.js code to serve index.html:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Now if you access http://localhost:3000/index.html in your browser, you will see the "Hello, world!" heading.
Now let's add a CSS file and a JavaScript file to the public directory:
style.css:body {
background-color: lightblue;
}
script.js:document.body.innerHTML += '<p>Hello from JavaScript!</p>';
Update index.html to use these files:
<!DOCTYPE html>
<html>
<head>
<title>My First Static Server</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="script.js"></script>
</body>
</html>
If you run the server and access http://localhost:3000/index.html, you will see the styled page and the message from the JavaScript file.
In this tutorial, we learned how to serve static files in Node.js using Express.js. We learned how to use the express.static middleware function to serve static files from a directory.
Next, you could learn more about middleware in Express.js, or how to set up routes to handle different requests.
Here's the Express.js documentation for further reading.
Exercise: Serve static files from a different directory (not public).
Solution: You just need to change the argument to express.static. For example, if you want to serve files from a directory named static-files, you would use app.use(express.static('static-files')).
Exercise: Serve static files only on a certain route. For example, serve the public directory only on the /static route.
Solution: You can add a route as the first argument to app.use. For example, to serve the public directory on the /static route, use app.use('/static', express.static('public')).
Remember to practice and experiment on your own for better understanding!