Alokai VS Code Extension

A powerful VS Code extension for managing Alokai e-commerce projects with enhanced development workflow features.

🔗 Compatibility Matrix

🚀 Features

Store Management

• Visual Store Tree: Browse and manage your Alokai stores in a dedicated sidebar
• Drag & Drop: Reorganize stores by dragging them to change their parent structure
• Multi-Store Support: Work with multiple stores simultaneously in a single workspace

Development Workflow

• Build Management: Build individual stores with one click
• Dev Server Control: Start and stop development servers with visual status indicators
• Store Deployment: Deploy stores directly from the extension
• Terminal Integration: Automatic terminal management for running stores

File Operations

• File Override: Override files in the apps folder with context menu actions
• Source Navigation: Navigate between source files and their .out counterparts
• Diff Comparison: Compare files with their parent versions
• Auto-Sync: Automatically sync changes from .out files back to source files

Project Integration

• Configuration Management: Manage Alokai configuration files
• Browser Integration: Open stores in browser directly from VS Code
• Workspace Detection: Automatic detection of Alokai projects via alokai.config.json

📋 Requirements

• VS Code version 1.90.0 or higher
• An Alokai project with alokai.config.json in the workspace root
• Node.js and npm/pnpm for store operations

🛠️ Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Alokai Plugin"
4. Click Install

Alternatively, install from the VS Code Marketplace.

🎯 Getting Started

1. Open an Alokai Project: Open a folder containing an alokai.config.json file
2. View Stores: The Alokai sidebar will appear in the Activity Bar showing your stores
3. Manage Stores: Use the toolbar buttons to add, remove, build, or deploy stores
4. Development: Start dev servers and monitor their status with visual indicators

🔧 Configuration

The extension requires an alokai.config.json file in your workspace root. Example structure:

{
  "stores": {
    "store-id": {
      "name": "Store Name",
      "path": "./apps/store-directory"
      // ... other store configuration
    }
  }
}

📖 Usage

Store Operations

File Operations

Visual Indicators

• 🟢 Green Icon: Store is running in development mode
• 🟡 Yellow Icon: Store operation in progress
• ⚪ Default Icon: Store is idle

⌨️ Commands

All commands are prefixed with Alokai: and accessible via the Command Palette (Ctrl+Shift+P):

• Alokai: Build Store
• Alokai: Run Dev
• Alokai: Stop Dev
• Alokai: Deploy Store
• Alokai: Add Store
• Alokai: Remove Store
• Alokai: Open Store Config
• Alokai: View Store in Explorer
• Alokai: Refresh view
• Alokai: Open in Browser
• Alokai: Override File
• Alokai: View Parent File
• Alokai: View Diff With Parent File
• Alokai: Open Source File

🔄 Auto-Features

• Auto-sync: Changes in .out files are automatically synced to source files on save
• Terminal Management: Terminals are automatically closed when dev servers stop
• Configuration Watching: Extension automatically reloads when alokai.config.json changes
• Running Store Detection: Automatically detects and displays running stores

🐛 Troubleshooting

Extension Not Loading

• Ensure alokai.config.json exists in your workspace root
• Check that the configuration file has valid JSON syntax
• Verify VS Code version compatibility (≥1.90.0)

Stores Not Showing

• Refresh the view using the refresh button in the Alokai sidebar
• Check that your alokai.config.json has a stores property
• Ensure store paths in the configuration are correct

Dev Server Issues

• Verify Node.js and package manager (npm/pnpm) are installed
• Check that store directories contain valid package.json files
• Look at VS Code terminal output for error messages

📄 License

This project is licensed under the terms specified in the package.json file.

🔗 Links

• Alokai Documentation
• VS Code Extension Marketplace

Enjoy using the Alokai VS Code Extension! 🎉