Dynamic HTML rendering in CrowCpp using Mustache

Using Mustache Template Support in CrowCpp

CrowCpp, a C++ micro web framework, provides robust Mustache-based templating for dynamic HTML rendering. This guide will help you get started with Mustache in CrowCpp, provide practical examples, and offer hands-on exercises to test your understanding.

What is Mustache Templating?

Mustache is a logic-less template syntax for HTML and other formats. In CrowCpp, it enables you to generate HTML pages dynamically by inserting data into template placeholders, minimizing embedded logic for maintainability and clarity .

Setting Up Mustache Templates in CrowCpp

Step 1: Directory Structure

Templates Folder: By default, CrowCpp looks for templates inside a directory named templates in your project root. You can customize this location if needed.

Step 2: Create a Mustache Template

Save this as templates/hello.html:

<!DOCTYPE html>
<html>
  <head><title>Hello</title></head>
  <body>
    <h1>Hello, {{name}}!</h1>
    <p>Today is {{day}}.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head><title>Hello</title></head>
  <body>
    <h1>Hello, {{name}}!</h1>
    <p>Today is {{day}}.</p>
  </body>
</html>

Step 3: Render the Template from CrowCpp

#include "crow.h"

int main()
{
    crow::SimpleApp app;

    CROW_ROUTE(app, "/hello")([]{
        crow::mustache::context ctx;
        ctx["name"] = "Crow User";
        ctx["day"] = "Saturday";
        auto page = crow::mustache::load("hello.html");
        return page.render(ctx);
    });

    app.port(18080).run();
}

#include "crow.h"

int main()
{
    crow::SimpleApp app;

    CROW_ROUTE(app, "/hello")([]{
        crow::mustache::context ctx;
        ctx["name"] = "Crow User";
        ctx["day"] = "Saturday";
        auto page = crow::mustache::load("hello.html");
        return page.render(ctx);
    });

    app.port(18080).run();
}

Understanding Mustache Components in CrowCpp

Template/Page: The .html (or any text) file containing Mustache tags.
Context: Data supplied to the template as key-value pairs using crow::mustache::context (actually a crow::json::wvalue).
Rendering: Bind context data, then call .render(ctx) to get the final HTML.

You can also compile templates directly from strings:

auto t = crow::mustache::compile("The answer is {{value}}.");
crow::mustache::context ctx;
ctx["value"] = 42;
auto rendered = t.render(ctx); // "The answer is 42."

auto t = crow::mustache::compile("The answer is {{value}}.");
crow::mustache::context ctx;
ctx["value"] = 42;
auto rendered = t.render(ctx); // "The answer is 42."

Hands-On Questions & Challenges

1. Basic Rendering

Task:
Create a CrowCpp route /greet/<name> that renders an HTML greeting using Mustache, where name is provided by the user in the URL.

2. List Rendering

Task:
Edit your template and code so /items returns a list of items (e.g., fruits) within an unordered HTML list. Reference Mustache section tags for looping.

3. Using Lambdas in Context

Task:
Use a lambda in the context to create a template placeholder that returns the uppercase version of a string.

4. Error Handling

Task:
Add error handling when a template file is missing. Show a custom error message in the response.

5. Dynamic Base Directory

Task:
Configure CrowCpp to use a custom templates directory, not the default one, for Mustache templates.

Mustache Limitations in CrowCpp

CrowCpp offers a solid subset of Mustache’s features but does not implement the full specification (notably, “parents,” “blocks,” and dynamic names are not supported). When building complex sites, be aware of these constraints.

References for Deeper Learning

Use the above exercises to solidify your understanding. By experimenting and extending them, you’ll gain confidence in integrating Mustache-powered dynamic pages in your C++ web apps with CrowCpp

Check CrowCpp basic tutorial here.