Показать статический html файл с помощью koa.js

То, что я хочу сделать, это служить файлу index.html при вызове маршрута индекса (то есть localhost: 3000).

Я использую koa-router для маршрутизации, поэтому мой маршрут выглядит следующим образом:

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

Я попытался использовать koa-static следующим образом:

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

Но это не сработало. Затем я попытался использовать co-views (теперь я помещаю html файл в общий каталог):

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

Но это не сработало.

Так может ли кто-нибудь сказать мне, что я должен делать?

Ответы

Ответ 1

Ну, есть несколько способов сделать это, вот два из них.

Шаблонный двигатель

Самый простой способ - использовать механизм шаблонов, например swig или jade для обслуживания файла.

Чтобы установить его, выполните следующие действия:

npm install -s swig

Чтобы сделать это с помощью co-views, просто сделайте

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

Обычная файловая система

Или, если вы не хотите использовать механизм шаблонов, вы можете использовать обычную библиотеку Node File System.

Чтобы иметь возможность использовать его с выходом, вы должны обернуть функцию в обещание.

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');
}));

Также обратите внимание, что если вы используете koa-static, и вы помещаете index.html в свою общую папку (папку, на которую вы ссылаетесь на koa-static), она будет по умолчанию работать с index.html по корневому URL-адресу без каких-либо код. Это соглашение.

Ответ 2

Передача потока файлов в тело koa

Это очень похоже на решение выше с простой файловой системой, но оно использует способность koa передавать читаемые потоки в качестве тела ответа. Итак, единственное, что нам нужно сделать, это открыть читаемый поток в файл и передать его в тело контекста koa. Перед этим даем подсказку koa, что это ответ типа html.

import { createReadStream } from 'fs';

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

Ответ 3

Как насчет этого, используя koa-static

app.all("/", async(ctx, next) => 
  serve(`${__dirname}/public`)(
    Object.assign(ctx, { path: 'index.html' }), 
    next)
  );