Simplest possible node.js + nunjucks example

Question

Simplest possible node.js + nunjucks example

11.6k views Asked by kobame At 22 June 2015 at 11:22

Probably will never use node.js nor Nunjucks for any real development, but now for some reason need:

precompile the some simple templates to javascript with Nunjucks
run the precompiled templates under the node.js

I have done:

installed node.js and the npm (e.g. have node and the npm command)
mkdir njtest && cd njtest
installed the nunjucks with the npm install nunjucks (got a node_modules/nunjucks directory)
mkdir templates
in the templates i have created two files index.html and layout.html with the following jinja2/nunjucks content
layout.html

<!doctype html>
<head>
        <title>simple example</title>
</head>
<body>
        <h1>Simple example</h1>
        {% block body %}{% endblock %}
</body>

index.html

{% extends "layout.html" %}

{% block body %}
hello world
{% endblock %}

I precomplied the templates with the

./node_modules/nunjucks/bin/precompile templates >templates.js

and in the templates.js I have the precompiled code.

What I should to do next to get an running web-server what will use the precompiled template.js?

Please, don't search anything advanced behing this question. This is probably an stupid-simple question for someone who know node and javascript.

What i know, will need, create a file let says app.js and need run it with the node - but what should contain?

require 'nunjucks';

and probably something like: var res = nunjucks.render('templates.js'); and what else? (the simplest possible (one time) solution). Note: want use Nunjucks server-side and not in the browser.

Original Q&A

There are 2 answers

Artik Man On 03 October 2021 at 16:12

I created simple builder for Nunjucks + SCSS + TypeScript

DOCS: https://github.com/Artik-Man/SamuraiJS

NPM: https://www.npmjs.com/package/samuraijs

npm i samuraijs

Create samurai.js file:

import {Samurai} from "samuraijs";

new Samurai({
    paths: {
        source: 'src',
        destination: 'dist'
    }
});

Add the following lines to your package.json:

{
  "scripts": {
    "serve": "node samurai.js --serve",
    "build": "node samurai.js --build"
  },
  "type": "module"
}

Place your *.njk files at the src/ directory, run

npm run serve

And open localhost:3000

Or npm run build to build the project.

Dont think about build configuration. Just code your project!

I hope my builder solves your problem :)

**Andy Neale** · Accepted Answer · 2015-10-22T08:40:30+00:00

Start by initialising your Node application as follows:

cd njtest
npm init

You can hit "Enter" to accept the defaults for most of the questions, if you're doing this after creating app.js then it'll automatically detect this and use it as the entry point for your simple server.

Install Express:

npm install express --save

Then create app.js as follows:

var express     = require( 'express' ),
    app         = express(),
    nunjucks    = require( 'nunjucks' ) ;

// Define port to run server on
var port = process.env.PORT || 9000 ;

// Configure Nunjucks
var _templates = process.env.NODE_PATH ? process.env.NODE_PATH + '/templates' : 'templates' ;
nunjucks.configure( _templates, {
    autoescape: true,
    cache: false,
    express: app
} ) ;
// Set Nunjucks as rendering engine for pages with .html suffix
app.engine( 'html', nunjucks.render ) ;
app.set( 'view engine', 'html' ) ;

// Respond to all GET requests by rendering relevant page using Nunjucks
app.get( '/:page', function( req, res ) {
    res.render( req.params.page ) ;
} ) ;

// Start server
app.listen( port ) ;
console.log( 'Listening on port %s...', port ) ;

Now fire up a browser, go to http://localhost:9000 and up pops your page!

Hope that helps...

TechQA.

Simplest possible node.js + nunjucks example

There are 2 answers

Related Questions in NODE.JS

Related Questions in NUNJUCKS

Popular Questions

Popular Tags

Trending Questions