Recentemente tivemos o lançamento do serviço Azure Static Web Apps. Um serviço que te permite criar e implantar automaticamente aplicações Full Stack (desde o Back-End há Front-End) completa no Azure desde repositório do GitHub.
A parte mais interessante do Azure Static Web Apps é que esse serviço integra perfeitamente para realizar hospedagem de forma global e de forma distribuída sua aplicação ou conteúdo estático, no lado do Back-End criando API's fazendo uso do serviço Azure Functions, incluir recursos de autenticação, roteamento personalizado e incluso autorização baseada em rotas!
E, o melhor disso tudo: realizar hospedagem de forma totalmente gratuita!
Se desejarem saber um pouco mais sobre esse novo serviço, eu escrevi um artigo mais detalhado sobre o produto no link abaixo:
Mas, o que é o Azure Static Web Apps CLI?!
Bom, o enfoque de hoje será sobre uma ferramenta ligada a esse serviço que te permitirá emular localmente as suas aplicações estáticas de forma muito rápida e dinâmica: Azure Static Web Apps CLI!
Azure
/
static-web-apps-cli
Azure Static Web Apps CLI ✨
Azure Static Web Apps CLI
The Static Web Apps CLI, also known as SWA CLI, serves as a local development tool for Azure Static Web Apps. It can:
- Serve static app assets, or proxy to your app dev server
- Serve API requests, or proxy to APIs running in Azure Functions Core Tools
- Emulate authentication and authorization
- Emulate Static Web Apps configuration, including routing and ACL roles
- Deploy your app to Azure Static Web Apps
Important Notes
If you have suggestions or you encounter issues, please report them or help us fix them. Your contributions are very much appreciated. 🙏
The CLI emulates commonly used capabilities of the Azure Static Web Apps cloud service. Some differences are expected. Always deploy and test your apps in Azure to confirm behavior.
Quickstart
Installing the CLI with npm, yarn or pnpm:
-
To install the CLI in your project, use:
npm install
…
Conforme o próprio repositório da ferramenta o Azure Static Web Apps CLI com SWA CLI você pode:
- ✅ Criar aplicações estáticas ativas ou proxy para o seu server de desenvolvimento de aplicações
- ✅ Atender e criar requisições de API's ou proxies para API's que executem no Azure Functions
- ✅ Emular autenticação e autorização
- ✅ Emular configuração de aplicações Web Estáticas, incluso o roteamento!
Outro ponto importante a mencionar aqui é que você pode emular quaisquer projeto estático ou com estrutura de aplicação Front-End, seja ela:
- ✅ React
- ✅ Angular
- ✅ Svelte
- ✅ Vue
- ✅ Next.js
- ✅ Blazor/WebAssembly!
Bom! Falar é bom! Mas é muito melhor quando temos DEMOS! Então, vamos codificar agora e realizar uma demo bem simples de como podemos fazer uso dessa ferramenta localmente!
Demo Time!
A primeira coisa que precisamos fazer é instalar o Node.js! Sempre procuram instalar a versão LTS!
Nessa demo, estarei usando um novo framework que pode ser uma grande tendência no mundo do desenvolvimento: Astro Build.
Não estarei entrando em detalhes sobre esse framework, até porque o enfoque não é esse nesse artigo. Mas, se desejarem saber mais, posso estar fazendo um artigo e vídeo sobre esse framework fantástico!
E, caso queiram saber mais detalhes sobre o Astro Build, vocês podem saber um pouco mais no vídeo abaixo:
Para agilizar um pouco mais a nossa demo, eu criei um projeto modelo que, peço encarecidamente que vocês façam um download ou git clone dele:
> git clone https://github.com/glaucia86/astro-swa-demo.git
Se vocês desejarem, podem fazer as modificações necessárias. Tipo, imagens e outras cositas más! Eu super recomendo quando vocês iniciarem um novo projeto Astro, escolham a opção: Portfolio. Vocês terão esse mesmo modelo para iniciar, quem sabe um novo site estático portifólio!
Bom, vão até a pasta astro-demo e instalam os pacotes localmente usando o comando:
> npm install
E, enfim, digitam o comando npm start para iniciar o projeto. Abrem o browser na página: http://localhost:3000/
Caso vejam conforme a imagem abaixo é porque funcionou tudo certinho!
Depois disso, agora vamos ao próximo passo! Abre o seu command line e digite o seguinte comando:
> npm install -g @azure/static-web-apps-cli
Crie uma pasta para que possamos testar essa ferramenta. No meu caso, criei uma pasta com o seguinte nome:
> mkdir swa-cli-demo
Agora vem a parte mais legal, onde apenas com o comando de linha vocês poderão criar uma página estática de exemplo. Para isso, execute o comando abaixo:
> swa start http://localhost:3000 --run "npm start"
Depois que executamos esse comando note que ele pedirá a abrir uma página no browser. Porém, numa porta diferente: http://localhost:4280/.
O que isso quer nos dizer? Que estamos de fato, emulando o serve do Azure Static Web Apps. Desde esse endpoint, podemos testar até mesmo API's de Back-End com esse endpoint ou até mesmo simular uma autenticação integrada de logins. Uma vez que o Azure Static Web Apps tem suporte para isso. (Mais informações AQUI)
Legal! Não é mesmo?
Realizando deploy da aplicação via Vs Code!
para realizar os passos abaixo se faz necessário você alocar o seu projeto no GitHub e possuir uma conta free do Azure!
Vamos agora fazer o deploy dessa aplicação usando a extensão do Azure Static Web Apps no Visual Studio Code?!
Para isso, baixem agora mesmo a extensão: Azure Static Web Apps!
Agora abra o projeto no Visual Studio Code e vamos seguir os seguintes passos:
Passo 01:
Clique no botão + conforme a imagem abaixo:
Passo 02:
Aqui vocês devem definir o nome da aplicação. O nome deve ser único!
Passo 03:
Como o Astro ainda não está listado na extensão, vamos escolher a opção custom:
Passo 04:
Já aqui estaremos definindo a localização da nossa aplicação. Muito cuidado, caso se a sua aplicação (raiz do projeto) estejam em alguma subpasta (que é o meu caso). Nesse exemplo, do meu projeto, a raiz do projeto encontra-se na pasta astro-demo
Passo 05:
E, finalmente temos que definir onde está sendo gerada os arquivos de artefato do Astro. Segundo a documentação, fica localizada na pasta dist (para diferentes frameworks existem diferentes pastas de artifatos. Para saber mais, clique AQUI)
Passo 06:
Depois que executar o comando acima, abrirá uma caixa que te levará até o próximo passo (ou seja, ao repositório do GitHub)
Passo 07:
Note que, no momento que somos levados ao site do repositório do projeto, apresentará uma pasta contendo um arquivo 'yaml' e além disso, uma action sendo executada pelo GitHub. Clique nessa action!
Passo 08:
Agora olha que interessante, há um job sendo executado ali! Isso demonstra que a nossa aplicação está fazendo uma comunicação com a plataforma Azure e além do mais criando uma esteira de C.I e C.D pra nós!
Passo 09:
Caso tudo dê certo! Agora vamos ao último passo!
Passo 10:
Retorne para o Visual Studio Code e abre novamente a extensão do SWA. E, procure pela aplicação recém criada! Clique com o botão direito em: browser site
Agora abram o browser! E, vocês verão o projeto de vocês disponível globalmente e pronto para ser visto por todo mundo!
Se vocês desejarem ver o meu projeto online, ele está disponível AQUI
Conclusão!
O Azure Static Web Apps veio pra nos auxiliar e facilitar quando o assunto é realizar deployment de projetos estáticos de uma maneira: simples, rápida e dinâmica! E, principalmente - a melhor parte disso tudo - integrado ao GitHub Actions! Criando assim uma esteira de C.I e C.D automaticamente pra nós! Fantástico, não é mesmo?!
Se desejarem saber mais ou até mesmo experimentar esse serviço de graça, super recomendo os cursos abaixo:
✅ Curso Grátis - Publique uma Aplicação Estática no Angular, React, Vue ou Javascript & API
✅ Curso Grátis - Crie e Publique um site estático com Gatsby
Palavras Finais
Espero que esse tutorial de SWA CLI + Astro Build seja de grande ajuda à todas as pessoas! Se vocês curtiram sobre o Astro, deixem nos comentários abaixo. Porque dependendo eu faço uma série de vídeos explicando melhor sobre esse framework incrível!
Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! Estou criando inúmeras séries incríveis para esse ano de 2021!
- 😃 Microsoft Learn Live Sessions (a partir de Outubro)
- 😃 Tutoriais semanais de Node.js, TypeScript & JavaScript
- 😃 E muitos Live Codings (a partir de Outubro)
Se são conteúdos que você curte, então não deixa de se inscrever e ative o sininho para ficar sabendo quando teremos vídeo novo!
E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!
Nos vemos! Até a próxima pessoal! 😍
Top comments (1)
Yes! Vou ler depois :]