Van monolithische naar micro-frontends - deel 2

Inhoudsopgave

• React-toepassing migreren

  • Migreren naar applicatie voor één spa
  • Rootconfiguratie configureren

• Hoekapplicatie migreren

React-toepassing migreren

Om een ​​bestaande React te migreren toepassing Ik volgde deze documentatie van single-spa en ook U kunt een compleet werkende oplossing vinden in deze GitHub-repo.
Ik neem aan dat je al een bestaande React-applicatie hebt.

Migreren naar applicatie voor één spa

• In uw React-hoofdmaptoepassing installeert u single-spa en single-spa-react met behulp van npm of yarn

npm i single-spa single-spa-react
// or with yarn
yarn add single-spa single-spa-react

• Maak een bestand en noem het root.app.js binnen de src map (u kunt elke gewenste naam kiezen)

touch src/root.app.js

in dit bestand zullen we de rootcomponent . maken , de React-component op het hoogste niveau die moet worden weergegeven. In ons geval is dit App Component binnen App.js
de code in root.app.js zou er zo uit moeten zien

Rootconfiguratie configureren

Laten we nu onze root-config . configureren , vervang de code in uw index.js bestand met onderstaande code

Voordelen van migratie op deze manier

• We gebruiken dezelfde react-script .
• We hoeven webpack niet te configureren helemaal opnieuw, aangezien we het huidige toegangspunt, src/index.js . aan het kapen zijn , dus het is niet nodig om eject onze Reageer applicatie en configureer het webpack . opnieuw .

U kunt de applicatie uitvoeren met dezelfde scripts npm start .

Hoekapplicatie migreren

Een bestaande Angular . migreren applicatie Ik heb deze documentatie gevolgd van single-spa Ik neem aan dat je al een bestaande Angular . hebt sollicitatie.
in mijn geval gebruik ik Angulaire versie 10

• Voer de volgende opdracht uit in je hoofdmap

ng add single-spa-angular

Volgens single-spa documentatie, zal dit commando:

en zal ook:

• Voeg single-spa toe als afhankelijkheid moet u het installeren, aangezien het niet standaard is geïnstalleerd, wordt het alleen toegevoegd aan uw package.json , u kunt het handmatig installeren

npm i single-spa

of in uw hoofdmap waar uw package.json gelegen run

npm i

die je afhankelijkhedenboom ververst en elk ontbrekend pakket installeert.

• Genereer extra-webpack.config.js
• Update build optie binnen angular.json en gebruik @angular-builders/custom-webpack in plaats van @angular-devkit/build-angular je moet andere afhankelijkheden installeren door
. uit te voeren

npm i @angular-builders/custom-webpack
npm i @types/[email protected] --saveDev

Extra stappen om de migratie te voltooien

Sommige van deze stappen zijn niet gedocumenteerd in de single-spa documentatie, en ik kwam erachter terwijl ik de applicatie migreerde

• Binnen app.module.ts bestand

import {APP_BASE_HREF} from '@angular/common';

en voeg dit object toe aan de providers reeks

{provide: APP_BASE_HREF, useValue: '/'}

• Binnen tsconfig.app.json , voeg node toe naar typen array "types": ["node"]

• In package.json, --deploy-url vlag moet worden ingesteld op de host-URL. Zie dit Stack Overflow-antwoord om het openbare pad van het webpack correct in te stellen voor uw activa.

Het resultaat van deze migratie is een gecompileerd JS-bestand. Na het voltooien van de migratie kunt u de Angular-toepassing uitvoeren met deze opdracht

npm run serve:single-spa:angular-app

Die een dev-server start die uw js-bestand bedient, dat zich zal bevinden in http://localhost:4200/main.js

Conclusie

Wat is er tot nu toe gedaan:

• Een bestaande Reageren gemigreerd applicatie.
• Onze kernconfiguratie gemaakt bestand.
• Een bestaande Angular . gemigreerd applicatie.

Een volledig werkende oplossing is te vinden in deze Github-repo en zal dienovereenkomstig worden bijgewerkt met elk gepubliceerd deel.

In het volgende deel zullen we het hebben over het registreren van uw Angular applicatie in je root-configuratie bestand.