This blog introduces a step by step tutorial on how to serve dynamic Stencil templates, demonstrating how easy it is to connect a templating engine to a server-side Kitura application using Kitura Template Engine.

The Problem

When using a Kitura server you are constantly sending and receiving data. For dynamic content, this is sent as JSON, however this is not very human readable for a front end web page. To solve this, we would like to render dynamic HTML templates by substituting template variables with actual values at runtime. We will use Kitura Template Engine to make this templating process simple.

Introduction to Kitura Template Engine

Kitura-TemplateEngine provides a TemplateEngine protocol to unify the APIs of multiple template engines and integrate them with Kitura’s content generation APIs. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. Currently, there are three specific template engine plugins:

Introduction to Stencil

Stencil is a simple and powerful template language for Swift. It uses double curly braces {{ like this }} to add variables into your HTML. Furthermore, you can use filters to transform variables and tags to execute control flows within your template. Combined, these features allow you create dynamic front end webpages.

The Stencil user guide provides documentation and examples for the Stencil template language.

Tutorial: Adding a Website Front End

How to add a Website Front End to a Kitura Server using Stencil template engine

This tutorial provides a step by step guide on how to write and serve a Stencil template from a Kitura server. Afterwards, it takes you through receiving a HTML form from the webpage and using the data to add new content to the page. Finally, css is added to make the web page visually appealing. The starting point is a completed food tracker application, but don’t worry, if you haven’t previously completed the FoodTrackerBackend tutorial you can simply clone the CompletedFoodTracker branch to get started straight away!

On completion of this tutorial, you will have created your very own dynamic web page. A screenshot of which can be seen below:

Example Kitura Template Engine Web Page

Any questions or comments? Please join the vibrant Kitura community on Slack!

Slack Icon

Github Icon

Join the discussion on Slack Learn more at Star Kitura on GitHub

Join The Discussion

Your email address will not be published. Required fields are marked *