# Console Kit

Azion **Console Kit** is a front-end development kit used for crafting a customized Azion Console interface. It's developed with the [Vue/Vite](https://vuejs.org/) and [Tailwind](https://tailwindcss.com/) frameworks, as well as the [PrimeVue](https://primevue.org/) component library. This kit is built upon the [Azion API](https://api.azion.com/) and supports multi-tenancy, which allows you to integrate the Azion Web Platform with your own APIs. 

You can use Console Kit to provide a customized experience for developers by creating your own theme or rearranging UI components according to your business needs. Console Kit follows a simple and organized structure with layered separation of blocks, components, and services, promoting a clean and maintainable codebase.

The Console Kit is available on the [Github repository](https://github.com/aziontech/azion-console-kit).

---

## Implementation

Check the full list of requirements and installation and configuration guides in the [Console Kit repository](https://github.com/aziontech/azion-console-kit?tab=readme-ov-file#requirements) on GitHub.

### Requirements

1. Install **Node.js** by [downloading the executable](https://nodejs.org/en).
2. Open a terminal and run the following command to check the versions of the packages installed.

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

:::note
You may need to rollback Node.js to a previous version. To do so, run:

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

3. Now run the following command to install the [Yarn](https://yarnpkg.com) package manager:

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

### Setting up a project

1. To create your own version of the Azion Console, [fork the repository](https://github.com/aziontech/azion-console-kit/fork) into your account.
2. On the homepage of the forked repository, click **Code** and copy the HTTPS git URI.
3. Launch your terminal and paste your repository URI through the following command, ensuring you have [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed:

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

4. Navigate to the console kit folder:

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

5. Run the following command to update the project:

```bash
yarn install
```

:::note
This command should be run periodically to ensure all dependencies are up to date.
:::

6. Run this command to launch the project locally:

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

### Configuring environment variables

For a faster setup, generate a [personal token](/en/documentation/products/guides/personal-tokens/) in [Azion Console](https://console.azion.com) and save it in a `.env.development` file:

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

By default, Azion Console Kit uses the `STAGE` stack to connect with Azion APIs. To point your application to the `PRODUCTION` stack, add the following command in the `.env.development` file:

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

### Deploying the Console Kit to the edge

Azion **Console Kit** can run natively on Azion's edge using the [Azion CLI](/en/documentation/products/azion-cli/overview/) (version >= 0.70.0). To do so, follow these steps:

1. [Download and install the Azion CLI](/en/documentation/products/azion-cli/overview/#installing-azion-cli) using your preferred method.
2. Configure your [personal token](/en/documentation/products/guides/personal-tokens/) on the CLI:

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

3. Run the following command with `sudo` privileges:

```bash
azion link
```

4. Respond to the prompts as needed.
5. Once you deploy your application, the CLI will generate a Workload in the format `https://xxxxxxxxxx.map.azionedge.net` with the Console Kit project running.

---

## Use Cases

Refer to the guides below for more information on **Console Kit** use cases:

- [How to customize the Azion Console interface using the Console Kit](/en/documentation/products/guides/customize-interface-console-kit/)
- [How to integrate the Azion Console and the Azion API using the Console Kit](/en/documentation/products/guides/integrate-with-api-console-kit/)