Azion Console Kit 💻🚀🧡

A modern, customizable front-end development kit for building web 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, a web 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 git@github.com: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., Applications/, 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 Azion's distributed infrastructure 🚀

Deploy to Azion's web 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 distributed 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.