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
Top comments (0)