# 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.

<span id="de-una-app-a-dos"></span>

<span class="section-anchor" id="section-1"></span>

## De uma app para duas

Continue no projeto `mi-plataforma` de [Sua primeira microapp](/pt/docs/guides/quickstart/). 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.

<span id="1-añadir-vue-al-workspace"></span>

<span class="section-anchor" id="section-2"></span>

## 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:

```sh
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.

<span id="2-arrancar-y-comprobar-ambas-apps"></span>

<span class="section-anchor" id="section-3"></span>

## 2. Iniciar e verificar ambas as apps

Inicie o servidor novamente:

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

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

1. Em **Overview**, verifique se aparecem `mi-plataforma` e `inspector`.
2. Abra **mi-plataforma**. Você deve ver **React** e seu contador em **Interactions**. Verifique **+** e **−**: **0 → 1 → 0**.
3. Abra **inspector**. Você deve ver **Vue**, o nome `inspector` e seu contador. Verifique também **+** e **−**.
4. 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](/pt/docs/cli/development/) explica como continuar o diagnóstico.

<span id="3-localizar-el-código-de-cada-app"></span>

<span class="section-anchor" id="section-4"></span>

## 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.

<span id="qué-comparten-y-qué-conserva-cada-app"></span>

<span class="section-anchor" id="section-5"></span>

## 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](/pt/docs/guides/shared-counter/). 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](/pt/docs/guides/rpc-between-apps/) acrescenta um cliente e um provedor ao mesmo workspace.

<span id="qué-configura-cada-archivo"></span>

<span class="section-anchor" id="section-6"></span>

## 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](/pt/docs/cli/configuration/) para alterar o workspace e [Configuração e manifestos](/pt/docs/framework/configuration/) para configurar apps no runtime.

<span id="siguiente-paso"></span>

<span class="section-anchor" id="section-7"></span>

## Próxima etapa

Continue em [Preparar a produção](/pt/docs/guides/production/) 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](/pt/docs/guides/shared-counter/) e depois construir o projeto com os mesmos comandos.