APRENDER4 MIN DE LEITURA · MARKDOWN ↗

Adicionar uma segunda app

Amplie seu primeiro workspace com Vue, verifique as duas microapps e diferencie o que o WU coordena do estado local de cada app.

De uma app para duas

Continue no projeto mi-plataforma de Sua primeira microapp. Você já tem React funcionando dentro do shell Astro. Agora adicionará uma app Vue chamada inspector e verificará que ambas funcionam a partir da mesma página.

Manteremos os contadores dos templates para que você possa reconhecer o resultado antes de alterar componentes.

1. Adicionar Vue ao workspace

Pare o servidor de desenvolvimento com Ctrl+C. A partir da raiz mi-plataforma/, onde está wu.config.json, execute:

wu add vue inspector --no-install
wu install

A ordem de add é framework, nome. O primeiro comando cria mf-inspector/ e registra a nova app na configuração do workspace. --no-install deixa a instalação para o segundo comando, que também instala as dependências de Vue.

Aguarde wu install terminar corretamente antes de continuar.

2. Iniciar e verificar ambas as apps

Inicie o servidor novamente:

wu dev --native --port 3000 --no-open

Abra ou recarregue http://127.0.0.1:3000 quando o terminal anunciar que está escutando.

Em Overview, verifique se aparecem mi-plataforma e inspector.
Abra mi-plataforma. Você deve ver React e seu contador em Interactions. Verifique + e −: 0 → 1 → 0.
Abra inspector. Você deve ver Vue, o nome inspector e seu contador. Verifique também + e −.
Volte a Overview.

O mesmo shell já pode mostrar apps de dois frameworks. Você não precisou converter um componente React para Vue nem alterar a navegação manualmente.

Se inspector não aparecer, verifique se executou add a partir da raiz correta e se wu.config.json inclui a nova app. Se ela aparecer na navegação, mas ficar vazia, revise o primeiro erro de console ou de carregamento JavaScript do navegador. Desenvolvimento e recarga explica como continuar o diagnóstico.

3. Localizar o código de cada app

O que você quer alterar	Arquivo
O conteúdo e o contador React	`mf-mi-plataforma/src/App.tsx`
O conteúdo e o contador Vue	`mf-inspector/src/App.vue`
A página anfitriã e sua navegação	`shell/src/pages/index.astro`

Edite os componentes na pasta de sua app e mantenha o servidor de desenvolvimento aberto para verificar as mudanças. As dependências próprias são declaradas no package.json dessa app; depois execute wu install a partir da raiz para atualizar a instalação do workspace.

O que compartilham e o que cada app mantém

As duas apps usam o mesmo shell e o runtime WU que as carrega e monta. Cada uma mantém seus componentes, seu framework e o estado de seu contador. Adicionar Vue não conecta automaticamente os dois contadores.

Quando precisar que as apps colaborem, escolha a comunicação conforme a tarefa:

Eventos: uma app anuncia algo que aconteceu, como «um produto foi adicionado».
Store: várias apps consultam e atualizam um dado compartilhado, como a quantidade de produtos no carrinho.
Contratos e RPC: uma app oferece uma operação e outra solicita seu resultado.

Para conectar esses mesmos contadores, siga Um contador entre React e Vue. Inclui os componentes completos, as permissões de ambas as apps e uma página Astro que permite vê-las juntas. Depois, Uma soma entre aplicações acrescenta um cliente e um provedor ao mesmo workspace.

O que cada arquivo configura

Você não precisa editar estes arquivos para concluir o percurso. Esta distinção será útil ao personalizar o projeto:

Arquivo ou chamada	Para que serve
`wu.config.json`	Indica à CLI onde estão o shell e as apps, quais frameworks usam e quais comandos ou portas correspondem a cada um.
`wu.json`	É o manifesto de uma microapp: descreve sua entrada e pode declarar contratos ou permissões. Este template não cria um `wu.json` de origem; o servidor de desenvolvimento pode gerá-lo quando solicitado e o build grava o de produção.
`wu.init({ ... })`	Configura o runtime no navegador: quais apps o shell pode carregar e de quais URLs. O shell gerado já realiza essa chamada.

Consulte Configuração e descoberta para alterar o workspace e Configuração e manifestos para configurar apps no runtime.

Próxima etapa

Continue em Preparar a produção para construir as apps, servir a saída e verificar o que será publicado. Se quiser conectá-las primeiro, você pode concluir o contador compartilhado e depois construir o projeto com os mesmos comandos.