Is the glue for express and nunjucks.
Supports ESM modules đź‘Ť
- Easy connection.
- Uses of common templates, filters and extensions.
- Uses an asynchronous loader templates nunjucks-async-loader.
- Support context processors.
$ npm i nunjucks express-nunjucks
import express from 'express';
import expressNunjucks from 'express-nunjucks';
// For CommonJS
// const expressNunjucks = require('express-nunjucks').default;
const app = express();
const isDev = app.get('env') === 'development';
app.set('views', __dirname '/templates');
const njk = expressNunjucks(app, {
watch: isDev,
noCache: isDev,
});
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);
Express application or an array of applications.
watch=false {Boolean}
- if true, the system will automatically update templates when they are changed on the filesystem.noCache=false {Boolean}
- if true, the system will avoid using a cache and templates will be recompiled every single time.autoescape=true {Boolean}
- controls if output with dangerous characters are escaped automatically.throwOnUndefined=false {Boolean}
- throw errors when outputting a null/undefined value.trimBlocks=false {Boolean}
- automatically remove trailing newlines from a block/tag.lstripBlocks=false {Boolean}
- automatically remove leading whitespace from a block/tag.tags
- defines the syntax for nunjucks tags.filters
- defines the syntax for nunjucks filters.loader
- defines loader templates. The default is the asynchronous loader templates.globals
- defines global variables.
Creates Express middleware to work context processors.
Returns Nunjucks Environment.
Create custom filters in nunjucks.
import express from 'express';
import expressNunjucks from 'express-nunjucks';
import filters from './filters';
const app = express();
app.set('views', __dirname '/templates');
const njk = expressNunjucks(app, {
// Add custom filter.
filters: filters,
});
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);
Defines globals to use this in templates.
import express from 'express';
import expressNunjucks from 'express-nunjucks';
import { asset } from './utils';
const app = express();
app.set('views', __dirname '/templates');
const njk = expressNunjucks(app, {
// Defines globals.
globals: { asset: asset },
});
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);
...
<link rel="stylesheet" href="{{ asset('styles.css') }}" />
...
Context processors is one great idea from the django framework.
import express from 'express';
import expressNunjucks from 'express-nunjucks';
import { webpackAssets } from './build/assets';
const app = express();
app.set('views', __dirname '/templates');
// Adds information about the request in the context of the template.
const reqCtxProcessor = (req, ctx) => {
ctx.req = req;
};
// Adds links to statics in the context of the template.
const assetsCtxProcessor = (req, ctx) => {
ctx.scripts = webpackAssets.scripts;
ctx.styles = webpackAssets.styles;
};
const njk = expressNunjucks(app);
app.use(njk.ctxProc([reqCtxProcessor, assetsCtxProcessor]));
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);
Warning! Context processors not supported to app.render()
.
import express from 'express';
import expressNunjucks from 'express-nunjucks';
const app = express();
app.set('views', __dirname '/templates');
const njk = expressNunjucks(app, {
loader: nunjucks.FileSystemLoader,
});
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);
// proj/app.js
import express from 'express';
import expressNunjucks from 'express-nunjucks';
import subApp from './subapp';
const app = express();
app.set('views', __dirname '/templates');
const njk = expressNunjucks([app, subApp]);
app.get('/', (req, res) => {
res.render('index');
});
app.use('/subApp', subApp);
// and more...
app.listen(3000);
// proj/subapp/index.js
import express from 'express';
const app = express();
app.set('views', __dirname '/templates');
app.get('/', (req, res) => {
res.render('index');
});
module.exports = app;
proj
|
|- templates
| |
| |- base.html
| |- index.html
| |-subapp
| |
| |-page.html
|
|- subapp
|
|-templates
|
|-subapp
|
|-index.html
|-page.html
The templates in the directory proj/templates/subapp
override templates proj/subapp/templates/subapp
.
If you're having trouble importing a module into TypeScript, try adding settings to tsconfig.json
:
{
"compilerOptions": {
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
To run the test suite, first install the dependencies, then run npm test
:
$ npm ci
$ npm test