TL;DR: Usar spa único para construir micro front-ends torna mais fácil dividir um aplicativo grande em partes pequenas e independentes para que diferentes equipes possam trabalhar em partes sem afetar outras. Este blog mostra como criar microfrontends Angular e React, conectá-los a uma configuração raiz e implantá-los.

Micro Frontends se tornaram um estilo de arquitetura popular para dimensionar aplicativos frontend, especialmente quando várias equipes trabalham em diferentes partes de uma interface de usuário. Ao dividir front-ends monolíticos em módulos menores e independentes, as equipes podem implantar, atualizar e dimensionar partes de um aplicativo separadamente. Este artigo discutirá como criar e conectar micro front-ends de diferentes estruturas usando spa único.

Introdução ao spa único

Single-spa é uma estrutura baseada em JavaScript projetada para arquitetura micro frontend. Ele permite que você crie micro front-ends usando estruturas como Angular, React e Vue e sirva-os como um único aplicativo. Ele mantém um registro de aplicativos conectados e usa rotas para redirecionar usuários para diferentes aplicativos.

Usar uma estrutura de SPA único traz muitos benefícios, como escolha de diferentes idiomas para diferentes partes do aplicativo, desenvolvimento independente e implantação de micro front-ends e escalabilidade. Então, vamos começar a criar um spa único.

Criando um spa único

Pré-requisitos

Para implementar um spa único, é importante ter Node.js e npm instalados. Para instalá-los, acesse o site do Node.js e baixe a versão mais recente para o seu sistema operacional. Execute o instalador para concluir a instalação.

Em seguida, verifique a instalação do node.js e do npm executando os seguintes comandos no prompt de comando.

npm - version
node - version

Passo 1: Configurando o projeto

Neste exemplo, dois micro frontends simples serão criados usando Angular e React. Um root-config servirá os dois micro frontends.

Crie um aplicativo

Podemos criar um aplicativo de micro frontend Angular simples executando o seguinte comando.

ng new angular-spa-frontend

Depois que o projeto for criado, execute o próximo comando para instalar a biblioteca de spa único.

ng add single-spa-angular

Depois que a biblioteca estiver instalada corretamente, um arquivo chamado main.single-spa.ts será criado no projeto Angular, que contém todas as configurações relacionadas ao single-spa.

Consulte o código de configuração.

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;

É necessário fornecer um valor APP_BASE_HREF para funcionar como um spa único.

Além disso, ao adicionar a biblioteca de spa único, package.json conterá dois scripts adicionais.

"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"
 }

O arquivo angular.json será modificado usando as seguintes configurações.

"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” será substituído por “main”: “src/main.single-spa.ts”. Uma nova configuração de compilação será adicionada como um módulo JavaScript.

Depois que as configurações forem concluídas e verificadas, podemos servir o aplicativo Angular usando o seguinte comando.

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

Agora que criamos com sucesso o aplicativo micro frontend, vamos ver como implementar o root-config.

Configuração raiz

Execute o seguinte comando para criar o root-config.

npx create-single-spa

Ao inserir este comando, uma série de configurações será apresentada para criar o root-config.

Após selecionar as configurações anteriores, a configuração raiz será criada para atender vários frontends.

Para conectar o micro frontend criado ao root-config, precisamos modificar os arquivos root-config.ts e 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,
});

Conforme mencionado no bloco de código anterior, o micro frontend criado deve ser importado no arquivo root-config.ts.

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

Os scripts a seguir devem ser adicionados ao arquivo index.ejs.

Criado micro frontend ( @org/angular-spa-frontend ), junto com a URL ( http://localhost:4200/main.js ) na qual o micro frontend foi hospedado, deve ser adicionado no mapa de importação.

Em seguida, execute o seguinte comando para executar o aplicativo.

npm run start

Supondo que essas etapas sejam executadas corretamente, deveremos ser capazes de ver o spa único final na visualização, semelhante à imagem a seguir.

Etapa 2: implantação em produção

Ao implantar esses micro front-ends em produção, é recomendado que cada aplicativo de micro front-end seja implantado como um aplicativo independente e autônomo. A configuração raiz provavelmente carregará cada aplicativo dinamicamente, dependendo das rotas do aplicativo definidas em registerApplication.

Etapa 3: adicionar mais micro front-ends

Para adicionar mais micro frontends, repita as etapas mencionadas anteriormente. Vejamos como integrar um micro frontend React no mesmo root-config.

Crie um novo micro frontend React usando o seguinte comando.

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

Em seguida, navegue dentro do projeto criado e instale single-spa-react.

npm install single-spa-react

Modifique o arquivo de entrada para exportar métodos de ciclo de vida para tornar o aplicativo compatível com spa único.

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;

Depois que as configurações forem concluídas, podemos servir o micro frontend do React usando o seguinte comando.

npm start

Para integrar o micro frontend criado com o root-config existente, implemente as seguintes modificações nos arquivos em 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,
});

Você também precisa atualizar o arquivo index.ejs com o caminho do pacote principal do aplicativo React.

Referência do GitHub

Confira o exemplo de código completo deste aplicativo de spa único nesta demonstração do GitHub.

Conclusão

Usar spa único para construir micro frontends torna mais fácil dividir um aplicativo grande em partes pequenas e independentes. Dessa forma, diferentes equipes podem trabalhar em suas partes sem afetar outras e utilizar os frameworks de sua preferência, como Angular ou React. Seguindo as etapas deste guia, você pode configurar um projeto de spa único, conectar vários micro front-ends e oferecer aos usuários uma experiência tranquila. O spa único simplifica o crescimento do seu aplicativo ao longo do tempo e a adição de novos recursos conforme necessário.

Blogs relacionados

• Domine JavaScript assíncrono com RxJS
• API Axios e Fetch? Escolhendo o cliente HTTP certo
• Tipos de utilitários TypeScript: um guia completo
• Armazenamento JWT seguro: práticas recomendadas