Console Kit

Developed with Vue/Vite, PrimeVue, and Tailwind, Azion Console Kit is a front-end development kit used for crafting a customized Azion Console interface.

View as Markdown

Azion Console Kit is a front-end development kit used for crafting a customized Azion Console interface. It’s developed with the Vue/Vite and Tailwind frameworks, as well as the PrimeVue component library. This kit is built upon the Azion API 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.

Implementation

Check the full list of requirements and installation and configuration guides in the Console Kit repository on GitHub.

Requirements

  1. Install Node.js by downloading the executable.
  2. Open a terminal and run the following command to check the versions of the packages installed.
npm -v && node -v

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

sudo npm install -g n && n 18.16.1

  1. Now run the following command to install the Yarn package manager:
npm install -g yarn

Setting up a project

  1. To create your own version of the Azion Console, fork the repository 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 installed:
git clone https://github.com/your-username/azion-console-kit.git
  1. Navigate to the console kit folder:
cd azion-console-kit
  1. Run the following command to update the project:
yarn install

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

  1. Run this command to launch the project locally:
yarn dev --host

Configuring environment variables

For a faster setup, generate a personal token in Azion Console and save it in a .env.development file:

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:

.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 (version >= 0.70.0). To do so, follow these steps:

  1. Download and install the Azion CLI using your preferred method.
  2. Configure your personal token on the CLI:
azion --token PERSONAL_TOKEN
  1. Run the following command with sudo privileges:
azion link
  1. Respond to the prompts as needed.
  2. 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: