web-dev-qa-db-fra.com

Afficher un fichier html statique avec koa.js

Ce que je veux faire, c'est servir le fichier index.html lorsque la route d'index (c'est-à-dire localhost: 3000) est appelée.

J'utilise koa-router pour le routage, donc mon itinéraire ressemble à ceci:

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

J'ai essayé d'utiliser koa-static comme ceci:

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

Mais cela n'a pas fonctionné. Ensuite, j'ai essayé d'utiliser des co-vues (j'ai mis le fichier html dans le répertoire public maintenant):

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

Mais cela n'a pas fonctionné.

Alors, quelqu'un peut-il me dire ce que je dois faire?

javascriptnode.jskoa
18
tomet

Eh bien, il y a plusieurs façons de le faire, en voici deux.

Moteur de modèles

Le moyen le plus simple est probablement d'utiliser un moteur de template comme swig ou jade pour servir le fichier.

Pour l'installer, faites:

npm install -s swig

Pour le faire avec des co-vues, faites simplement

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

Système de fichiers ordinaire

Ou si vous ne souhaitez pas utiliser un moteur de modèles, vous pouvez utiliser la bibliothèque plain Node File System .

Pour pouvoir l'utiliser avec du rendement, vous devez envelopper la fonction dans une promesse.

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

Notez également que si vous utilisez koa-static et que vous placez index.html dans votre dossier public (le dossier que vous liez à koa-static), il va servir index.html par défaut sur l'url racine sans aucun code. Ceci est une convention.

19
Hugo Dozois

Passer le flux de fichiers au corps koa

Ceci est très similaire à la solution ci-dessus avec un système de fichiers simple, mais il utilise la capacité koa pour passer des flux lisibles comme corps de réponse. Donc, la seule chose que nous devons faire est d'ouvrir un flux lisible dans un fichier et de le passer au corps de contexte koa. Avant cela, donnez un indice à koa qu'il s'agit d'une réponse de type html .

import { createReadStream } from 'fs';

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

Qu'en est-il de cela, en utilisant koa-static

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