Passer au contenu principal

Configuration de l’application

Introduction​

Il s’agit d’une référence pour l’initialisation d’une application Jutro. Vous pouvez apprendre à créer un fichier d’initialisation (conventionnellement nommé startApp.ts ou startApp.js), utiliser la fonction start() pour configurer votre application et l’étendre avec des fonctionnalités de démarrage supplémentaires.

Jutro fournit un système avancé d’initialisation d’applications qui comprend :

  • La prise en charge complète de l’internationalisation et de la localisation avec chargement des messages
  • L'intégration du système de thèmes avec des styles personnalisables
  • La gestion des erreurs via les limites d’erreur
  • Le routage côté client avec l'historique du navigateur
  • La gestion des paramètres régionaux via le magasin de globalisation
  • Les notifications toast et la gestion des modaux
  • L'intégration de l'authentification et des autorisations
  • Les fonctionnalités d’accessibilité intégrées

Pour vous aider à naviguer dans ce système, cette page comprend :

  • Une référence complète de l’API pour la fonction start() avec des exemples
  • Le modèle de fichier d’initialisation startApp et les recommandations sur la façon de le structurer
  • Des exemples pratiques d’initialisation pour les scénarios courants
  • L'extension de l’initialisation avec des services supplémentaires, la gestion de l’état et la logique de démarrage
Note: Pour charger les valeurs de configuration et y accéder tout au long de l’exécution de votre application, reportez-vous à la page Configuration globale. Cette page est consacrée à la configuration pendant la phase d’initialisation.

La fonction start()​

La fonction start() initialise et affiche votre application Jutro avec tous les fournisseurs de contexte nécessaires pour le routage, l’authentification, les limites d’erreur, l’internationalisation, etc. La fonction start() nécessite deux paramètres :

start(Main, launchProps);
  • Main : votre composant d’application qui devient le contenu principal de l’application.
  • launchProps : un objet de propriétés qui configure l’initialisation et le comportement de votre application.
start(Jutro, {
  // Launch and initialization settings
  rootId: 'root',
  config: [config],

  // Application structure and behavior
  messageLoader: loadMessages,
  appName: 'Jutro App',
  routerBasename: '/app',
});

Instruction d'importation​

import { start } from '@jutro/app';
Note: start() peut également être importé à partir d’un package @jutro/micro-frontends pour les applications micro front-end. Elle possède une propriété supplémentaire mfeData. Pour en savoir plus, reportez-vous à la documentation sur les modules micro front-end.

Configuration du lancement de l’application​

Ces propriétés contrôlent le comportement fondamental de démarrage de votre application. Elles définissent l’emplacement de montage de l’application dans le DOM, la configuration du chargement, initialisent les services et personnalisent l’expérience de chargement au démarrage. Ces paramètres sont traités directement par la fonction start() avant que votre application ne soit affichée.

appDescriptionobligatoire​

Type
Description

Description of the application. Used for metadata and display purposes, such as in browser titles, accessibility labels, and application information.

rootIdobligatoire​

Type
string
Description

The ID of the HTML element in public/index.html where the application is mounted. The React app renders within this element.

config​

Type
Array<Record<string, unknown>>
Description

Configuration array with up to 3 objects passed as arguments to loadConfiguration(config, params, baseConfig). Objects are spread as separate parameters.

disableThemeProvider​

Type
boolean
Description

Flag to disable the ThemeProvider wrapper. If true, the application renders without theme context.

identifierPrefix​

Type
string
Description

Prefix for React identifiers passed to ReactDOMClient.createRoot(). Helps avoid conflicts in multi-app setups.

onInit​

Type
() => void
Description

Callback function triggered immediately during start() initialization, before DOM rendering. Useful for any initialization logic that needs to be performed, for example loading a required service.

onRender​

Type
() => void
Description

Callback function triggered after the application component is rendered. Executed via useEffect in the render wrapper.

themeConfig​

Type
ThemeConfig
Description

Initial theme configuration passed to ThemeProvider. Defines colors, fonts, and other visual settings.

themeProviderProps​

