Skip to content

Latest commit

 

History

44 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🔧 Bicep Schema Builder

An interactive web tool for building, validating, and managing Azure Bicep JSON schemas with production-ready Bicep templates. Perfect for developers working with Infrastructure as Code (IaC) and Azure Resource Manager templates.

Bicep Schema Builder JavaScript Schema Build Tests

✨ Features

Web Application

  • 📁 Schema Upload: Upload and validate existing JSON schema files
  • ✏️ Interactive Editor: Built-in schema editor with syntax highlighting
  • ✅ Real-time Validation: Instant feedback on schema structure and Bicep compliance
  • 📋 Template Library: Pre-built templates for common Azure resources
  • 🎨 Format & Download: Format JSON and download validated schemas
  • 🔍 Bicep-Specific Validation: Specialized checks for Azure Bicep patterns
  • 📦 ARM Template Validation (NEW!): Full Azure Resource Manager template validation
  • 🔄 Dual Validation Modes: Switch between resource schema and full template validation
  • 🌙 Dark Mode: Toggle between light and dark themes
  • ☁️ Azure Integration: Connect to Azure for live resource validation
  • 🚀 Deployment Builder: Select and configure multiple resources for deployment

Bicep Templates (NEW!)

  • 7 Production-Ready Templates: Deploy Azure resources with best practices built-in
  • Latest API Versions: All templates use 2023-2024 API versions
  • Security Hardened: HTTPS-only, TLS 1.2+, managed identities, private by default
  • Comprehensive Parameters: Well-documented with sensible defaults
  • Complete Outputs: Resource IDs, FQDNs, connection information

Testing & CI/CD

  • Automated Testing: Schema validation with AJV
  • CI/CD Pipeline: GitHub Actions workflow for validation
  • Security Scanning: Trivy integration for IaC security checks

🚀 Supported Azure Resources

JSON Schemas (9)

  • 🆕 ARM Deployment Template - Complete Azure Resource Manager template schema with all resource types
  • ✅ Storage Accounts (Microsoft.Storage/storageAccounts) - Updated with 2023 APIs
  • ✅ Web Apps (Microsoft.Web/sites)
  • ✅ Virtual Machines (Microsoft.Compute/virtualMachines)
  • ✅ Key Vaults (Microsoft.KeyVault/vaults)
  • ✅ SQL Database (Microsoft.Sql/servers/databases)
  • ✅ Azure Functions (Microsoft.Web/sites - Function App)
  • ✅ App Service Plans (Microsoft.Web/serverfarms)
  • ✅ Virtual Networks (Microsoft.Network/virtualNetworks)

Bicep Templates (7)

  • 🆕 Storage Account - Secure storage with managed identity support
  • 🆕 Web App - App Service with runtime selection and managed identity
  • 🆕 Virtual Network - VNet with dynamic subnet configuration
  • 🆕 SQL Database - SQL Server + Database with multiple tiers
  • 🆕 Azure Functions - Serverless compute with Application Insights
  • 🆕 Virtual Machine - Ubuntu VM with complete infrastructure
  • 🆕 App Service Plan - Standalone plan with all SKU tiers

🏗️ Project Structure

bicep-schema-builder/
├── index.html                 # Main application interface
├── style.css                  # Application styling
├── script.js                  # Main application logic
├── 404.html                   # Custom 404 page
├── package.json               # Node.js dependencies and scripts
├── .gitignore                 # Git ignore rules
│
├── .github/
│   └── workflows/
│       ├── deploy.yml         # GitHub Pages deployment
│       └── validate.yml       # CI/CD validation pipeline
│
├── docs/
│   ├── IMPROVEMENTS.md        # Comprehensive changelog
│   └── gui-prototype.md       # UI prototype documentation
│
├── utils/
│   ├── schemaParser.js        # Schema parsing and validation
│   └── azureResourceGraph.js  # Azure Resource Graph integration
│
├── schemas/                   # 9 JSON Schema definitions
│   ├── armDeploymentTemplate.json # ARM Deployment Template schema (NEW!)
│   ├── storageAccount.json    # Storage Account schema
│   ├── webApp.json            # Web App schema
│   ├── virtualMachine.json    # VM schema
│   ├── keyVault.json          # Key Vault schema
│   ├── sqlDatabase.json       # SQL Database schema
│   ├── azureFunctions.json    # Azure Functions schema
│   ├── appServicePlan.json    # App Service Plan schema
│   └── virtualNetwork.json    # Virtual Network schema
│
├── templates/                 # 7 Production Bicep templates
│   ├── storage-account.bicep  # Storage Account
│   ├── web-app.bicep          # Web App + App Service Plan
│   ├── vnet-with-subnets.bicep # Virtual Network
│   ├── sql-database.bicep     # SQL Server + Database
│   ├── azure-functions.bicep  # Function App with dependencies
│   ├── virtual-machine.bicep  # VM with full infrastructure
│   └── app-service-plan.bicep # Standalone App Service Plan
│
└── tests/
    └── validate-schemas.js    # Automated schema validation

