Template Rendering

StratusTS uses EJS (Embedded JavaScript) for rendering dynamic HTML pages. This guide covers everything you need to build server-side rendered applications.

What is Template Rendering?

Template rendering generates HTML dynamically on the server:

Mix HTML with JavaScript
Pass data from controllers to templates
Create reusable layouts and components
Build traditional web applications

Setting Up Templates

Configure Template Directory

In src/settings.ts:

const TEMPLATE_DIR = 'templates';

This tells StratusTS where to find your templates.

Create Template Directory

mkdir templates
mkdir templates/layouts
mkdir templates/partials
mkdir templates/pages

Structure:

Directorytemplates/
- Directorylayouts/
  - base.ejs # Main layout
- Directorypartials/
  - header.ejs # Reusable header
  - footer.ejs # Reusable footer
- Directorypages/
  - home.ejs # Home page
  - about.ejs # About page

Your First Template

Step 1: Create a Template

Create templates/pages/home.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to StratusTS!</p>
  </body>
</html>

Step 2: Render from Controller

import { type ControllerType } from 'stratus-ts';

const homeController: ControllerType = (question, reply) => {
  reply.render('pages/home.ejs');
};

export { homeController };

Layouts

Layouts provide consistent structure across pages.

Base Layout

Create templates/layouts/base.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title || 'My App' %></title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <%- include('../partials/header') %>

    <main>
      <%- block main %>
    </main>

    <%- include('../partials/footer') %>

    <script src="/js/main.js"></script>
  </body>
</html>

Using Layout

<%- layout("layouts/base",{
  title: 'home page'
}) %>

<% block main %>
  <h2>this is home page content</h2>
<% block main end %>

Partials

Reusable template fragments.

Create templates/partials/header.ejs:

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>

    <% if (user) { %>
      <a href="/profile">Profile</a>
      <a href="/logout">Logout</a>
    <% } else { %>
      <a href="/login">Login</a>
    <% } %>
  </nav>
</header>

Including Partials

<!-- Include without data -->
<%- include('partials/header') %>

<!-- Include with data -->
<%- include('partials/card', { title: 'Card Title', content: 'Card content' }) %>

Next Steps

Now that you understand template rendering:

Plan - Check the status of the project

Documentation Notice: The majority of this documentation was created with assistance from Claude (Anthropic AI) and refined with modifications by Rahul Roy, the project owner. We believe in transparency about our development process.