Azion Console Kit 💻🚀🧡

A modern, customizable front-end development kit for building edge computing interfaces

Introduction • Tech Stack • Getting Started • Project Structure • Configuration • Testing • Contributions

---

Introduction 📖

Azion Console Kit is a front-end development kit made in Vue/Vite with the PrimeVue and Tailwind framework that allows you to run a customized Azion Console interface.

This project was developed by Azion, an edge computing platform that allows you to build and run applications anywhere. You'll find our products and services on it. 🚀

Tech Stack 🛠️

Technology	Purpose
Vue 3	Progressive JavaScript framework
Vite	Next-generation frontend tooling
PrimeVue	UI component library
Tailwind CSS	Utility-first CSS framework
Pinia	State management
Vue Router	Official router for Vue.js
Axios	HTTP client
Vitest	Unit testing framework
Cypress	E2E testing framework
VeeValidate + Yup	Form validation

Getting Started 🔛

Requirements

Before you begin, ensure that you have the following:

• Node.js version 22.18.0 or later
• Yarn version 1.22.22 or later

Note: Check .nvmrc for the exact Node.js version used in development.

Using Docker (Alternative)

If you prefer not to install Node.js and Yarn locally, you can use Docker:

alias yarn="docker run -it --rm -p 5173:5173 -v $HOME:/root -v $PWD:/usr/src/app -w /usr/src/app node:22 yarn"

Setup

1. Clone the repository:

   git clone [email protected]:aziontech/azion-console-kit.git
   cd azion-console-kit

2. Install dependencies:

   yarn install

3. Start the development server:

   yarn dev --host

4. Access the application:

   Open http://localhost:5173 in your browser.

Project Structure �

src/
├── assets/          # Static files (CSS, images, themes)
├── components/      # Reusable Vue components
├── composables/     # Vue 3 composition API utilities
├── helpers/         # Utility functions and helpers
├── layout/          # Layout components (header, sidebar, etc.)
├── modules/         # Feature modules
├── plugins/         # Vue plugins configuration
├── router/          # Route definitions
├── services/        # API service layer (Axios calls)
├── stores/          # Pinia state management stores
├── templates/       # Reusable page templates/blocks
├── tests/           # Unit tests
├── utils/           # General utilities
└── views/           # Page components (organized by feature)

Key Directories Explained

Directory	Description
services/	API integration layer. Each feature has its own service folder with CRUD operations
views/	Page components organized by module (e.g., EdgeApplications/, Variables/)
templates/	Pre-built blocks for common UI patterns (list tables, forms, etc.)
stores/	Shared state between components using Pinia
router/	Centralized routing with index.js and feature-specific route files

Configuration 💻

Environment Variables

Create a .env file at the root of your project:

# API Environment (stage or production)
VITE_ENVIRONMENT=stage

# Stripe Keys (for payment processing)
VITE_STRIPE_TOKEN_DEV=pk_test_yourDevApiKeyHere
VITE_STRIPE_TOKEN_STAGE=pk_test_yourStageApiKeyHere
VITE_STRIPE_TOKEN_PROD=pk_live_yourProductionApiKeyHere

# Sentry Configuration (replace with valid auth token)
VITE_SENTRY_AUTH_TOKEN=sntrys_QsVsYXQiOjE3MDAwMDAwMDAuMDAkOllfMCJ1cmwiOiJodHRwczovL3NlbnRyeS5pbyIsInJlZ2lvbl91cmwiOiJodHRwczovL3Vz123456789195byIsIm9yZyI6InlvdXItb3JnYW5pemF0aW9uIn0_xXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXxXx
VITE_SENTRY_UPLOAD=false

# SSO Provider IDs (replace with valid keys from your SSO configuration)
VITE_SSO_AZURE=f47ac10b-58cc-4372-a567-0e02b2c3d479
VITE_SSO_IDP_SCIM_E2E=6ba7b810-9dad-11d1-80b4-00c04fd430c8
VITE_SSO_GITHUB=550e8400-e29b-41d4-a716-446655440000
VITE_SSO_GOOGLE=7c9e6679-7425-40de-944b-e07fc1f90ae7

