Bootstrapping

Open Cells provides the startApp function to initialize and launch your Single Page Application (SPA). This essential function sets up the routing system, initializes the communication channels and brings the entire application to an operational state.

To get started, you first need to import the startApp function from the @open-cellls/core module, then you can call this function with a configuration object which has settings for routes and the main DOM node, plus other optional configurations for Open Cells and your application.

Here’s a step-by-step example to illustrate the process:

1. In your main entry point file, for example app-index.ts, import the startApp function from the Open Cells core package.

import {startApp} from '@open-cells/core';

2. Define or import a routes configuration defining the navigation paths of the application.

Example:

const routes = [
  {
    path: '/',
    name: 'home',
    component: 'home-page',
    action: async () => {
      await import('../pages/home-page/home-page.js');
    },
  },
];

See routes for all available options on route definition.

3. Create a configuration object that specifies at least:

{
  routes,
  mainNode: 'app-content' // Identifier for the main DOM node where the application content will be rendered
}

Further details can be found in the configuration section.

4. Pass the configuration object to startApp to initialize and start your application.

startApp({
  routes,
  mainNode: 'app-content',
});

5. Include the script in the index.html file:

The main entry point file should then be linked to your index.html document via a script tag. The script tag should be marked with the type="module" attribute to ensure it is treated as a JavaScript module, allowing modern module bundlers to correctly manage the execution order based on dependencies. The module type also automatically defers the script execution after all the document have been parsed.

<script type="module" src="/src/components/app-index.ts"></script>

By following these steps, your application will be correctly configured and ready to run using the Open Cells framework. This setup ensures that the SPA will start correctly, handling routes leveraging the framework's capabilities to efficiently manage the application lifecycle.