Display a static html file with koa.js

Question

What I want to do is serve the index.html file when the index route (i.e. localhost:3000) is called.

I use koa-router for routing, so my route looks like this:

app.all("/", function * (next){
    //Send the file here
});

I tried to use koa-static like this:

var serve = require('koa-static');
 app.all("/", function * (next){
        serve("index.html");
    });

But that didn't work. Then I tried to use co-views (I put the html file in the public directory now):

var views = require("co-views");
var render = views("public");
app.all("/", function * (next){
    this.status = 200;
    this.body = yield render("index.html");
});

But that didn't work.

So can anyone tell me what I have to do?

Answer 1

Well there are a few ways to do it, here's two of them.

Templating engine

The simplest way is probably to use a templating engine like swig or jade to serve the file.

To install it do :

npm install -s swig

In order to do it with co-views, just do

var views = require("co-views");
var render = views("public", { map: { html: 'swig' });
app.all("/", function * (next){
  this.body = yield render("index");
}); 

Plain file system

Or if you don't want to use a templating engine you can use the plain Node File System library.

In order to be able to use it with yield, you have to wrap the function in a promise.

var fs = require('fs');

var readFileThunk = function(src) {
  return new Promise(function (resolve, reject) {
    fs.readFile(src, {'encoding': 'utf8'}, function (err, data) {
      if(err) return reject(err);
      resolve(data);
    });
  });
}

app.use(router.get('/', function *(){
  this.body = yield readFileThunk(__dirname + '/public/htmlfilename.html');
}));

---

Also, note that if you use koa-static, and you put index.html in your public folder (the folder you link to koa-static), it's going to serve index.html by default on the root url without any code. This is a convention.

Answer 2

Passing file stream to koa body

This is very similar to the solution above with plain file system, but it makes use of the koa ability to pass readable streams as the response body. So the only thing we need to do is to open a readable stream to a file and pass it to koa context body. Before that give a hint to koa that this is html type response.

import { createReadStream } from 'fs';

public async handle(ctx, next) {
    ctx.type = 'html';
    ctx.body = createReadStream('index.html');
}