Type
ThemeProviderProps
Description

Additional properties passed to the ThemeProvider component wrapper. Allows customization of theme behavior.

trackingConfig​

Type
TrackingConfig
Description

Tracking configuration for analytics. Used to initialize Datadog and Google Analytics with whitelist and dictionary settings.

Structure de l’application de base​

Ces propriétés configurent la structure principale et les fonctionnalités fondamentales de votre application. Elles définissent le composant à afficher en tant qu’application principale, fournissent les métadonnées essentielles, configurent la gestion des erreurs pour les exceptions non détectées et activent les fournisseurs de contexte pour la gestion de l’état et l’intégration des fonctionnalités.

appNameobligatoire​

Type
Description

The name of the application. Used for display and internationalization purposes.

errorBoundary​

Type
React.ComponentClass<ErrorBoundaryProps>
Description

Custom error boundary component for the application. Handles uncaught errors and displays fallback UI. Replaces the default ErrorBoundary from @jutro/components.

Valeur par défaut
`ErrorBoundary` from `@jutro/components`

mfeData​

Type
{ scopeName: string }
Description

Micro frontend data passed to the application. Contains scope name for micro frontend identification. Only used in micro frontend contexts. You can pass this property to start() function only if it is imported from @jutro/micro-frontends package.

onError​

Type
ErrorBoundaryProps['onError']
Description

Callback function triggered when an error occurs. Provides error details and error information.

rootHOCs​

Type
RootHOCsType
Description

Function or array of functions that wrap your application to pass context down into it. These HOCs work differently than traditional React HOCs, because they take a React.ReactNode as input rather than a component class. For additional details see this section.

Configuration du routage​

Ces propriétés gèrent le routage côté client, l’historique de navigation, la configuration du routeur et la gestion des événements modaux. Elles contrôlent la façon dont l’application gère les modifications de routage, configure des routeurs personnalisés, gère les boîtes de dialogue modales et intègre un suivi analytique pour les événements de navigation.

modalEmitter​

Type
ModalNextEmitterType
Description

Custom modal emitter instance for managing modal dialogs across the application. Use this when you need to set up event listeners or integrations before the application starts.

Valeur par défaut
`new ModalNextEmitter()`

Router​

Type
ComponentType<BrowserRouterProps> | ComponentType<MemoryRouterProps>
Description

Custom router component for handling navigation. Must accept the same props as BrowserRouter or MemoryRouter. Use this to override the default router selection, add custom routing behavior (like analytics tracking), or force a specific router type for your environment. If not passed, BrowserRouter is used in browser environments and MemoryRouter is used in test environments.

routerBasename​

Type
string
Description

Base URL for all locations in the router. Used when serving the app from a subdirectory instead of the root. A properly formatted basename should have a leading slash, but no trailing slash. It overrides the JUTRO_ROUTER_BASENAME environment variable or REACT_APP_JUTRO_ROUTER_BASENAME in the .env file if they are set.

Valeur par défaut
''

routerHistory​

Type
RouterProps['history']
Description

Custom history object for programmatic navigation and route management. Use this when you need to set up navigation tracking, implement custom navigation guards, perform programmatic navigation before app startup, or integrate with analytics. If not passed, BrowserHistory is used in browser environments and MemoryHistory is used in test environments.

trackingCallback​

Type
RouteTrackerProps['track']
Description

Callback function for tracking route changes and analytics. Use this when you need to integrate with analytics platforms, track user navigation patterns, monitor page views, or implement custom route-based logging. Called on every route change with location and action parameters.

Globalisation​

Ces propriétés configurent les aspects de globalisation (g11n), d’internationalisation (i18n) et de localisation (l10n) de votre application. Elles gèrent le chargement des messages, les préférences linguistiques, les paramètres régionaux et contrôlent le rendu du texte internationalisé dans votre application.

coreMessageLoader​

Type
LoaderType
Description

