# Deploy de aplicação Jamstack com Angular

import Tag from '~/components/webkit/Tag.vue';

<Tag severity="info">
  Aplicação estática
</Tag>

Angular é um framework web de código aberto projetado com ênfase em velocidade e adequação para sites que contenham conteúdo substancial.

Saiba mais sobre o [Angular](https://angular.io/docs).

## Pré-requisitos

Antes de começar, você deve ter:

- Uma conta na [plataforma da Azion](/pt-br/documentacao/produtos/contas/criar-uma-conta/) com o produto [Functions](/pt-br/documentacao/produtos/build/applications/functions/) habilitado.
- [A versão mais recente da Azion CLI instalada](/pt-br/documentacao/produtos/azion-cli/visao-geral/).
- Um editor de código.
- Acesso ao terminal.
- Node.js ≥ 18 instalado.

## Inicializar um projeto Angular

1. No terminal, inicialize o projeto:

```sh 
  azion init
```

2. Dê um nome ao seu projeto ou pressione `enter` para aceitar a sugestão dada:

```sh 
? Your application's name:  (black-thor) 
```

3. Escolha o preset do Angular: 

```sh 
? Choose a preset:  [Use arrows to move, type to filter]
> Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
  Javascript
  ...
```

4. Escolha um dos templates disponíveis.

5. Você pode optar por iniciar um servidor de desenvolvimento local ou não.

```sh 
? Do you want to start a local development server? (y/N) 
```

Os próximos passos dependem de sua resposta.

- [Se você optou por executar um servidor de desenvolvimento local](#resposta-sim-para-desenvolvimento-local).
- [Se você optou por não executar um servidor de desenvolvimento local](#resposta-nao-para-desenvolvimento-local).

### Resposta sim para desenvolvimento local

1. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
Do you want to install project dependencies? This may be required to start local development server (y/N)
```

Aguarde até que a instalação seja concluída.

Saída:

```sh
Your application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3333, url: http://localhost:3333
```

2. No navegador, vá para `http://localhost:3333/` e você verá o seu projeto Angular em execução.

#### Implantação do projeto

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

1. Pare a execução no terminal com `control + c`. 
2. Acesse a pasta do projeto:

```sh
cd [nome-do-seu-projeto] 
```

3. Implante o projeto: 

```sh
azion deploy
```

4. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform.

:::note 
Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.
::: 

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto Angular na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`.

### Resposta não para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

1. Digite `y` para a seguinte interação, indicando que deseja implantar o projeto:

```sh
Do you want to deploy your project?
```

2. Instale as dependências do projeto. Digite `y` quando a interação solicitar:

```sh 
Do you want to install project dependencies? This may be required to start local development server (y/N)
```

3. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

:::note 
Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido.
::: 

Após a implantação ser concluída, você receberá um Workload para acessar o seu projeto Angular na Plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o Workload fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`.