Where to Discuss?

Local Group

Preface

Goal: Templating Engine Configuration in KoaJS

Beside ExpressJS, there is also KoaJS. Both are pretty popular old Web Framework in NodeJS. And later, there is also OakJS, written for DenoJS.

We can rewrite our express configuration to koa. All with the same logic and structure, with our previous express example.

Official Documentation


1: EJS Case

Rewrite Express to Koa, using EJS.

Source Examples

You can obtain source examples here:

Directory Structure

The views structure is similar to previous case with express. I suggest that you have fast reading for this article first.

app.js

The app.js for koajs would be similar as this code below:

const Koa    = require('koa');
const Router = require('koa-router');
const ejs    = require('koa-ejs');
const path   = require('path');
const serve  = require('koa-static');

const app = new Koa();
const router = new Router();

// Example Pages
const pages = [
  { link: '/',     short: 'Home', long: 'Home'  },
  { link: '/html', short: 'HTML', long: 'HTML Link' },
  { link: '/css',  short: 'CSS',  long: 'CSS Link' },
  { link: '/php',  short: 'PHP',  long: 'PHP Link' },
  { link: '/javascript', short: 'Javascript', long: 'Javascript Link' }
];

// Static Assets
app.use(serve('public'));

// Render EJS
ejs(app, {
  root: path.join(__dirname, 'views'),
  layout: false,
  viewExt: 'ejs',
  cache: false,
  debug: false
});

// Router
router.get('/', async ctx => {
  console.log('Showing index');
  await ctx.render('index', { pages: pages });
});

router.get('/:page', async ctx => {
  const choices = ['index', 'html', 'css', 'php', 'javascript'];
  const page = ctx.params.page;
  
  if (choices.includes(page)) {
    console.log('Showing ' + page);
    await ctx.render(page, { pages: pages });
  } else {
    console.log('404: Page not Found: '+ page);
    ctx.throw(404, '404: Page not Found');
  }
});

app.use(router.routes());

// Run, Baby Run
app.listen(3000);
console.log('Koa started on port 3000');

The application is short enough to be self explanatory.

EJS Template Specific Code

Most configuration for all template, in this article is the same except below code:

  • The Header
const Koa    = require('koa');
const Router = require('koa-router');
const ejs    = require('koa-ejs');
const path   = require('path');
const serve  = require('koa-static');
  • EJS Render
ejs(app, {
  root: path.join(__dirname, 'views'),
  layout: false,
  viewExt: 'ejs',
  cache: false,
  debug: false
});

Running Koa

Running express is as easy as this command below.

$ node app.js

HTML: Hyperlink Example

Click any hyperlink on the example case, and you will get the response in console.log immediately.

Koa: node app.js

You are ready to run a website, with koa backend, using EJS.


2: Pug Case

Rewrite Express to Koa, using Pug.

Source Examples

You can obtain source examples here:

Directory Structure

The views structure is similar to previous case with express. I suggest that you have fast reading for this article first.

app.js

You can obtain the complete app.js for koajs here

Koa: Configuration

Pug Template Specific Code

Most configuration for all template, in this article is the same except below code:

  • The Header
const Koa    = require('koa');
const Router = require('koa-router');
const Pug    = require('koa-pug')
const path   = require('path');
const serve  = require('koa-static');
  • Pug Render
const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  app: app // Binding
})

3: Nunjucks Case

Rewrite Express to Koa, using Nunjucks.

Source Examples

You can obtain source examples here:

Directory Structure

The views structure is similar to previous case with express. I suggest that you have fast reading for this article first.

app.js

You can obtain the complete app.js for koajs here

Nunjucks Template Specific Code

Most configuration for all template, in this article is the same except below code:

  • The Header
const Koa      = require('koa');
const Router   = require('koa-router');
const nunjucks = require('koa-nunjucks-2');
const path     = require('path');
const serve    = require('koa-static');
  • Nunjucks Render
app.use(nunjucks({
  ext: 'njk',
  path: path.join(__dirname, 'views'),
  nunjucksConfig: {
    trimBlocks: true
  }
}));

What’s Next?

Consider continue reading [ Template - Eleventy - Nunjucks ].