Function for loading Jutro's built-in core messages for internationalization. Takes a locale string (for example, 'en', 'es') and returns a Record<string, string> with core Jutro component messages and labels. If not provided, defaults to a function that logs warnings and returns an empty object, meaning Jutro components use their built-in English messages. Use this when you need to customize or translate Jutro's built-in component labels (buttons, form validation messages, etc.), load core messages from external sources, or provide enhanced translations for Jutro's default UI text.

g11nStore​

Type
G11nStore
Description

Store for globalization settings. Includes locale and language preferences.

intlTextComponent​

Type
IntlConfig['textComponent']
Description

HTML tag to wrap internationalized messages inside of, such as 'span', 'div', or 'p'. Affects how React Intl's <FormattedMessage> and other formatting components render their output. By default, React.Fragment is used, which renders text without any wrapper element. Use this when you need consistent HTML structure for all i18n text across your application, require specific semantic elements for accessibility, or need to integrate with CSS frameworks that expect particular HTML structures.

messageLoader​

Type
LoaderType
Description

Function for loading application-specific messages for internationalization. Takes a locale string (for example, 'en', 'es') and returns a Record<string, string> with message keys and translated values. If not provided, defaults to a function that logs warnings and returns an empty object, meaning your app won't have internationalized messages. Use this when you want to load messages from different sources (files, APIs, CDNs), implement custom fallback logic for unsupported locales, or organize messages in non-standard file structures.

Configuration de l'authentification​

Ces propriétés configurent le comportement de l’authentification et la gestion des erreurs de votre application. Elles contrôlent les fournisseurs d’authentification personnalisés, les composants d’affichage d’erreur et déterminent si l’authentification est activée au niveau de l’application.

authComponent​

Type
React.ComponentType
Description

Custom authentication provider component for handling authentication. By default, Jutro uses the built-in AuthProvider from @jutro/auth which provides standard authentication functionality. Use this when you need custom authentication flows, want to integrate with existing authentication infrastructure, or need mock authentication for development/testing.

authErrorComponent​

Type
AuthRouteProps['authErrorComponent']
Description

Custom error component to display when authentication errors occur. This component receives one prop: error (of type AuthError | undefined) containing the authentication error details. Use this to customize the authentication error display, or integrate error tracking with analytics platforms.

Valeur par défaut
`AuthErrorPage` from `@jutro/app`

disableAuthErrorsHandling​

Type
boolean
Description

Flag to disable authentication error handling.

disableAuthForApplicationRoot​

Type
boolean
Description

Flag to disable authentication for the application root. If true, application root will not be wrapped with secure route handlers.

Fonctionnalités de l’interface utilisateur et expérience utilisateur​

Ces propriétés configurent les fonctionnalités de l’interface utilisateur et les aspects de présentation de votre application. Elles gèrent les fonctionnalités essentielles de l’interface utilisateur, telles que les notifications, les fenêtres modales, les états de chargement et les fonctionnalités d’accessibilité qui améliorent l’expérience utilisateur.

disableModalProvider​

Type
boolean
Description

Flag to disable the ModalProvider wrapper around the application. By default, Jutro wraps your application with a ModalProvider to manage modal dialogs. Use this when you want to provide your own modal management system or integrate with a third-party modal library.

disableToastProvider​

Type
boolean
Description

Flag to disable the ToastProvider wrapper around the application. By default, Jutro wraps your application with a ToastProvider to enable toast notifications throughout your app. Use this when you want to provide your own toast notification system or integrate with a third-party notification library.

hideSkipNavigation​

Type
boolean
Description

Flag to hide the skip navigation link for accessibility. By default, Jutro includes a skip navigation link to help keyboard and screen reader users quickly navigate to main content. Use this when your application implements its own skip navigation mechanism.

loaderComponent​

Type
React.ElementType
Description

The component for wrapping the main component and presenting a loader UI when the app is loading. Replaces the default loader. Use this when you want to customize the loading experience, implement custom loading animations, or show different loader variants based on application state.

Valeur par défaut
`Loader` from @jutro/components

mainComponentProps​

Type
Record<string, unknown>
Description

Additional props to pass to the main application component. These props are spread and passed directly to your main component as React component props. Use this when you need to pass custom configuration, event handlers, or data to your main application component without modifying the component itself.

