Serving Files in Express with sendFile()

In this quick post, we'll learn about the sendFile() method in Express and how to use it to send static files.

The sendFile() Method

The Express framework provides a sendFile() method available on the response object which can be used to send static files to the client.

Let's start by creating a public folder in our project directory:

$ mkdir public

Next, navigate to the public folder and create an index.html file with the following content:

<html>
<head>
    <title>Sending Static Files with Express</title>
</head>
<body>
    <p>This is a static file!</p>
</body>
</html>

Next, create an app.js file in the root folder of your project and add the following code to create a simple Express.js server running on the 3000 port:

const express = require('express');
const app = express();
app.use(express.static('public')); /* this line tells Express to use the public folder as our static folder from which we can serve static files*/


app.listen(3000, function(){
  console.log("Listening on port 3000!")
});

Here we assume, you have a package.json file in your project's root folder and Express.js installed: npm install --save express.

Next, let's define a root route that will be used to send the static HTML file to the client:

app.get('/', function(req, res){
  res.sendFile('index.html');
}); 

We use the get() method from the Express instance to call a given callback function when we visit the / route. The callback function is passed a request and response object that we named req and res.

In the callback, we call the sendFile() of the response object to send the index.html file.

You can now start your Express server using the following command:

$ node app.js

You server will be running from the http://localhost:3000 address. Open your web browser and navigate to that URL, you should see a blank page with This is a static file!. This is our index.html file served and interpreted by the browser. You can also use the sendFile() method to serve other types of static files like images for example.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status