LiteNode's logo

LiteNode

Docs GitHub logo
▶ Usage

Documentation

Templating

LiteNode includes an integrated template engine called STE (Simple Template Engine) for rendering HTML files.
This engine allows you to render .html files located in the views folder or in any sub-folders within the views folder.
This setup provides a straightforward way to organize and manage your HTML templates, making it easy to maintain and structure your application's views.

render

Signature:

render(template: string, data: object): Promise<void>

Renders an HTML template with the provided data and sends it as the response.
This method sets the Content-Type header to text/html and sends the rendered HTML content as the response body.

Usage Examples

Basic

// Route to handle rendering a template with a simple message
app.get("/welcome", (req, res) => {
    // Assuming 'welcome.html' is in 'views' directory
    res.render("welcome.html", { title: "Welcome", message: "Hello, LiteNode!" })
})

// Route to handle rendering a template with a simple message
app.get("/welcome", (req, res) => {
    // Assuming 'welcome.html' is in a 'templates' directory which is in 'views'
    res.render("templates/welcome.html", { title: "Welcome", message: "Hello, LiteNode!" })
})

In this example, the welcome.html template will be rendered with the provided title and message data, and the rendered HTML will be sent as the response.

Dynamic Data

// Route to handle rendering a template with user data
app.get("/profile", (req, res) => {
    const user = {
        name: "John Doe",
        age: 30,
        hobbies: ["Reading", "Traveling", "Cooking"],
    }
    res.render("profile.html", { user })
})

In this example, the profile.html template will be rendered with the user object data, allowing dynamic content to be displayed based on the user’s profile information.

Included Templates

// Route to handle rendering a template that includes other templates
app.get("/dashboard", (req, res) => {
    const dashboardData = {
        username: "John Doe",
        notifications: ["Notification 1", "Notification 2"],
    }
    res.render("dashboard.html", dashboardData)
})

In this example, the dashboard.html template may include other templates, such as a header or footer, and those included templates will also be rendered with the provided dashboardData.

Injecting Raw HTML

// Route to handle rendering a template with raw HTML injection
app.get("/custom-html", (req, res) => {
    const customHtml = "<p>This is a <strong>custom</strong> HTML paragraph.</p>"
    res.render("custom.html", { html_content: customHtml })
})

In this example, the custom.html template will be rendered with the html_content directly injected into the template, allowing for raw HTML content to be included.

Render Explanation

The render method leverages the STE template engine to read the specified HTML template file, replace placeholders with the corresponding values from the data object, and send the rendered HTML content as the response. If the specified template file or any included file cannot be found or there is an error during rendering, the method will respond with a 500 status code and an appropriate error message.

Rendering Example

Template File (welcome.html)

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

Given the route handler:

app.get("/welcome", (req, res) => {
    res.render("welcome.html", { title: "Welcome", message: "Hello, LiteNode!" })
})

The rendered response sent to the client would be:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <h1>Hello, LiteNode!</h1>
    </body>
</html>

Injecting Raw HTML Content

You can use the html_ property to directly inject HTML content into the template. For example:

Injecting Example

Template File (custom.html)

<!DOCTYPE html>
<html>
    <head>
        <title>Custom HTML</title>
    </head>
    <body>
        <div>{{html_content}}</div>
    </body>
</html>

Given the route handler:

app.get("/custom-html", (req, res) => {
    const customHtml = "<p>This is a <strong>custom</strong> HTML paragraph.</p>"
    res.render("custom.html", { html_content: customHtml })
})

The rendered response sent to the client would be:

<!DOCTYPE html>
<html>
    <head>
        <title>Custom HTML</title>
    </head>
    <body>
        <div>
            <p>
                This is a
                <strong>custom</strong>
                HTML paragraph.
            </p>
        </div>
    </body>
</html>

In this example, the html_content placeholder in the template is replaced with the raw HTML content provided, allowing for dynamic and flexible HTML rendering. This is useful for cases where you need to inject HTML directly into your templates without escaping special characters.

Information SVG To inject raw HTML content, the key must start with html_

include

Signature:

{{include(filePath: string)}}

Renders an included HTML template within another template.
This directive reads the specified included file, replaces its placeholders with the provided data, and returns the rendered HTML content to be included in the main template. It is particularly useful for including common sections like headers, footers, or navigation menus.

Usage Examples

Including a Header Template

<!-- views/main.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Main Page</title>
    </head>
    <body>
        {{include("header.html")}}
        <h2>Main Content</h2>
        <p>This is the main page content.</p>
    </body>
</html>

<!-- views/header.html -->
<header>
    <h1>{{title}}</h1>
</header>

Given the route handler:

app.get("/main", (req, res) => {
    res.render("main.html", { title: "Header Title" })
})

In this example, the main.html template includes the header.html template, which is rendered with the provided title data.
Both files must be at the root of the views directory!

<!-- views/footer.html -->
<footer>
    <p>{{footerText}}</p>
</footer>

<!-- views/about.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>About Page</title>
    </head>
    <body>
        <h1>About Us</h1>
        <p>This is the about page content.</p>
        {{include("footer.html")}}
    </body>
</html>

Given the route handler:

app.get("/about", (req, res) => {
    res.render("about.html", { footerText: `Copyright ${new Date().getFullYear()} Company Name` })
})

In this example, the about.html template includes the footer.html template. The footer.html template will be rendered with the footerText data from the parent template's data object.
Both files must be at the root of the views directory!

Nested Includes with Shared Data

<!-- views/layouts/layout.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
    </head>
    <body>
        {{include("components/header.html")}}
        <div class="content">{{content}}</div>
        {{include("components/footer.html")}}
    </body>
</html>

<!-- views/components/header.html -->
<header>
    <h1>{{title}}</h1>
</header>

<!-- views/components/footer.html -->
<footer>
    <p>{{footerText}}</p>
</footer>

Given the route handler:

app.get("/layout", (req, res) => {
    const content = "Some content"
    res.render("layouts/layout.html", {
        title: "Header Title",
        content,
        footerText: `Copyright ${new Date().getFullYear()} Company Name`,
    })
})

In this example, the layout.html template includes both header.html and footer.html, and dynamically injects the data from the parent template's data object into its children.
In this example :

  1. layout.html must be in a layouts folder directly under the views directory.
  2. header.html and footer.html must be in a components folder directly under the views directory.

Include Explanation

The include feature of the STE template engine allows for modular and reusable HTML templates.
By separating common sections into their own files, you can include them in multiple templates, promoting DRY (Don't Repeat Yourself) principles.
The include directive within STE templates reads the specified file, replaces placeholders with the provided data, and returns the rendered HTML content to be included in the main template.

renderToFile

Signature:

async renderToFile(template: string, data: object, outputPath: string): Promise<void>

Renders an HTML template with the provided data and saves the resulting HTML to a specified file. This method utilizes the integrated STE template engine to render the template and then writes the rendered HTML content to the given output path. It provides a convenient way to generate static HTML files from templates within the LiteNode framework, abstracting away the details of rendering a template and writing to a file.

Example:

app.get("/", async (req, res) => {
    res.render("index.html", { transferredObject })
})

async function indexStaticOutput() {
    await app.renderToFile("index.html", { transferredObject }, "_site/index.html")
}

indexStaticOutput()

In this example, the renderToFile method renders the index.html template with the provided transferredObject data and saves the resulting HTML to _site/index.html.

Content