# Console Kit

O **Console Kit** da Azion é um kit de desenvolvimento front-end usado para criar uma interface personalizada do Console da Azion. Foi desenvolvido com os frameworks [Vue/Vite](https://vuejs.org/) e [Tailwind](https://tailwindcss.com/), além da biblioteca de componentes [PrimeVue](https://primevue.org/). Este kit é construído sobre a [API da Azion](https://api.azion.com/) e suporta multi-tenancy, permitindo integração da Azion Web Platform com as suas próprias APIs.

Você pode usar o Console Kit para fornecer uma experiência personalizada para os desenvolvedores, criando seu próprio tema ou reorganizando os componentes da UI de acordo com as necessidades do seu negócio. O Console Kit possui uma estrutura simples e organizada com separação em camadas de blocos, componentes e serviços, promovendo uma base de código limpa e gerenciável.

O Console Kit está disponível no [repositório do Github](https://github.com/aziontech/azion-console-kit).

---

## Implementação

Verifique a lista completa de requisitos e guias de instalação e configuração no [repositório do Console Kit](https://github.com/aziontech/azion-console-kit?tab=readme-ov-file#requirements) no GitHub.

### Pré-requisitos

1. Instale o **Node.js** fazendo o [download do executável](https://nodejs.org/en).
2. Abra um terminal e execute o seguinte comando para verificar as versões dos pacotes instalados.

```bash
npm -v && node -v
```

:::note
Você pode precisar de uma versão anterior do Node.js. Para fazer isso, execute:

```bash
sudo npm install -g n && n 18.16.1
```
:::

4. Agora execute o seguinte comando para instalar o gerenciador de pacotes [Yarn](https://yarnpkg.com):

```bash
npm install -g yarn
```

### Configure um projeto

1. Para criar sua própria versão do Azion Console, [faça um fork (bifurcação) do repositório](https://github.com/aziontech/azion-console-kit/fork) para a sua conta.
2. Na página inicial do repositório bifurcado, clique em **Code** e copie o URI git HTTPS.
3. Abra o seu terminal e cole o URI do repositório através do seguinte comando, certificando-se de que você tem o [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) instalado:

```bash
git clone https://github.com/your-username/azion-console-kit.git
```

4. Navegue até a pasta do Console Kit:

```bash
cd azion-console-kit
```

5. Execute o seguinte comando para atualizar o projeto:

```bash
yarn install
```

:::note
Este comando deve ser executado periodicamente para garantir que todas as dependências estejam atualizadas.
:::

6. Execute este comando para iniciar o projeto localmente:

```bash
yarn dev --host
```

### Configure as variáveis de ambiente

Para uma configuração mais rápida, gere um [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) no [Azion Console](https://console.azion.com) da Azion e salve em um arquivo `.env.development`:

```bash
echo 'VITE_PERSONAL_TOKEN=PERSONALTOKEN' > .env.development
```

Por padrão, o Azion Console Kit usa o stack `STAGE` para se conectar com as APIs da Azion. Para apontar sua aplicação para `PRODUCTION`, adicione o seguinte comando no arquivo `.env.development`:

```txt title=".env.development"
VITE_ENVIRONMENT='PRODUCTION'
```

### Rode o Console Kit no edge

O Azion Console Kit pode ser executado nativamente no edge da Azion usando a [Azion CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/) (versão >= 0.70.0). Para fazer isso, siga estes passos:

1. [Baixe e instale a Azion CLI](/en/documentation/products/azion-cli/overview/#installing-azion-cli) usando o método de sua preferência.
2. Configure seu [personal token](/pt-br/documentacao/produtos/guias/personal-tokens/) na CLI:

```bash
azion --token PERSONAL_TOKEN
```

3. Execute o seguinte comando com privilégios `sudo`:

```bash
azion link
```

4. Responda aos prompts conforme necessário.
5. Quando o deploy de sua aplicação finalizar, a CLI entregará um Workload no formato `https://xxxxxxxxxx.map.azionedge.net` com o projeto Console Kit em execução.

---

## Casos de uso

Consulte os guias abaixo para obter mais informações sobre casos de uso do **Console Kit**:

- [Como personalizar a interface do Console da Azion usando o Console Kit](/pt-br/documentacao/produtos/guias/personalizar-interface-console-kit/)
- [Como integrar o Console da Azion e a API da Azion usando o Console Kit](/pt-br/documentacao/produtos/guias/integrar-com-api-console-kit/)