modalFunctions​

Type
ModalFunctions
Description

Custom modal functions for managing modal behavior. Allows you to provide custom functions for opening, closing, and managing modal dialogs. Use this when you need to customize modal lifecycle behavior, implement modal state persistence, integrate with analytics platforms for modal events, or add custom validation before opening or closing modals.

toastTrigger​

Type
ToastTrigger
Description

Custom toast trigger function for displaying notifications. By default, Jutro uses the built-in toast trigger from @jutro/components. Use this when you need custom notification behavior, want to integrate with external notification systems, implement custom toast styling or animations, or need to add custom logging or analytics to toast events.

Initialisation de votre application​

Pour initialiser une application Jutro, créez un fichier startApp.ts (ou startApp.js). Ce fichier est importé de manière conventionnelle et appelé à partir de votre point d’entrée webpack (src/index.ts).

Note: Le modèle de démarrage Jutro est fourni avec ce fichier préconfiguré. Si vous créez une nouvelle application à partir de zéro, utilisez les exemples ci-dessous comme point de départ.

Exemple d’initialisation de base​

Voici la configuration minimale requise pour initialiser une application Jutro :

src/startApp.js
import { start } from '@jutro/app';
import { loadConfiguration } from '@jutro/config';

import { Jutro } from './app/App';
import appConfig from './config/config.json';
import messages from './app/App.messages';
import { loadAppMessages, loadCoreMessages } from './messagesLoaders';

// Load configuration before starting the app
loadConfiguration(appConfig);

// Export the startApp function
export const startApp = (): void => {
  // Initialize the application
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
  });
};

Initialisation pour les applications micro front-end​

Lors de la génération d’applications micro front-end, startApp reçoit mfeData qui contient un contexte shell :

src/startApp.js
import '@jutro/theme';
import './styles/index.scss';

import { MfeData, start } from '@jutro/micro-frontends';
import { loadConfiguration } from '@jutro/config';

import { Jutro } from './app/App';
import appConfig from './config/config.json';
import messages from './app/App.messages';
import { loadAppMessages, loadCoreMessages } from './messagesLoaders';

loadConfiguration(appConfig);

export const startApp = (mfeData?: MfeData): void => {
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData, // Pass shell context to the app
  });
};

Stratégies de chargement de la configuration​

Il existe deux approches en matière de configuration de chargement dans votre application Jutro : le chargement explicite via loadConfiguration() avant d’appeler start(), ou la transmission de la propriété config à start(). Chaque approche a des cas d’utilisation différents, et il est important de comprendre quand utiliser chacune d’entre elles.

Approche 1 : chargement explicite de la configuration​

Appelez loadConfiguration() avant start(). Cette approche vous donne un contrôle total sur la configuration et est idéale lorsque vous devez effectuer une fusion personnalisée, des configurations spécifiques à l’environnement ou la substitution de paramètres de modèle. Pour en savoir plus sur la configuration de la configuration, reportez-vous à la section Extension de l’initialisation.

import appConfig from './config/config.json';
import featureFlags from './config/featureFlags.json';
import { loadConfiguration } from '@jutro/config';

// Merge multiple config files into a single configuration object
const combinedConfig = {
  ...appConfig,
  ...featureFlags,
  // Add environment-specific overrides
  API_BASE_URL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000',
  FEATURE_NEW_DASHBOARD: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true',
};

// Parameters for template substitution (optional)
const templateParams = {
  environment: process.env.NODE_ENV,
  version: process.env.REACT_APP_VERSION || '1.0.0',
};

// Load configuration with optional template parameters
loadConfiguration(combinedConfig, templateParams);

export const startApp = (): void => {
  start(Jutro, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    appName: messages.appName,
    appDescription: messages.appDescription,
    // Config prop is not passed here
  });
};

Approche 2 : configuration avec la propriété de configuration​

Transmettez la configuration directement à la fonction start() via la propriété config. La fonction start() appellera loadConfiguration() en interne. Utilisez cette approche plus simple lorsque vous avez un seul fichier de configuration sans traitement supplémentaire nécessaire :

