Using ExpressJS to Display Static HTML File Content

In ExpressJs, there is a very simple way to send an HTML file to the browser using the method: res.sendFile(), which reads the content of the .html file and sends it to the browser, allowing us to quickly display the content of a page or some static page.

How to Use res.sendFile()

Using the sendFile() method is very simple, you just need to pass the only parameter which is the path to the HTML file you want to display.

Example

Create a directory

$ mkdir express-sendfile
$ cd express-sendfile

Initialize a Nodejs and ExpressJs application

$ npm init
$ npm install express --save

Create two files server.js and index.html

$ touch server.js index.html

Now, in our directory, we will have two files. Open server.js with some text editor, with the following content:

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

// viewed at http://localhost:8080
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'))
})

app.listen(8080)

Next is the index.html file, this is the content we need to display in the browser:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sample Site</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>res.sendFile() Works!</h1>
      </div>
    </div>
  </body>
</html>

Ok, now let's check it out by running the command:

$ node server.js

Open the browser and go to: http://localhost:8080

Conclusion

res.sendFile() is a very easy-to-use and useful method in ExpressJs, you can make SinglePage applications, load content using AngularJs, static pages, etc. Additionally, ExpressJs provides many other tools to read and download files on the server.

How to Use res.sendFile()

Using the sendFile() method is very simple, you just need to pass the only parameter which is the path to the HTML file you want to display.

Example

Create a directory

$ mkdir express-sendfile
$ cd express-sendfile

Initialize a Nodejs and ExpressJs application

$ npm init
$ npm install express --save

Create two files server.js and index.html

$ touch server.js index.html

Now, in our directory, we will have two files. Open server.js with some text editor, with the following content:

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

// viewed at http://localhost:8080
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'))
})

app.listen(8080)

Next is the index.html file, this is the content we need to display in the browser:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sample Site</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>res.sendFile() Works!</h1>
      </div>
    </div>
  </body>
</html>

Ok, now let's check it out by running the command:

$ node server.js

Open the browser and go to: http://localhost:8080

Using ExpressJS to Display Static HTML File Content

How to Use res.sendFile()

Example

Conclusion

Related Posts

Resting và Spreading JavaScript Objects

Javascript Weekly #10

Javascript Weekly #9

Yarn: A new package manager for JavaScript

Resources

me@duyet.net

Using ExpressJS to Display Static HTML File Content

How to Use res.sendFile()

Example

Conclusion

Related Posts

Resting và Spreading JavaScript Objects

Javascript Weekly #10

Javascript Weekly #9

Yarn: A new package manager for JavaScript