CODEWITHSUNDEEP
node.jsfrontendkoa
anon
anon

Reputation: 2343

How to serve front end with koa?

I'm trying to serve a front end with Koa (v2). Eventually, I want to use React. But for now, I'm simply trying to serve a simple html file.

app/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

server.js

import 'babel-polyfill';

import koa from 'koa';
import koaRouter from 'koa-router';

import serve from 'koa-static';
import mount from 'koa-mount';

const app = new koa();

const router = new router({ prefix: '/koa' });

// This route works
router.get('/', async (ctx) => {
  ctx.body = 'Hello from Koa!';
});

app.use(router.routes());

const front = new koa();

// This route doesn't work.
front.use(serve(__dirname + '/app'));

// However, this will work, so then, I'm not using koa-serve correctly?
// front.use(async (ctx) => {
//   ctx.body = "Mount this.";
// });

app.use(mount('/', front));
app.listen(3000);

So how do I serve the front-end?

Upvotes: 2

Views: 2939

Answers (1)

Relu Mesaros
Relu Mesaros

Reputation: 5038

I've used a similar code and it worked for me, strange, almost like your example, just that I'm not using async

const koa = require('koa');
const koaRouter = require('koa-router');
const mount = require('koa-mount');
const serve = require('koa-static');
const app = new koa();
const router = new koaRouter({ prefix: '/koa' });
router.get('/', function *() {
  this.body = 'Hello from Koa!';
});
app.use(router.routes());
const front = new koa();
front.use(serve(__dirname + '/app'));
app.use(mount('/', front));
app.listen(3000);

Try using koa-sendfile, just to test it out. I've got other example below

Note that I'm using koa-route, not koa-router like in your example

And also, there's a folder called "app" that contains the "index.html"

'use strict';
const koa = require('koa');
const router = require('koa-route');
const mount = require('koa-mount');
const sendfile = require('koa-sendfile');
const serve = require('koa-static');
const app = koa();
const ui = koa();
const api = koa();

// API Mount
function *apiCall() {
    this.body='response from api';
}
api.use(router.get('/', apiCall));

// UI Mount
// you have 2 ways:

// // 1. Using koa-sendfile
// function *serveIndex() {
//     this.body='response from ui';
//     yield sendfile(this, __dirname + '/app/index.html');
//     if (!this.status) this.throw(404);
// }
// ui.use(serveIndex);

// 2. Using koa-static
ui.use(serve('app'));

app.use(mount('/api', api));
app.use(mount('/', ui));

app.listen(3000);

Upvotes: 1

Related Questions