import appConfig from './config/config.json';

export const startApp = (): void => {
  start(Jutro, {
    rootId: 'root',
    config: [appConfig], // Configuration loaded by start()
    messageLoader: loadAppMessages,
    // ... other props
  });
};

Évitez de mélanger les approches de configuration​

N’appelez pas loadConfiguration() et ne transmettez pas la propriété config dans la même fonction startApp. Dans ce cas, loadConfiguration() est appelé deux fois. Une fois à partir de votre appel explicite et une fois en interne par start(). Le deuxième appel écrasera le premier, entraînant la perte potentielle de données de configuration importantes :

Exemple illustrant comment ne pas initialiser la configuration :

loadConfiguration(appConfig); // First call
start(Jutro, {
  config: [appConfig], // Triggers second loadConfiguration() call - overwrites the first!
  // ... other props
});

Extension de l’initialisation​

Au-delà de la configuration de base, vous pouvez étendre votre fichier startApp pour inclure la configuration avancée, l’initialisation du service et une logique personnalisée. Cette section aborde les modèles d’expansion courants.

Importations de modules​

Au-delà des importations de base de thèmes et de feuilles de style, vous pouvez développer la section Importations de modules pour inclure des bibliothèques, des utilitaires et des services supplémentaires dont votre application a besoin. Les extensions courantes sont les suivantes :

  • Bibliothèques de surveillance et d’analyse : importez des services tiers tels que Datadog, Google Analytics ou des utilitaires de suivi personnalisés.
  • Prise en charge des composants hérités : ajoutez des couches de compatibilité pour les anciens composants Jutro.
  • Personnalisations de routage : importez des utilitaires d’historique comme createBrowserHistory pour les configurations de routeur personnalisées.
  • Utilitaires d’application : chargez des fonctions utilitaires personnalisées, des applications auxiliaires de transformation de données ou des outils spécifiques à l’application.
  • Métadonnées du package : importez package.json pour les informations de version utilisées dans la surveillance ou le débogage.
Exemples d’importations de modules développés​
import '@jutro/theme';
import './styles/index.scss';
import { start } from '@jutro/app';
import { datadogRum } from '@datadog/browser-rum';
import { configureLegacyComponentMap } from '@jutro/legacy/uiconfig';
import { createBrowserHistory } from 'history';
import packageJson from '../package.json';

Le principe clé est d’importer les modules dans l’ordre dans lequel ils sont nécessaires, avec les utilitaires de configuration, et l’initialisation du service se produisant avant l’appel de la fonction start().

Paramétrage de la configuration​

Au-delà du chargement d’un seul fichier config.json, vous pouvez étendre le paramétrage de la configuration pour gérer les paramètres d’application complexes, les valeurs spécifiques à l’environnement et la configuration de l’exécution. Les options d’extension de la configuration comprennent :

  • Plusieurs fichiers de configuration : chargez différents fichiers de configuration pour différents problèmes (fonctionnalités, terminaux d’API, paramètres d’interface utilisateur).
  • Configuration spécifique à l’environnement : chargez différentes configurations en fonction de l’environnement de déploiement.
  • Configuration de l’exécution : définissez les valeurs de configuration de manière dynamique en fonction des conditions ou des données externes.
  • Indicateurs de fonctionnalités : activez/désactivez les fonctionnalités via la configuration.
  • Validation de la configuration : validez les valeurs de configuration avant le démarrage de l’application.
Exemple de paramétrage étendu de la configuration​
import appConfig from './config/config.json';
import featureFlags from './config/featureFlags.json';
import { loadConfiguration } from '@jutro/config';

// Merge multiple config files into a single configuration object
const combinedConfig = {
  ...appConfig,
  ...featureFlags,
  // Add environment-specific overrides
  API_BASE_URL: process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000',
  FEATURE_NEW_DASHBOARD: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true',
};

// Parameters for template substitution (optional)
const templateParams = {
  environment: process.env.NODE_ENV,
  version: process.env.REACT_APP_VERSION || '1.0.0',
};

