Share Jinja2 Templates with the Browser using Nunjucks

February 9, 2014

Share

Tags

python flask javascript nunjucks jinja2

Example Project on Github

Introduction

After writing a small little web application with python and flask, I realized I needed templates. Flask comes with jinja2 support built-in so I opted to take that route and started adding simple templates. It wasn’t long that I realized that in any AJAX heavy application I would need to use the templates both on the front-end (client-side) as well as the back-end (server-side). After some research I found a great library called nunjucks. It’s a port of jinja2 to javascript that can be used in the browser and in node.js,

Setup

The setup for sharing jinja2 templates in the browser is fairly simple. It should take less than 10 minutes in a brand new project. Just follow the steps below and you should be up and running in no time.

Serve Templates to the Client

Flask by default serves things in the static folder. Add a folder templates so that nunjucks can load them over HTTP/HTTPS.

Configure Jinja2

Flask and jinja2 are paired nicely and the configuration is simple. Below is two different approaches to setting up jinja2. Flask app’s have a jinja_loader property that can be used to setup the way jinja loads its templates. Either of the two approaches below will allow you to use the regular flask rendering methods. render_template will function just as expected.

All Templates Served to the Client

from flask import Flask
from jinja2 import FileSystemLoader
import os

app = Flask(__name__)

base_dir = os.path.dirname(os.path.realpath(__file__))

app.jinja_loader = FileSystemLoader(os.path.join(base_dir, 'static', 'templates'));


Use Shared Templates and Server-Side Templates

from flask import Flask
from jinja2 import ChoiceLoader, FileSystemLoader
import os

app = Flask(__name__)

base_dir = os.path.dirname(os.path.realpath(__file__))

app.jinja_loader = ChoiceLoader([FileSystemLoader(os.path.join(base_dir, 'templates')),
                                 FileSystemLoader(os.path.join(base_dir, 'static', 'templates'))]);


Configure Nunjucks

Download nunjucks from the homepage. There are a few different variants, for starting out I recommend the full version. In the future you should read about precompiled templates, and the recommended setups for production.

Nunjucks is simple and will run as long as you tell it where to load the templates. Simply make a call to nunjucks.compile. In your js file add the following line.

nunjucks.configure('/static/templates');

After the simple configuration you can make a call to nunjucks.render to render a template in the browser.

nunjucks.render('hello.html');