Mono repositório contendo duas aplicações Front-end Angular 16, gerenciadas pelo Module Federation. O micro frontend host-app é o orquestrador que atende na porta 4222 e mfe-app é a aplicação remota que expõe componentes no host-app e roda na porta 4333.
O fluxo da aplicação inicia na página de boas vindas Home, permitindo o usuário clicar no link Login, inserindo as credenciais [email protected] senha 1234, será direcionado para a listagem de livros, podendo inserir, atualizar e excluir livros. E nesta mesma listagem, existe o botão no canto superior direito ver editoras que permite a navegação para as operações de CRUD em localstorage relacionadas com as editoras.
- Clone o repositório:
git clone https://github.com/cidaluna/mfe-angular.git- Navegue no diretório principal
cd mfe-angular- Navegue no diretório backend
cd backend- Inicie a API Json Server
json-server --watch db.json --port 4000- Abra um novo terminal no diretório do projeto e execute os comandos
npm install- Execute a aplicação host-app
ng serve host-app - Abra um novo terminal e execute a aplicação mfe-app
ng serve mfe-app Exemplo no terminal:
- Navegue nas URLs que o comando anterior apresentou
Host-app: http://localhost:4222
Mfe-app: http://localhost:4333
- Navegue no diretório da aplicação desejada
cd host-app- Execute o comando
ng test- Navegue até o diretório mfe-app
cd projects/mfe-app- No diretório do micro frontend mfe-app, execute o comando
npx cypress open-
Será aberta uma tela, clique na opção E2E Testing
-
Clique no navegador de sua preferência e clique em Start
-
Clique em publishers.cy.js
-
Acompanhe o resultado dos testes Cypress na tela
Testes com o Cypress E2E realizando CRUD Localstorage na tela de editoras:
- Node.js 18
- Angular CLI 16
- Angular 16,
- Angular Material,
- Webpack,
- Module Federation,
- Node.js,
- Boostrap,
- Ícones Angular Material,
- JSON Server,
- Jasmine Karma,
- Cypress
Tive dificuldade ao tentar estabelecer a arquitetura proposta, especialmente na integração do Angular 17 com suas dependências, particularmente no que diz respeito ao Module Federation do Webpack. Como resultado, decidi explorar a versão 16 do Angular, onde consegui realizar a integração com sucesso. Essa abordagem alternativa me permitiu avançar no projeto e garantir a funcionalidade de carregar a modularização desejada.
Cada micro frontend deve ter um service responsável pela comunicação com o backend, realizando chamadas HTTP para a API.
As URLs podem ser configuradas nos arquivos environment.ts e environment.prod.ts, facilitando a troca entre ambientes. Além disso, é possível implementar criptografia, autenticação, uso de tokens, configurar proxy entre outros para proteger as requisições, estabelecer a comunicação entre as aplicações e manter a segurança dos dados compartilhados.
Com os services configurados, os componentes podem realizar as operações de manipulação de dados e renderizar na tela os módulos necessários, atendendo a arquitetura de modularidade e escalabilidade, considerando as regras de negócio do produto e proporcionando uma experiência agradável ao cliente.
Quando o backend real estiver disponível, configuramos todos os arquivos de ambiente com as URLs corretas e realizamos os testes de ponta a ponta para garantir a integração do Frontend com o Backend nos ambientes de desenvolvimento, homologação e produção.
Criando o mono repositório:
ng new mfe-angular --create-application=false
cd mfe-angular
Criando as aplicações micro frontends:
ng g application host-app --routing --no-standalone --style=scss
ng g application mfe-app --routing --no-standalone --style=scss
Instalando o Webpack:
npm i webpack webpack-cli --save-dev
Configurando Module Federation:
npm install @angular-architects/module-federation
ng add @angular-architects/module-federation --project host-app --port 4222
ng add @angular-architects/module-federation --project mfe-app --port 4333
Outros comandos:
npm cache clean --force
Dependências:
npm i json-server
npm i cypress
npm i @angular/material Utilizado SnackBar para notificações de erro, Dialog para abrir o modal, alguns botões e para campos de formulário do componente livro.
Tela Home com login no Host Application:
Tela listagem de livros CRUD feito com API JSON Server do MFE no Host Application:
Formulário adicionar livro:
Validações do formulário:
Campos preenchidos:
Filtro e paginação para buscar livro:
Tela de editoras com CRUD (Adicionar, Listar, Editar e Excluir) salvando em LocalStorage:
Barra de notificações com snackBar:
