Angular + Azure Static Web Apps
Tags: azure, github, angular, braziliandevs
Published: 2021-07-15 14:28:12

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no Azure Static Web Apps.

## Você precisa ter instalado em sua máquina:
- [Windows Terminal](https://www.microsoft.com/pt-br/p/windows-terminal/9n0dx20hk701)
- [NodeJs](https://nodejs.org/en/download/)
- [Angular - CLI](https://angular.io/cli)
- [Azure - CLI](https://docs.microsoft.com/pt-br/cli/azure/install-azure-cli-windows?tabs=azure-cli)
- [GitHub - CLI](https://cli.github.com/)

e também uma assinatura no [Azure](https://portal.azure.com/)

>Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

##Coaltime

O [Coaltime](https://dev.to/silverio27/implantar-um-aplicativo-angular-no-azure-pela-cli-4gl9), aplicação fictícia que apresentei em outros artigos, além de precisar de mais agilidade de implantação devido a contínuas mudanças no código, precisa de baixo custo de hospedagem pois estamos em uma fase embrionária, após analisarmos os custos de uma máquina windows e linux, vimos que para escalar ou ter distribuição global, seria uma melhor solução o Azure Static Web Apps , saiba mais sobre esse recurso [aqui](https://azure.microsoft.com/pt-br/services/app-service/static/#documentation).

Faça download do Coaltime (não clone)
{% github silverio27/Coaltime no-readme %}

Utilize o windows terminal e navegue até a pasta do projeto.
**Execute todos os comandos na pasta do projeto**

> Esse projeto utiliza a versão Angular CLI: 12.0.1

## Azure CLI e GitHub CLI
Esse artigo prioriza a utilização da CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do [azure]("https://portal.azure.com/") e do [github](https://github.com/).

Abaixo você encontra os links com a lista completa de comandos para ambos:
- [Azure CLI]("https://docs.microsoft.com/en-us/cli/azure/reference-index?view=azure-cli-latest")
- [GitHub CLI](https://cli.github.com/manual/)

## GitHub

Vamos definir algumas variáveis no terminal, para facilitar a escrita dos demais comandos

>substitua o __\<nome exclusivo do app\>__ por por exemplo:
**coaltimelsv1990**, na qual a primeira parte é o nome do app, e a segunda parte são as iniciais do meu nome seguido do ano em que nasci, (Lucas Silvério Vargas, 1990 - lsv1990).

```CMD
$group="StaticCoalTime"
$app="<nome exlusivo do app>"
```

Faça login no GitHub pelo terminal:
```CMD
gh auth login
```

Os comandos abaixo vão iniciar o repositório local e remoto.
```CMD
git init
gh repo create $app
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main
```
> essa operação pode levar alguns minutos para ser concluída

Salve a url do seu repositório em uma variável, vamos utilizar mais a frente na implantação:

```CMD
$url=(gh repo view <account>/$app --json "url" --jq ".url")
```
>no meu caso o comando vai ficar assim

```CMD
$url=(gh repo view silverio27/$app --json "url" --jq ".url")
```

## Azure

Faça login na sua conta do azure e defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:

```CMD
az login
az account set --subscription <subscriptionid>
```

Os comandos a seguir criarão um grupo de recursose o aplicativo web estático e irá implantar nosso código:

```CMD
az group create -n $group -l eastus2
az staticwebapp create -n $app -g $group -s $url -l eastus2 -b main --login-with-github --output-location "./dist/app" --app-location "/" --api-location "api"
az staticwebapp show -n staticoaltime --query "{url:defaultHostname}" -o tsv
```
>O parâmetro --login-with-github irá solicitar o login ao github para que o azure crie um segredo, e o arquivo yml de implantação. O terminal vai pedir que você acesse o portal e informe um código de autenticação. Por padrão o recurso é criado na camada gratuita.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1of34m4zmmnmvh6rfixw.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnbxeeeuvotmxtltxhll.png)
 

> essa operação pode levar alguns minutos para ser concluída

Acompanhe a implantação no portal do github.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo3k63bl9pzpqlf5r514.png)
 
Pronto! Agora toda vez que você comitar alterações na main, ele será implantado automaticamente.

Obtenha a url do app para acessar o portal do app implantado:
```CMD
az staticwebapp show -n $app --query "{url:defaultHostname}" -o tsv
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amlbmdxa5fjwuov164dv.png)
 
No terminal execute o comando para puxar as alterações feita no repositório, e você verá o arquivo yml que o azure criou.

```CMD
git pull
cd .\.github\workflows\
ls
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc303vuv20zfcsf69vs7.png)
 

Espero que isso te ajude!

## Referências
{% user glaucia86 %}

{% post https://dev.to/azure/github-cli-uma-nova-experiencia-no-github-236n %}

{% post https://dev.to/azure/realize-deploy-automatico-de-projetos-estaticos-com-azure-static-web-apps-2nfj %}