Criando Aplicações com Astro Build & Azure Static Web Apps CLI!
Tags: staticwebapps, javascript, webdev, tutorial
Published: 2021-08-06 13:49:10

---
title: Criando Aplicações com Astro Build & Azure Static Web Apps CLI!
published: true
description: Nesse artigo estarei ensinando como usar o Azure Static Web Apps CLI!
tags: staticwebapps, javascript, webdev, tutorial
//cover_image: https://direct_url_to_image.jpg
---

Recentemente tivemos o lançamento do serviço **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview?WT.mc_id=javascript-34087-gllemos)**. 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.

[![swa-overview.png](https://i.postimg.cc/BnsBQ7Hy/swa-overview.png)](https://postimg.cc/D8jXxgCd)

A parte mais interessante do **[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview?WT.mc_id=javascript-34087-gllemos)** é 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](https://docs.microsoft.com/azure/static-web-apps/apis?WT.mc_id=javascript-34087-gllemos)**, **[incluir recursos de autenticação](https://docs.microsoft.com/azure/static-web-apps/key-vault-secrets?WT.mc_id=javascript-34087-gllemos)**, roteamento personalizado e incluso autorização baseada em rotas!
E, o melhor disso tudo: realizar **[hospedagem de forma totalmente gratuita!](https://docs.microsoft.com/azure/static-web-apps/plans?WT.mc_id=javascript-34087-gllemos)**

Se desejarem saber um pouco mais sobre esse novo serviço, eu escrevi um artigo mais detalhado sobre o produto no link abaixo:

{% link https://dev.to/glaucia86/publicando-aplicacoes-estaticas-com-static-web-apps-azure-devops-4c1o %}

## 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](https://github.com/Azure/static-web-apps-cli)**!

{% github https://github.com/Azure/static-web-apps-cli %}

Conforme o próprio repositório da ferramenta o **[Azure Static Web Apps CLI](https://github.com/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](https://nodejs.org/en/)**! 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](https://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](https://astro.build/)**, vocês podem saber um pouco mais no vídeo abaixo:

{% youtube dsTXcSeAZq8 %}

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:

```bash
> 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:

```bash
> 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!

[![Captura-de-Tela-2021-08-03-a-s-23-43-51.png](https://i.postimg.cc/QtDpXhCv/Captura-de-Tela-2021-08-03-a-s-23-43-51.png)](https://postimg.cc/qtmtwf8G)


Depois disso, agora vamos ao próximo passo! Abre o seu command line e digite o seguinte comando:

```bash
> 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:

```bash
> 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:

```bash
> 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](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization?WT.mc_id=javascript-34087-gllemos)**)

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](https://code.visualstudio.com/?WT.mc_id=javascript-34087-gllemos)**?!

Para isso, baixem agora mesmo a extensão: **[Azure Static Web Apps](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps&WT.mc_id=javascript-34087-gllemos)**! 

Agora abra o projeto no Visual Studio Code e vamos seguir os seguintes passos:

##### Passo 01: 

Clique no botão `+` conforme a imagem abaixo:

[![Captura-de-Tela-2021-08-04-a-s-01-15-35.png](https://i.postimg.cc/ht3Gb7wK/Captura-de-Tela-2021-08-04-a-s-01-15-35.png)](https://postimg.cc/9DZVczCk)

##### Passo 02: 

Aqui vocês devem definir o nome da aplicação. O nome deve ser único!

[![Captura-de-Tela-2021-08-04-a-s-01-21-19.png](https://i.postimg.cc/mhfYr5Y6/Captura-de-Tela-2021-08-04-a-s-01-21-19.png)](https://postimg.cc/5QgY7pkw)

##### Passo 03: 

Como o Astro ainda não está listado na extensão, vamos escolher a opção `custom`:

[![step-02.png](https://i.postimg.cc/tJC3nxwF/step-02.png)](https://postimg.cc/62g2Dy9Q)

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

[![Captura-de-Tela-2021-08-04-a-s-01-27-59.png](https://i.postimg.cc/WpWrftxf/Captura-de-Tela-2021-08-04-a-s-01-27-59.png)](https://postimg.cc/3WGdkr8g)

##### 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](https://docs.microsoft.com/azure/static-web-apps/front-end-frameworks?WT.mc_id=javascript-34087-gllemos)**)

[![step-03.png](https://i.postimg.cc/25RnFJgk/step-03.png)](https://postimg.cc/LJDqmyHw)

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

[![step-06.png](https://i.postimg.cc/tTYyRXND/step-06.png)](https://postimg.cc/5YdDnWGF)

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

[![step-07.png](https://i.postimg.cc/dtFX4sZX/step-07.png)](https://postimg.cc/jC8ZjrXQ)

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

[![step-08.png](https://i.postimg.cc/htj25fDC/step-08.png)](https://postimg.cc/MvC0cZjR)

##### Passo 09: 

Caso tudo dê certo! Agora vamos ao último passo!

[![step-09.png](https://i.postimg.cc/858wc4h3/step-09.png)](https://postimg.cc/t15Fmhvt)

##### 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](https://yellow-grass-008f2c710.azurestaticapps.net/)**

[![astro-swa-demo.gif](https://s6.gifyu.com/images/astro-swa-demo.gif)](https://gifyu.com/image/OJkv)

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

* ✅ **[Documentação Oficial do Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Curso Grátis - Azure DevOps](https://docs.microsoft.com/learn/paths/build-applications-with-azure-devops/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Curso Grátis - Publique uma Aplicação Estática no Angular, React, Vue ou Javascript & API](https://docs.microsoft.com/pt-br/learn/modules/publish-app-service-static-web-app-api/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Curso Grátis - Crie e Publique um site estático com Gatsby](https://docs.microsoft.com/pt-br/learn/modules/create-deploy-static-webapp-gatsby-app-service/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no Gatsby](https://docs.microsoft.com/azure/static-web-apps/publish-gatsby/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no Hugo](https://docs.microsoft.com/azure/static-web-apps/publish-hugo/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no VuePress](https://docs.microsoft.com/azure/static-web-apps/publish-vuepress/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no Next.js](https://docs.microsoft.com/pt-br/azure/static-web-apps/deploy-nextjs/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no Nuxt.js](https://docs.microsoft.com/azure/static-web-apps/deploy-nuxtjs/?WT.mc_id=javascript-34087-gllemos)**

* ✅ **[Implementando Azure Static Web Apps no Jekyll](https://docs.microsoft.com/pt-br/azure/static-web-apps/publish-jekyll/?WT.mc_id=javascript-34087-gllemos)**

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

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/pr3TL4Pd/Screen-Shot-12-31-20-at-01-06-AM.png)](https://bit.ly/youtube-canal-glaucialemos)

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Nos vemos! Até a próxima pessoal! 😍