Alokai VS Code Extension

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

Feature request and bug report

If you have any feature requests or encounter bugs while using the Alokai VS Code Extension, please let us know! Your feedback is invaluable for improving the extension.

For bug reports and feature requests, please use the GitHub Issues.

🔗 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
• Alokai: Report Issue

🔄 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! 🎉