Preparar a produção

Revisar o que você vai publicar

No desenvolvimento, você testou seu código-fonte. Agora vai gerar os arquivos que sua hospedagem entregará e verificar essas versões compiladas no navegador.

Continue na raiz mi-plataforma/ de Sua primeira microapp. Se concluiu Adicionar uma segunda app, também fará o build do Vue. Os mesmos comandos funcionam com uma ou duas apps.

1. Fazer o build do workspace

Pare o servidor de desenvolvimento com Ctrl+C e execute:

wu build

Espere até que termine sem erros. O WU reúne o shell Astro e os builds das microapps na pasta dist/ da raiz do workspace. Essa pasta reúne a saída completa; shell/dist/ contém apenas o shell.

Com React e Vue, verifique se existem dist/index.html e uma pasta para cada microapp:

dist/
├── index.html
├── apps.json
├── wu-manifest.json
├── assets/...
├── mf-mi-plataforma/
│   ├── wu.json
│   └── assets/...
└── mf-inspector/
    ├── wu.json
    └── assets/...

Se criou apenas React, não haverá uma pasta mf-inspector/. O build pode adicionar outros arquivos, incluindo os de política HTTP. Cada wu.json aponta para as entradas compiladas da sua app.

Se o comando falhar, resolva o primeiro erro antes de continuar. Uma pasta dist/ de um build anterior pode continuar existindo; vê-la no disco não confirma que o último build terminou corretamente.

2. Servir a saída compilada

Na mesma raiz, execute:

wu serve 4100

Deixe o terminal aberto e acesse http://127.0.0.1:4100. O número 4100 é a porta desta revisão. Se estiver ocupada, use outro número e abra a URL correspondente.

wu serve entrega os arquivos de dist/. Se alterar o código-fonte, execute wu build novamente para incorporar essas alterações à revisão.

3. Verificar as apps em produção

1. Confira Overview, Welcome to WU e os nomes das apps que criou.
2. Abra mi-plataforma e verifique React, o nome da app e seu contador: + muda 0 → 1 e − volta a 0.
3. Se adicionou Vue, abra inspector e repita a verificação do contador.
4. Volte a Overview, recarregue a página e abra as apps novamente.
5. Verifique se não há erros de carregamento de JavaScript ou respostas 404 nas ferramentas de desenvolvimento do navegador.

Isso verifica se o shell encontra as apps compiladas e se seus componentes funcionam. Se uma app funcionava no desenvolvimento, mas fica vazia aqui, revise os caminhos dos assets e seu manifesto; Build para produção explica como inspecionar essa saída.

Ao terminar, pare o servidor com Ctrl+C.

Publicar e continuar aprendendo

O conteúdo reunido em dist/ é o artefato a publicar na sua hospedagem. Antes disso, siga Servir e implantar para revisar rotas, estilos e cabeçalhos do ambiente em que será hospedado. A verificação na porta 4100 valida essa saída local; revise também a URL publicada após a implantação.

wu doctor fornece diagnóstico adicional. Suas verificações complementam as interações que você acabou de testar.

Para adicionar comportamento compartilhado a essas mesmas apps, continue com Um contador entre React e Vue. Depois, você pode adicionar Uma soma entre aplicações, com cliente, provedor e permissões. Ambas as receitas incluem todos os arquivos e suas verificações de desenvolvimento e produção. Como executar os exemplos também reúne os laboratórios e os exemplos Node.