Create a new page

Creating a new page is very simple. Just declare a new handler for the Express server and render some JSX content using LeanJSX's engine:

app.get("/about", async (req, res) => {
    await LeanApp.render(
        res,
        <main>
            <h1>About</h1>
            <p>This is a simple page</p>
        </main>,
    );
});

The LeanApp.render function will use by default the template registered as index in LeanJSX's buildApp:

import { buildApp } from "lean-jsx/lib/server";
import path from "path";

const INDEX_HTML_PATH = path.resolve(__dirname, "index.html");

const app = buildApp({
    templates: {
        index: {
            path: INDEX_HTML_PATH,
            contentPlaceholder: "<!--EAGER_CONTENT-->",
        },
    },
    logging: {
        defaultLogLevel: "info",
    },
});

To override the template used for rendering this page, we can pass the templateName to render:

app.get("/about", async (req, res) => {
    await LeanApp.render(
        res.set("Content-Security-Policy", CSP),
        <main>
            <h1>About</h1>
            <p>This is a simple page</p>
        </main>,
        {templateName: 'mytemplate'}
    );
});

Passing global context

All LeanJSX receive by default a reference to the global context SXLGlobalContext, but it needs to be retrieved from the server's request first:

app.get("/about", async (req, res) => {
    const globalContext = parseQueryParams(req);
    await LeanApp.render(
        res.set("Content-Security-Policy", CSP),
        <App />,
        {
            globalContext
        }
    );
});

The parseQueryParams function is defined in a new LeanJSX project inside context.ts, (were the type definition for SXLGlobalContext can be extended):

export interface RequestQueryParams {
    someQueryParam?: boolean;
}

declare module "lean-jsx/src/types/context" {
    interface SXLGlobalContext extends RequestQueryParams {}
}

export function parseQueryParams(req: Request): RequestQueryParams {
    return {
        someQueryParam: Boolean(req.query?.someQueryParam)
    };
}

Now any LeanJSX component can retrieve the global context without passing it as a prop:

function MyComponent(props: SXL.Props) {
    const { globalContext } = props;
    return <>...</>
}

// ...
// No props:
<MyComponent/>

For more information on global and local states, check our architecture section.