Configuration

The startApp function from Open Cells core is essential for initializing your application. This function requires a configuration object that must include at least the following two critical pieces of information:

• routes: The routing definitions for your application.
• mainNode: The ID of the HTML element in the main document where the pages will be rendered.

These mandatory properties ensure the basic operational setup of your application.

In addition to the required settings, Open Cells offers other optional properties that can be included in the configuration object to enhance functionality:

• viewLimit: Specifies the maximum number of pages that can be present in the DOM at the same time.
• persistentPages: An array with the page names that should not be removed from the DOM.
• interceptor: A function used to intercept and possibly modify routing behavior.
• appConfig: An object where specific application configurations can be stored according to individual needs.
• commonPages: An array containing the names of pages that should be pre-registered.

Applications can use the appConfig property within the configuration object to tailor settings specific to their operational requirements. Open Cells core provides the getConfig function to retrieve the current configuration object at any time, facilitating easy access to custom configurations throughout the application lifecycle.

To demonstrate accessing custom settings within your application, use the following example. The first snippet defines application's configuration properties. The second snippet retrieves the language setting based on the country specified in the application's configuration.

Defining application´s configuration:

startApp({
  routes,
  mainNode: 'app-content',

  // application´s config properties
  appConfig: {
    allowGuestMode: true,
    country: {
      lang: 'es-ES',
      timeZone: 'GMT+2',
    },
  },
});

Retrieving application´s configuration.

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

const {appConfig} = getConfig(); // Retrieve the current configuration object
const lang = appConfig.country.lang; // Access language setting from the application configuration

For applications with extensive configuration needs, it is advisable to organize configurations into separate JavaScript modules. This approach keeps the setup clean and maintainable. Import these configurations into your main application file where you call startApp.

For example, suppose you have defined your routes and custom configurations in separate files (router/routes.js and config/app-config.js). Here's how you can import and use them:

import {startApp} from '@open-cells/core';
import {routes} from '../router/routes.js'; // Adjust the path as necessary
import {appConfig} from '../config/app-config.js'; // Adjust the path as necessary

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

By following these guidelines, you can effectively configure and manage your application's setup using Open Cells, ensuring a robust and flexible application architecture.