TL;DR : L'utilisation d'un spa unique pour créer des micro-interfaces facilite la division d'une grande application en petits éléments indépendants afin que différentes équipes puissent travailler sur des parties sans affecter les autres. Ce blog montre comment créer des micro-frontends Angular et React, les connecter à une configuration racine et les déployer.

Les micro-frontends sont devenus un style architectural populaire pour faire évoluer les applications frontales, en particulier lorsque plusieurs équipes travaillent sur différentes parties d'une interface utilisateur. En décomposant les interfaces monolithiques en modules plus petits et indépendants, les équipes peuvent déployer, mettre à jour et faire évoluer des parties d'une application séparément. Cet article expliquera comment créer et connecter des micro-interfaces de différents frameworks à l'aide d'un seul spa.

Introduction au mono-spa

Single-spa est un framework basé sur JavaScript conçu pour une architecture micro-frontend. Il vous permet de créer des micro-interfaces à l'aide de frameworks tels que Angular, React et Vue et de les servir comme une seule application. Il tient un registre des applications connectées et utilise des itinéraires pour rediriger les utilisateurs vers différentes applications.

L'utilisation d'un framework SPA unique présente de nombreux avantages, tels que le choix de différentes langues pour différentes parties de l'application, le développement et le déploiement indépendants de micro-interfaces et l'évolutivité. Commençons donc par créer un spa unique.

Création d'un spa unique

Conditions préalables

Pour implémenter un spa unique, il est important d'avoir Node.js et npm installés. Pour les installer, accédez au site Web Node.js et téléchargez la dernière version de votre système d'exploitation. Exécutez le programme d'installation pour terminer l'installation.

Ensuite, vérifiez l'installation de node.js et npm en exécutant les commandes suivantes dans l'invite de commande.

npm - version
node - version

Étape 1 : Mise en place du projet

Dans cet exemple, deux micro-interfaces simples seront créées à l'aide d'Angular et React. Une configuration racine servira les deux micro-interfaces.

Créer une application

Nous pouvons créer une simple application micro-frontend angulaire en exécutant la commande suivante.

ng new angular-spa-frontend

Une fois le projet créé, exécutez la commande suivante pour installer la bibliothèque mono-spa.

ng add single-spa-angular

Une fois la bibliothèque correctement installée, un fichier nommé main.single-spa.ts sera créé dans le projet Angular, qui contient toutes les configurations liées au single-spa.

Référez-vous au code de configuration.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Il est nécessaire de fournir une valeur APP_BASE_HREF pour fonctionner comme un spa unique.

De plus, lors de l'ajout de la bibliothèque à spa unique, package.json contiendra deux scripts supplémentaires.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

Le fichier angular.json sera modifié à l'aide des configurations suivantes.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

"main": "src/main.ts" sera remplacé par "main": "src/main.single-spa.ts". Une nouvelle configuration de build sera ajoutée en tant que module JavaScript.

Une fois les configurations terminées et vérifiées, nous pouvons servir l'application Angular à l'aide de la commande suivante.

npm run serve:single-spa:angular-spa-frontend

Maintenant que nous avons créé avec succès l'application micro frontend, voyons comment implémenter la root-config.

Configuration racine

Exécutez la commande suivante pour créer la configuration racine.

npx create-single-spa

Lors de la saisie de cette commande, une série de configurations sera présentée pour créer la configuration racine.

Après avoir sélectionné les configurations précédentes, la configuration racine sera créée pour servir plusieurs frontends.

Pour connecter le micro frontend créé à la configuration racine, nous devons modifier les fichiers root-config.ts et index.ejs.

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

Comme mentionné dans le bloc de code précédent, la micro-interface créée doit être importée dans le fichier root-config.ts.

name: "@org/angular-spa-frontend",

Les scripts suivants doivent être ajoutés au fichier index.ejs.

Création du micro-frontend ( @org/angular-spa-frontend ), ainsi que l'URL ( http://localhost:4200/main.js ) dans lequel le micro l'interface a été hébergée et doit être ajoutée dans la carte d'importation.

Ensuite, exécutez la commande suivante pour exécuter l'application.

npm run start

En supposant que ces étapes soient effectuées correctement, nous devrions pouvoir voir le spa unique final dans la vue, similaire à l'image suivante.

Étape 2 : Déploiement en production

Lors du déploiement de ces micro-frontends en production, il est recommandé que chaque application micro-frontend soit déployée en tant qu'application indépendante et autonome. La configuration racine chargera probablement chaque application de manière dynamique, en fonction des routes d'application définies dans registerApplication.

Étape 3 : Ajouter plus de micro-interfaces

Pour ajouter plus de micro-interfaces, répétez les étapes mentionnées précédemment. Voyons comment intégrer une micro interface React dans la même configuration racine.

Créez une nouvelle micro-interface React à l'aide de la commande suivante.

npx create-single-spa --module-type react

Ensuite, naviguez dans le projet créé et installez single-spa-react.

npm install single-spa-react

Modifiez le fichier d'entrée pour exporter les méthodes de cycle de vie afin de rendre l'application compatible avec les spas uniques.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

Une fois les configurations terminées, nous pouvons servir le micro frontend React à l'aide de la commande suivante.

npm start

Pour intégrer la micro-interface créée avec le root-config , implémentez les modifications suivantes dans les fichiers dans root-config.

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

Vous devez également mettre à jour le fichier index.ejs avec le chemin du bundle principal de l'application React.

Référence GitHub

Découvrez l'exemple de code complet de cette application à spa unique dans cette démo GitHub.

Conclusion

L'utilisation d'un spa unique pour créer des micro-interfaces facilite la division d'une grande application en petits éléments indépendants. De cette façon, différentes équipes peuvent travailler sur leurs parties sans affecter les autres et utiliser les frameworks qu'elles préfèrent, comme Angular ou React. En suivant les étapes de ce guide, vous pouvez configurer un projet de spa unique, connecter plusieurs micro-interfaces et offrir aux utilisateurs une expérience fluide. Single-spa facilite le développement de votre application au fil du temps et l'ajout de nouvelles fonctionnalités si nécessaire.

Blogs connexes

• Maîtrisez le JavaScript asynchrone avec RxJS
• Axios et Fetch API ? Choisir le bon client HTTP
• Types d'utilitaires TypeScript : un guide complet
• Stockage JWT sécurisé : bonnes pratiques