Without the Express Framework
To serve static files using the fundamentals of Node.js, we can follow these steps:
- Parse the incoming HTTP request, to know the requested path.
- Check if the path exists to respond to status as success or not found (optional).
- Get the extension of the file to set content-type.
- Serve the content-type in the header and serve the requested file in response.
Example: The following code is an example of how to get an image or other static files from the node server.
// Requiring modules
const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");
// Creating server to accept request
http.createServer((req, res) => {
// Parsing the URL
const request = url.parse(req.url, true);
// Extracting the path of file
const action = request.pathname;
// Path Refinements
const filePath = path.join(__dirname,
action).split("%20").join(" ");
// Checking if the path exists
fs.exists(filePath, function (exists) {
if (!exists) {
res.writeHead(404, {
"Content-Type": "text/plain"
});
res.end("404 Not Found");
return;
}
// Extracting file extension
const ext = path.extname(action);
// Setting default Content-Type
const contentType = "text/plain";
// Checking if the extension of
// image is '.png'
if (ext === ".png") {
contentType = "image/png";
}
// Setting the headers
res.writeHead(200, {
"Content-Type": contentType
});
// Reading the file
fs.readFile(filePath,
function (err, content) {
// Serving the image
res.end(content);
});
});
})
// Listening to the PORT: 3000
.listen(3000, "127.0.0.1");
Steps to run the program:
node server.js
Output: Open any browser and to go http://localhost:3000/images/w3wiki.png and you will see the following output:
The output of the above command
How to Fetch Images from Node Server ?
The images, CSS files, JavaScript files, and other files that the client downloads from the server are known as static files. These static files can be fetched with the use of the express framework and without the use of it. The methods that can be used to serve static files are discussed below. The image to be accessed (w3wiki.png) is placed inside the images folder, as shown in the directory tree below:
Project Structure:
We will discuss the following approaches to fetch images from Node server:
Table of Content
- Using the Express framework
- Without the Express Framework