Variable	Description
VITE_ENVIRONMENT	API stack to use: stage (default) or production
VITE_STRIPE_TOKEN_DEV	Stripe API key for local development
VITE_STRIPE_TOKEN_STAGE	Stripe API key for staging environment
VITE_STRIPE_TOKEN_PROD	Stripe API key for production
VITE_SENTRY_UPLOAD	Enable/disable Sentry source map uploads (true/false)
VITE_SENTRY_AUTH_TOKEN	Sentry authentication token for source map uploads
VITE_SSO_AZURE	Azure AD SSO provider ID
VITE_SSO_IDP_SCIM_E2E	SCIM E2E identity provider ID
VITE_SSO_GITHUB	GitHub SSO provider ID
VITE_SSO_GOOGLE	Google SSO provider ID

IDE Setup (Recommended)

For the best development experience with VSCode:

1. Install recommended extensions:

   • Volar (disable Vetur)
   • TypeScript Vue Plugin
   • Prettier
   • ESLint

2. Enable format on save in .vscode/settings.json:

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Testing 🧪

Unit Tests

# Run tests with UI
yarn test:unit

# Run tests headless
yarn test:unit:headless

# Run tests with coverage
yarn test:unit:coverage

E2E Tests (Cypress)

Before running E2E tests, create cypress.env.json from the example file and fill in valid credentials.

# Open Cypress UI (development)
yarn test:e2e:open:dev

# Run tests headless (development)
yarn test:e2e:run:dev

# Run against staging
yarn test:e2e:run:stage

# Run against production
yarn test:e2e:run:prod

Linting & Formatting

# Lint and fix issues
yarn lint

# Format code with Prettier
yarn format

# Security check
yarn security-check

Running on the Edge 🚀

Deploy to Azion's edge platform using the Azion CLI:

1. Install and configure Azion CLI:

   Download the Azion CLI and authenticate:

   azion -t ${PERSONAL_TOKEN}

2. Link the project:

   azion link

   Select the Vue preset when prompted.

3. Deploy:

   azion deploy

💡 Tip: Use --config-dir to manage multiple environments (e.g., staging vs production).

Available Scripts 📜

Script	Description
yarn dev	Start development server
yarn build	Build for production
yarn preview	Preview production build locally
yarn test:unit	Run unit tests with UI
yarn test:e2e:open:dev	Open Cypress for E2E testing
yarn lint	Lint and fix code
yarn format	Format code with Prettier

Features 🧩

• Multi-tenancy: Build your Azion Console by consuming endpoints from the Azion Public API
• Customizable UI: Configure theme tokens or generate them automatically via the Builder
• Simple structure: Layered separation of blocks, components, and services for easy route building
• Edge-ready: Deploy directly to Azion's edge network

Troubleshooting 🔧

Common Issues

Port 5173 already in use:

# Find and kill the process
lsof -ti:5173 | xargs kill -9

Node version mismatch:

# Use nvm to switch to the correct version
nvm use

Dependencies out of sync:

# Clean install
rm -rf node_modules yarn.lock
yarn install

Contributions 🤝

We welcome contributions! Before starting, please read:

Resource	Description
CONTRIBUTING.md	How to contribute and submit PRs
DEVELOPER.md	Development environment setup and architecture
SECURITY.md	Security validation process
CODE_OF_CONDUCT.md	Community guidelines

Quick Start for Contributors

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Make your changes and add tests
4. Run yarn lint and yarn test:unit
5. Commit using conventional commits
6. Push and open a Pull Request

Community 💬

Join our community:

• Discord - Chat with the team and community
• X (Twitter) - Latest updates
• LinkedIn - Company news
• YouTube - Tutorials and demos

License 📄

This project is licensed under the terms specified in the LICENSE file.