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
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome to Alapa!</h1>
</body>
</html>
Route Definition:
import { Request, Response, Router } from "alapa";
const router = new Route();
router.get("/", function (req: Request, res: Response) {
res.render("index.html");
});
Output:
<!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:
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:
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
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>
Output:
<!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:
import { Request, Response, Router } from "alapa";
const route = new Route();
route.view("/login", "account.login");
You can also pass context using this method:
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
-
Organize Templates:
- Use directories to group related templates (e.g.,
views/account
,views/dashboard
).
- Use directories to group related templates (e.g.,
-
Use Context Wisely:
- Only pass necessary data to templates to keep them clean and efficient.
-
Error Handling:
- Handle rendering errors gracefully by defining an error-handling middleware.
-
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.