@lwr-js/bootstrap

Lightning Web Runtime :: Bootstrap

The lwr/bootstrap module provides APIs which are responsible for:

• importing static application dependencies
• defining the root application component into the CustomElementRegistry

This results in the root application component being renderable by the DOM on first page load.

Definition

interface BootstrapAPI {
    bootstrap(rootAppSpecifier: string, rootApp: LightningElement): void;
}

Usage

import { bootstrap } from 'lwr/bootstrap';
import xAppRoot from 'x/appRoot';

bootstrap('x/appRoot', xAppRoot);

Configuration

The default lwr/bootstrap module used by an LWR application can be overridden with these steps:

1. Create a module exporting a bootstrap function which implements the BootstrapAPI interface:

// src/modules/example/bootstrap/bootstrap.js
export function bootstrap(rootAppSpecifier, rootApp) {
    const elementName = rootAppSpecifier.replace(/\//, '-');
    customElements.define(elementName, rootApp.CustomElementConstructor);
}

1. Configure the module specifier in lwr.config.json:

{
    "modules": [],
    "application": {
        "root": "example/app",
        "bootstrap": "example/bootstrap"
    }
}