Skip to main content

Template Rendering

Template rendering in Alapa enables developers to dynamically generate HTML responses using pre-defined templates. These templates allow embedding logic and variables, which are replaced at runtime to produce the final HTML output.

Basic Rendering​

To render a template, use the res.render method, specifying the name of the template file. The file extension can be omitted if the default .html extension is used.

Example: Rendering a Basic Template​

views/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <h1>Welcome to Alapa!</h1>
  </body>
</html>

Route Definition:​

src/app/index.ts
import { Request, Response, Router } from "alapa";
const router = new Route();

router.get("/", function (req: Request, res: Response) {
  res.render("index.html");
});

Output:​

When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/
<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <h1>Welcome to Alapa!</h1>
  </body>
</html>

Rendering with Nested Directories​

Templates can be organized into directories, and their paths can be specified using dot notation.

Example:​

Directory Structure:​

views/
  account/
    login.html

Route Definition:​

src/app/account/login.ts
import { Request, Response, Router } from "alapa";

const loginRoute = new Router();

loginRoute.get("/login", function (req: Request, res: Response) {
  res.render("account.login"); // Same as "account/login"
});

export default loginRoute;

Passing Context to Templates​

To make templates dynamic, you can pass a context object to res.render. The keys in the context object become accessible within the template.

Example: Passing Context​

Route Definition:​

src/app/index.ts
import { Request, Response, Router } from "alapa";

const indexRoute = new Router();

indexRoute.get("/", function (req: Request, res: Response) {
  const context = {
    title: "Alapa Application",
    message: "Hello, Alapa!",
  };
  res.render("index", context);
});

export default indexRoute;

Template code

views/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ message }}</h1>
  </body>
</html>

Output:​

When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/
<!DOCTYPE html>
<html>
  <head>
    <title>Alapa Application</title>
  </head>
  <body>
    <h1>Hello, Alapa!</h1>
  </body>
</html>

Simplified Rendering with view Method​

The view method allows you to directly map routes to templates without defining a handler function.

Example:​

src/app/account/login.ts
import { Request, Response, Router } from "alapa";
const route = new Route();
route.view("/login", "account.login");

You can also pass context using this method:

src/app/account/login.ts
import { Request, Response, Router } from "alapa";
const route = new Route();

const context = {
  title: "Alapa Application",
  message: "Hello, Alapa!",
};

route.view("/login", "account.login", context);

Error Handling During Rendering​

If a template file is not found or there is an error during rendering, Alapa will throw an error. Ensure that all referenced templates exist and are free of syntax issues.

Best Practices​

  1. Organize Templates:

    • Use directories to group related templates (e.g., views/account, views/dashboard).

  2. Use Context Wisely:

    • Only pass necessary data to templates to keep them clean and efficient.

  3. Error Handling:

    • Handle rendering errors gracefully by defining an error-handling middleware.

  4. Avoid Overloading Templates:

    • Keep template logic minimal; move complex logic to your route handlers.

With Alapa's template rendering capabilities, you can create dynamic, scalable, and maintainable web pages with ease.