🎯 Getting Started

Web Application

Option 1: Local Development

  1. Clone the repository:

    git clone https://github.com/techaboo/bicep-schema-builder.git
    cd bicep-schema-builder
  2. Open in your browser:

    • Simply open index.html in your web browser
    • Or use a local server like Live Server in VS Code

Option 2: GitHub Pages (Live Demo)

Visit the live demo at: https://techaboo.github.io/bicep-schema-builder

Bicep Templates

Prerequisites

Quick Start

# Login to Azure
az login

# Create a resource group
az group create --name myResourceGroup --location eastus

# Deploy a template
az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/storage-account.bicep \
  --parameters storageAccountName=mystorageacct123

Development & Testing

# Install dependencies
npm install

# Run schema validation tests
npm test

# Build all Bicep templates
for file in templates/*.bicep; do
  az bicep build --file "$file"
done

# Lint a specific template
az bicep lint --file templates/storage-account.bicep

📋 Template Usage Examples

Storage Account

az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/storage-account.bicep \
  --parameters \
    storageAccountName=mystorageacct123 \
    skuName=Standard_LRS \
    enableManagedIdentity=true

SQL Database

az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/sql-database.bicep \
  --parameters \
    sqlServerName=myserver123 \
    databaseName=mydb \
    administratorLogin=sqladmin \
    administratorLoginPassword='ComplexP@ssw0rd!' \
    skuName=S1

Azure Functions

az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/azure-functions.bicep \
  --parameters \
    functionAppName=myfuncapp123 \
    appServicePlanName=myplan \
    storageAccountName=mystg123 \
    runtime=node \
    runtimeVersion=20

Virtual Machine

az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/virtual-machine.bicep \
  --parameters \
    vmName=myvm \
    adminUsername=azureuser \
    sshPublicKey='ssh-rsa AAAA...' \
    vmSize=Standard_B2ms \
    ubuntuOSVersion=Ubuntu-2204

Web App

az deployment group create \
  --resource-group myResourceGroup \
  --template-file templates/web-app.bicep \
  --parameters \
    appServicePlanName=myplan \
    webAppName=mywebapp123 \
    skuName=S1 \
    runtimeStack='NODE|20-lts'

🔧 Features in Detail

Dual Validation Modes

Resource Schema Mode

Validates individual Azure resource JSON schemas:

  • JSON Syntax Checking: Ensures valid JSON structure
  • Schema Structure Validation: Validates JSON Schema compliance (Draft-07)
  • Bicep Pattern Recognition: Identifies and validates Bicep-specific patterns
  • Resource Type Validation: Checks against known Azure resource types
  • API Version Validation: Ensures proper API version format (YYYY-MM-DD)

ARM Template Mode (NEW!)

Validates complete Azure Resource Manager deployment templates:

  • Template Structure Validation: Validates required fields ($schema, contentVersion, resources)
  • Resource Array Validation: Validates each resource in the template
  • Parameter Validation: Checks parameter types and required properties
  • Output Validation: Validates output definitions and types
  • Variables Validation: Ensures proper variable object structure
  • Auto-Detection: Automatically switches to template mode when ARM templates are detected
  • Comprehensive Reporting: Shows resource count, parameters, variables, and outputs

Template System

Each Bicep template includes:

  • ✅ Latest stable API versions (2023-2024)
  • ✅ Security best practices (HTTPS, TLS 1.2+, private by default)
  • ✅ Managed identity support where applicable
  • ✅ Comprehensive parameter validation
  • ✅ Descriptive outputs (IDs, FQDNs, connection info)
  • ✅ Tagging support
  • ✅ Well-documented with inline comments

Real-time Features

  • Live JSON Validation: Editor border changes color based on JSON validity
  • Instant Feedback: Validation results appear immediately
  • Template Preview: See generated Bicep from schemas
  • Export Options: Download as JSON, YAML, or Bicep

🛠️ Technical Details

Built With

Web Application

  • HTML5: Semantic markup and modern web standards
  • CSS3: Flexbox/Grid layouts, animations, responsive design
  • Vanilla JavaScript: ES6+ features
  • JSON Schema Draft-07: Industry-standard schema validation

Bicep Templates

  • Bicep Language: Latest syntax and features
  • Azure Resource Manager: ARM template backend
  • API Versions: 2023-2024 (latest stable)

Testing & CI/CD

  • Node.js: 18+ for test infrastructure
  • AJV: JSON Schema validator (v8)
  • GitHub Actions: Automated CI/CD pipeline
  • Trivy: Security scanning for IaC

Browser Compatibility

  • Chrome 70+
  • Firefox 65+
  • Safari 12+
  • Edge 79+

🔒 Security Best Practices

All Bicep templates follow Azure security best practices:

✅ Network Security

  • HTTPS-only enforcement
  • TLS 1.2 minimum (1.3 supported)
  • Private endpoints where applicable
  • Network isolation by default

✅ Identity & Access

  • Managed identities (System/User-assigned)
  • No hardcoded credentials
  • SSH keys only (no passwords for VMs)
  • Least privilege access patterns

✅ Data Protection

  • Encryption at rest
  • Encryption in transit
  • Soft delete enabled where supported
  • Backup configurations

✅ Compliance

  • Following Azure Well-Architected Framework
  • CIS Azure Benchmarks alignment
  • Regular API version updates

🧪 Testing

Run Schema Validation

npm test

Output:

🔍 Starting schema validation...

✅ appServicePlan.json: Valid schema
✅ azureFunctions.json: Valid schema
✅ keyVault.json: Valid schema
✅ sqlDatabase.json: Valid schema
✅ storageAccount.json: Valid schema
✅ virtualMachine.json: Valid schema
✅ virtualNetwork.json: Valid schema
✅ webApp.json: Valid schema

==================================================
📊 Validation Summary:
   Total schemas: 8
   ✅ Valid: 8
   ❌ Failed: 0
==================================================

Build All Templates

for file in templates/*.bicep; do
  echo "Building: $file"
  az bicep build --file "$file"
done

🤝 Contributing

We welcome contributions! Here's how to get started:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Setup

# Clone your fork
git clone https://github.com/yourusername/bicep-schema-builder.git
cd bicep-schema-builder

# Install dependencies
npm install

# Run tests
npm test

# Make your changes and test
az bicep build --file templates/your-template.bicep

# Commit and push
git add .
git commit -m "Your feature description"
git push origin feature/new-feature

Contribution Guidelines

  • Follow existing code style and conventions
  • Add tests for new functionality
  • Update documentation (README, inline comments)
  • Ensure all templates build successfully
  • Follow Azure naming conventions
  • Use latest stable API versions
  • Include security best practices

📝 Changelog

See docs/IMPROVEMENTS.md for detailed changelog and recent updates.

Recent Updates (v2.0.0)

  • 🆕 Added 4 new production Bicep templates
  • 🔧 Fixed critical storage account identity bug
  • ⬆️ Updated schemas with 2023-2024 API versions
  • 🧪 Added automated testing infrastructure
  • 🔄 Added CI/CD validation pipeline
  • 📚 Comprehensive documentation updates
  • 🔒 Enhanced security configurations

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔐 Azure Authentication

The tool uses MSAL.js (Microsoft Authentication Library) for browser-based sign-in with full MFA support. No backend server is required — authentication uses the OAuth 2.0 PKCE flow directly from the browser.

Setting up the Entra App Registration

  1. In the Azure portal, go to Microsoft Entra ID → App registrations → New registration.
  2. Set Name (e.g. bicep-schema-builder), Supported account types = Single tenant.
  3. Under Redirect URI, choose Single-page application (SPA) and enter:
    https://techaboo.github.io/bicep-schema-builder/
    
    Add http://localhost:3000 (or your local dev port) for local development.
  4. After creation, note the Application (client) ID and Directory (tenant) ID.
  5. Under API permissions, add:
    • Azure Service Management → user_impersonation (delegated)
    • Grant admin consent if required by your tenant.

Configuring authConfig.js

Open authConfig.js and set the following values at the top of the file:

const MSAL_CONFIG = {
  auth: {
    clientId: 'YOUR_CLIENT_ID',         // Application (client) ID
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    redirectUri: 'https://techaboo.github.io/bicep-schema-builder/',
  },
  ...
};

Set DEMO_MODE = false to enable real Azure sign-in. Keep DEMO_MODE = true for local development without credentials.

Required Azure Permissions

The signed-in user needs at least Reader on both subscriptions to list resources and validate templates. For deployments via the UI, Contributor on the target resource group is required.

Configuring OIDC for GitHub Actions CI

Instead of storing a long-lived AZURE_CREDENTIALS JSON secret, the CI workflow uses OIDC federated credentials (no client secret stored in GitHub).

  1. In your Entra app registration, go to Certificates & secrets → Federated credentials → Add credential.
  2. Choose GitHub Actions deploying Azure resources.
  3. Set:
    • Organization: techaboo
    • Repository: bicep-schema-builder
    • Entity type: Branch
    • Branch: main
  4. Add three Actions secrets to the repository (Settings → Secrets and variables → Actions):
    Secret name Value
    AZURE_CLIENT_ID Application (client) ID
    AZURE_TENANT_ID Directory (tenant) ID
    AZURE_SUBSCRIPTION_ID Target subscription ID
  5. Once confirmed working, remove the old AZURE_CREDENTIALS secret.

Note: The same app registration is used for both browser sign-in (MSAL) and CI/CD (OIDC). The federated credential is scoped to the main branch and does not require a client secret.


🙏 Acknowledgments

  • Azure Bicep team for the amazing IaC language
  • JSON Schema community for the validation standards
  • Microsoft Azure documentation team
  • All contributors to this project

🔗 Useful Links

📊 Project Status

Build Status Tests Templates Schemas Coverage Version


Made with ❤️ for the Azure Bicep community

Azure Professional Assessment Grade: B+ (85/100) - Production Ready ✅

About

Interactive tool for building and validating Azure Bicep

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages