Ferramentas necessárias:
O conceito Micro frontends e permitir aos desenvolvedores a flexibilidade de solicitar remotamente um módulo na rede e inicializar esse módulo em sua aplicação, podendo assim separar responsabilidades de uma aplicação frontend em varias aplicações.
Os microfrontends podem ajudar os desenvolvedores a focar nos requisitos funcionais e nas necessidades de negócios.
Os microfrontends podem aumentar o reuso de código na empresa e simplificar o processo de desenvolvimento, deixando a aplicação com pouco acoplamento pois possibilita a cada aplicação dentro do ambiente ter sua própria versão, seu próprio framework, seu próprio deploy e no final para o usuário isso se reflete a 1 aplicação.
Construir uma plataforma para microfrontends é muito semelhante ao de uma plataforma para microservices.
Nesse artigo vamos construir um microfrontend utilizando o framework Angular onde através da aplicação main iremos acessar outras duas aplicações remotas utilizando a ferramenta module-federation, dito isso bora codar.
Crie uma pasta artigoMFE e atraves do terminal de sua maquina entre dentro desta pasta vamos criar 3 aplicações angular através do comando ng new mfe-host, após ng new mfe-1 e após ng new mfe-2.
Temos agora 3 projetos angular criado dentro da pasta artigoMFE, digite o seguinte comando cd mfe-host no terminal na raiz da pasta artigoMFE
Dentro da pasta mfe-host digite o seguinte comando para abrir a aplicação dentro do VSCODE code .
Ainda na pasta mfe-host digite o seguinte comando
ng add @angular-architects/module-federation --project mfe-host --port 4200 --type host --skip-confirmation Esse comando ira instalar a biblioteca do module-federation em nossa aplicação e configurar o arquivo webpack da nossa aplicação.
Feito isso crie um arquivo app-routing.module.ts na sua aplicação de maneira que a estrutura fique o seguinte.
E altere os seguintes arquivos para ficar igual os arquivos abaixo.
app-routing.module.ts
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { loadRemoteModule } from '@angular-architects/module-federation'; const APP_ROUTES: Routes = [ { path: 'mfe-1', loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: 'http://localhost:4201/remoteEntry.js', exposedModule: './Module', }).then((m) => m.AppModule), }, { path: 'mfe-2', loadChildren: () => loadRemoteModule({ type: 'module', remoteEntry: 'http://localhost:4202/remoteEntry.js', exposedModule: './Module', }).then((m) => m.AppModule), }, ]; @NgModule({ imports: [RouterModule.forRoot(APP_ROUTES)], exports: [RouterModule], }) export class AppRoutingModule {} app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module.'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} app.component.html
<div> <p><a routerLink="/mfe-1">Acesse MFE-1</a></p> <p><a routerLink="/mfe-2">Acesse MFE-2</a></p> </div> <div> <router-outlet></router-outlet> </div> Feito isso digite o seguinte comando no terminal npm run start para rodar a aplicação e clique no link abaixo:
Podemos ver na ferramenta da google na aba de Redes que nosso host tentou se comunicar a nossa aplicação remota mfe-1
No próximo artigo vamos implementar as aplicações remotas mfe-1 e mfe-2 para concluir nosso artigo, ate o próximo artigo
Deixo aqui meu linkedin e instagram para quem quiser me adicionar
Top comments (0)