// Load configuration with optional template parameters
loadConfiguration(combinedConfig, templateParams);

La fonction loadConfiguration() accepte jusqu’à trois arguments : l’objet de configuration principal, des paramètres de modèle facultatifs pour la substitution de variables à l’aide de la syntaxe Mustache et une configuration de base facultative.

Note: Évitez d’utiliser le paramètre baseConfig car il est obsolète. Il est recommandé de fusionner les configurations manuellement avant d’appeler loadConfiguration() au lieu de s’appuyer sur la logique de fusion interne de la fonction.

Initialisation du service​

Après la configuration et avant d’appeler start(), vous pouvez initialiser les services externes, les outils de surveillance et les utilitaires spécifiques à l’application dont votre application a besoin. Les initialisations de service courantes incluent :

  • Surveillance et analyse : initialisez des services de suivi tels que Google Analytics, Datadog RUM ou des solutions de surveillance personnalisées.
  • Prise en charge des composants existants : configurez les couches de compatibilité pour les anciens composants Jutro à l’aide de configureLegacyComponentMap().
  • Comportement des services basé sur l’environnement : activer/désactiver les services de manière conditionnelle en fonction de l’environnement (par exemple, analyse uniquement en production, outils de débogage uniquement en développement).
  • Initialisation de services tiers : configurez des services externes qui nécessitent une initialisation d’exécution avant le démarrage de l’application.
Exemple d’initialisation de service étendu​
import { datadogRum } from '@datadog/browser-rum';
import { configureLegacyComponentMap } from '@jutro/legacy/uiconfig';
import { warning } from '@jutro/logger';
import packageJson from '../package.json';

// Configure legacy component support
configureLegacyComponentMap();

// Environment-specific setup
const deployEnv = process.env.REACT_APP_DEPLOY_ENV || 'development';

// Initialize monitoring (Datadog RUM example)
datadogRum.init({
  applicationId: process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID as string,
  clientToken: process.env.REACT_APP_DATADOG_RUM_CLIENT_TOKEN as string,
  site: 'datadoghq.com',
  service: 'my-jutro-app',
  version: packageJson.version,
  env: deployEnv,
  sessionSampleRate: 100,
  sessionReplaySampleRate: 20,
  trackUserInteractions: true,
  defaultPrivacyLevel: 'mask-user-input',
  trackResources: true,
  trackLongTasks: true,
  // Configure distributed tracing for supported APIs
  allowedTracingUrls: [process.env.REACT_APP_API_BASE_URL].filter(Boolean),
});

// Development-specific warnings
if (process.env.NODE_ENV !== 'production') {
  warning(
    `App running with NODE_ENV=${process.env.NODE_ENV} which may impact performance.`
  );
}
Meilleures pratiques en matière d’initialisation de service​
  • Vérifications de l’environnement : utilisez des variables d’environnement pour initialiser les services de manière conditionnelle (évitez d’initialiser le suivi en cours de développement).
  • Gestion des erreurs : encapsulez l’initialisation du service en blocs try-catch pour éviter les échecs de démarrage.
  • Classer les dépendances : initialisez les services dans le bon ordre en fonction de leurs dépendances.
  • Validation de la configuration : validez les variables d’environnement requises avant d’initialiser les services.
  • Dégradation progressive : permet à l’application de démarrer même si les services non critiques ne s’initialisent pas.

Configuration de l’internationalisation​

L’initialisation par défaut fournit une configuration complète de l’internationalisation, y compris le chargement séparé des messages d’application et de base, la gestion du magasin de globalisation et les paramètres régionaux basés sur la configuration. Vous pouvez étendre cela en configurant un magasin de globalisation ou des chargeurs de messages personnalisés :

import { createG11nLocalStorageStore } from '@jutro/locale';

const g11nStore = createG11nLocalStorageStore({
  name: 'my-app-g11n-store',
});

export const startApp = (): void => {
  start(MyApp, {
    rootId: 'root',
    messageLoader: loadAppMessages,
    coreMessageLoader: loadCoreMessages,
    g11nStore, // Enable globalization store
    appName: messages.appName,
    appDescription: messages.appDescription,
  });
};

Pour découvrir les possibilités de configuration supplémentaires, reportez-vous à la documentation i18n et à Interaction avec le magasin g11n.

Exemples de configuration avancée​

Personnalisation du composant de chargement​

Utilisez la propriété loaderComponent pour remplacer le chargeur par défaut par un chargeur personnalisé :

import { Loader } from '@jutro/components';

const CustomLoader = ({ loaded, children }) => {
  if (!loaded) {
    return (
      <div style={{ textAlign: 'center', padding: '2rem' }}>
        <h1>Loading Application...</h1>
        <Loader />
      </div>
    );
  }
  return children;
};

start(MyApp, {
  loaderComponent: CustomLoader,
  // ... other configuration
});

Exécution de la logique d’initialisation avant le démarrage​

Utilisez le rappel onInit pour exécuter le code de configuration avant que votre application ne s’affiche :

start(MyApp, {
  onInit: () => {
    // Initialize services before app starts
    // This runs synchronously, before DOM rendering
    initializeCustomAnalytics();
    setupLogger();
    validateEnvironmentConfig();
  },
  // ... other configuration
});

Ordre d'exécution :

  1. Configuration chargée via loadConfiguration()
  2. onInit() appelé
  3. Validation d’éléments DOM et création d’une racine React
  4. Rendu et montage des composants
  5. onRender() appelé (si fourni)

Meilleures pratiques pour onInit :

  • Utilisez onRender plutôt si vous avez besoin d’exécuter du code après l'affichage
  • Toutes les erreurs générées empêcheront l’application de démarrer
  • Utilisez cette option pour l’initialisation critique qui doit se produire avant l'affichage de l’interface utilisateur

Exécution de la logique après l'affichage​

Utilisez le rappel onRender pour exécuter du code une fois que votre composant d’application a été affiché :

start(MyApp, {
  onRender: () => {
    // This runs after React rendering completes
    // Ideal for non-critical initialization, analytics, or tracking
    logApplicationStartTime();
    initializeOptionalFeatures();
  },
  // ... other configuration
});

Quand utiliser onRender :

  • Initialisation non critique qui ne bloque pas le démarrage
  • Analyses ou télémétrie
  • Évaluation de l’indicateur de fonctionnalité
  • Initialisation de la fonctionnalité facultative

Composants de niveau supérieur (HOC) racines​

La propriété rootHOCs transmise à start() permet d’encapsuler votre application avec des fournisseurs de contexte supplémentaires. Elle accepte une fonction (ou une série de fonctions) qui utilise un élément React.ReactNode comme entrée et renvoie une version encapsulée.

Note: rootHOCs n’accepte pas le modèle traditionnel HOC tel que défini par React. Cela se limite à prendre un seul argument du type React.ReactNode, plutôt qu’une classe de composant.

Modèles rootHOCs valides​

// Valid: Takes a ReactNode and returns JSX
const withCustomProvider = (node: React.ReactNode) => {
  return <CustomContext.Provider value={config}>{node}</CustomContext.Provider>;
};

start(MyApp, {
  rootHOCs: [withCustomProvider],
  // ... other configuration
});

Modèles rootHOCs non valides​

// Invalid: Traditional HOC pattern - wraps components, not nodes
const withDivHOC = (Component: React.ComponentType) => {
  const Wrapper = (props) => (
    <div>
      <Component {...props} />
    </div>
  );
  return Wrapper;
};

// This will not work with rootHOCs
start(MyApp, {
  rootHOCs: [withDivHOC],
});

Modèles de configuration courants​

Ajout de la gestion des états avec Redux​

Utilisez la propriété rootHOCs pour encapsuler votre application avec un fournisseur de magasins Redux :

import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({ reducer: yourReducer }); // Your Redux store configuration

start(RatingApp, {
  messageLoader: loadMessages,
  appName: messages.appName,
  // Wrap application with Redux store
  rootHOCs: [(body) => <Provider store={store}>{body}</Provider>],
  // ... other configuration
});