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
Click any hyperlink on the example case,
and you will get the response in console.log
immediately.
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
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 ].