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
Alokai Plugin Version |
Alokai Ecosystem |
Node.js |
VS Code Version |
0.0.3 - 0.0.5 |
1.x |
>= 22 |
≥ 1.100.x |
🚀 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
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Alokai Plugin"
- Click Install
Alternatively, install from the VS Code Marketplace.
🎯 Getting Started
- Open an Alokai Project: Open a folder containing an
alokai.config.json
file
- View Stores: The Alokai sidebar will appear in the Activity Bar showing your stores
- Manage Stores: Use the toolbar buttons to add, remove, build, or deploy stores
- 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
Action |
Description |
Access |
Build Store |
Build a specific store |
Store context menu or toolbar |
Start Dev |
Start development server |
Store context menu (idle stores) |
Stop Dev |
Stop development server |
Store context menu (running stores) |
Deploy |
Deploy store |
Store context menu or toolbar |
Add Store |
Add new store to configuration |
Toolbar |
Remove Store |
Remove store from configuration |
Toolbar |
File Operations
Action |
Description |
Access |
Override File |
Create override in apps folder |
File explorer context menu |
View Parent File |
Open the parent/source file |
File editor context menu |
Compare with Parent |
Show diff with parent file |
File editor context menu |
Open Source File |
Navigate to source from .out file |
.out file context menu |
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
Enjoy using the Alokai VS Code Extension! 🎉