Inicie o emulador de CLI de aplicativos Web estáticos
Importante
Para melhorar a segurança das implantações da CLI de Aplicativos Web Estáticos, foi introduzida uma alteração significativa que exige que você atualize para a versão mais recente (2.0.2) da CLI de Aplicativos Web Estáticos até 15 de janeiro de 2025.
Static Web Apps é uma plataforma baseada em nuvem que hospeda e executa seus aplicativos Web. Quando você executa seu aplicativo localmente, precisa de ferramentas especiais para ajudá-lo a aproximar como seu aplicativo seria executado na nuvem.
A CLI (SWA CLI) de Aplicativos Web Estáticos inclui um emulador que imita como seu aplicativo seria executado no Azure, mas em vez disso é executado exclusivamente em sua máquina.
O swa start comando inicia o emulador com as configurações padrão. Por padrão, o emulador usa a porta 4280.
Para obter mais informações sobre comandos individuais, consulte a referência da CLI.
Sirva arquivos estáticos do seu sistema de arquivos
A SWA CLI permite que você forneça diretamente seu conteúdo estático do seu sistema de arquivos sem outras ferramentas necessárias. Você pode fornecer o conteúdo estático do seu diretório atual ou de uma pasta específica.
| Sirva a partir de... | Comando | Notas |
|---|---|---|
| Pasta atual | swa start |
Por padrão, a CLI inicia e serve conteúdo estático (arquivos HTML, imagem, script e CSS) a partir do diretório de trabalho atual. |
| Pasta específica | swa start ./my-dist |
Você pode substituir o comportamento para iniciar o emulador com uma pasta de ativos estáticos diferente. |
Usar o servidor de desenvolvimento
Ao desenvolver o front-end do seu aplicativo, convém usar o servidor de desenvolvimento padrão da estrutura. O uso do servidor de uma estrutura permite que você aproveite benefícios como recarga ao vivo e substituição de módulo quente (HMR).
Por exemplo, os desenvolvedores do Angular costumam usar ng serve ou npm start executar o servidor de desenvolvimento.
Você pode configurar a CLI SWA de Aplicativos Web Estáticos para solicitações de proxy para o servidor de desenvolvimento, o que oferece os benefícios da CLI da sua estrutura enquanto trabalha simultaneamente com a CLI de Aplicativos Web Estáticos.
Há duas etapas para usar o servidor de desenvolvimento de uma estrutura junto com a CLI SWA:
Inicie o servidor de desenvolvimento local da sua estrutura como de costume. Certifique-se de anotar a URL (incluindo a porta) usada pela estrutura.
Inicie a CLI SWA em um novo terminal, passando a URL do servidor de desenvolvimento.
swa start <DEV_SERVER_URL>
Nota
Certifique-se de substituir o espaço reservado <DEV_SERVER_URL> pelo seu próprio valor.
Iniciar servidor de desenvolvimento
Você pode simplificar ainda mais seu fluxo de trabalho fazendo com que a CLI SWA inicie o servidor de desenvolvimento para você.
Você pode passar um comando personalizado para o --run parâmetro para o swa start comando.
swa start <DEV_SERVER_URL> --run <DEV_SERVER_LAUNCH_COMMAND>
Aqui estão alguns exemplos de como iniciar o emulador com algumas estruturas diferentes:
| Estrutura | Comando |
|---|---|
| React | swa start http://localhost:3000 --run "npm start" |
| Blazor | swa start http://localhost:5000 --run "dotnet watch run" |
| Jekyll | swa start http://localhost:4000 --run "jekyll serve" |
Você também pode usar o --run parâmetro se quiser executar um script personalizado ao iniciar o servidor de desenvolvimento.
swa start http://localhost:4200 --run "./startup.sh"
Usando o comando acima, você pode acessar o aplicativo com os serviços emulados de http://localhost:4280