1 Introduction & Key Features
XAMPP Meta Panel is a Visual Studio Code extension developed by Dwi Bakti N Dev/Roy to unify all XAMPP controls within the editor. Developers no longer need to switch windows just to start Apache, check error logs, or run artisan commands.
This extension doesn't just mimic the native XAMPP Control Panel features; it adds powerful features specifically designed for modern workflows: Laravel framework support, integrated terminal for WhatsApp Bot, and cross-device testing capabilities with one click.
Neural Network Server Concept
Like an interconnected neural network, XAMPP Meta Panel connects all server components (Apache, MySQL, PHP, Node.js) in one integrated panel. Each node (service) can be activated, monitored, and configured independently while remaining connected in a single ecosystem.
Instant Start/Stop
Control Apache, MySQL, FileZilla, and Tomcat with one button without leaving VSCode.
Auto-Detect Laravel
Automatically detects Laravel projects and provides an instant artisan serve button.
Fix Mobile 403
Fix the "Access Forbidden" error when accessing localhost from a phone with a one-click fix.
Config & Logs Native
Open php.ini, my.ini, and error logs directly in the VSCode editor tab.
WhatsApp Bot Ready
Integrated terminal to run Node.js/Python WhatsApp bots without additional applications.
Embedded Terminal
Run PHP, Composer, NPM, and other commands directly from the panel without a separate cmd.
Database Manager
Access phpMyAdmin and MySQL CLI with one click from the sidebar panel.
Security Quick Fix
Automatically fix XAMPP security configurations including firewall and root access.
2 Installation & Configuration Guide
This extension is lightweight (less than 500KB) and can be installed via the VSCode Marketplace in seconds.
System Requirements
| Component | Minimum | Recommended |
|---|---|---|
| VSCode | v1.75.0+ | v1.85+ |
| XAMPP | v7.4+ | v8.2+ |
| PHP | v7.4+ | v8.2+ |
| Node.js (for Bot) | v16+ | v20 LTS |
| Operating System | Windows 7 | Windows 11 |
Installation Steps
Make sure the latest version of VSCode is installed on your system.
Press Ctrl + Shift + X or click the Extensions icon in the left sidebar.
Type "XAMPP Meta Panel" in the search bar. Make sure the publisher is RoyHtml.
Wait until the installation process is complete. The XAMPP icon will appear in the Activity Bar.
The XAMPP path setting will be automatically detected. If not, open Settings and set xampp.metaPanel.xamppPath.
ext install RoyHtml.xampp-manager
// Or using CLI
code --install-extension RoyHtml.xampp-manager
Auto-Detect Path
XAMPP Meta Panel automatically detects the XAMPP installation location at common paths: C:\xampp, D:\xampp, or C:\Program Files\xampp. If XAMPP is installed in a custom location, you need to set the path manually.
3 Basic Usage
After installation, the XAMPP Meta Panel icon will appear in the VSCode Activity Bar (left sidebar). Here is how to access and use the panel:
Opening the Meta Panel
Ctrl+Shift+P → Type "XAMPP: Open Meta Panel" → Enter
// Method 2: Activity Bar
Click the XAMPP icon in the VSCode left sidebar
// Method 3: Keyboard Shortcut
Ctrl+Alt+X (default, can be customized)
Main Panel Features
| Feature | Description | Shortcut |
|---|---|---|
| Start Apache | Start the Apache web server | Ctrl+Alt+A |
| Start MySQL | Start the MariaDB database | Ctrl+Alt+M |
| Start All | Start all services at once | Ctrl+Alt+S |
| Stop All | Stop all services | Ctrl+Alt+Q |
| Open phpMyAdmin | Open phpMyAdmin in the browser | Ctrl+Alt+D |
| Fix Mobile 403 | Fix LAN access from other devices | Panel UI |
| Open Config | Open configuration files in the editor | Panel UI |
| View Logs | View error and access logs | Panel UI |
Tip: Draggable Panel
The Meta Panel tab can be dragged to any area in VSCode. Place it on the right sidebar for a more comfortable layout, or in the bottom panel for monitoring alongside the terminal.
4 Laravel & PHP Framework Integration
One of the most powerful features of XAMPP Meta Panel is its ability to automatically detect and manage Laravel projects. You no longer need to open a separate CMD just to run php artisan serve.
Laravel Workflow with Meta Panel
Auto-Detect
Panel scans the workspace folder for the artisan file
One-Click Serve
Artisan Serve button appears automatically in the panel
Hot Reload
Code changes are instantly refreshed in the browser
Comparison: Plain PHP vs Laravel
| Aspect | PHP Native | Laravel Project |
|---|---|---|
| Auto-Detection | Detects index.php file |
Detects artisan file |
| Run Command | php -S localhost:8000 |
php artisan serve |
| Panel Menu | Standard Run Serve | Artisan Serve + Migration + Seeder |
| Database | Manual setup | Auto-detect .env |
| Route List | Not available | artisan route:list button |
Available Artisan Commands
php artisan serve
# Run migration
php artisan migrate
# Run seeder
php artisan db:seed
# View route list
php artisan route:list
# Clear cache
php artisan config:cache
Free Directory
You don't need to move your project to the htdocs folder. XAMPP Meta Panel runs the PHP Built-in Server or Artisan Serve from any directory on your system.
5 WhatsApp Chat Bot Integration
XAMPP Meta Panel provides an ideal environment for developing and running WhatsApp bots. With integrated terminals and easy service management, you can run the full stack (web server + database + bot runtime) from one place.
WhatsApp Bot Architecture with XAMPP Meta Panel
WhatsApp Web API
Baileys / whatsapp-web.js running on Node.js via Meta Panel terminal
AI Engine (Python/Node)
OpenAI API / Local LLM for smart message processing
MariaDB / MySQL
Chat history storage, user data, and sessions via XAMPP MySQL
Laravel Backend
Monitoring dashboard, webhooks, and API management
Vercel Deployment
Deploy source code (.zip) or .html To run plain PHP scripts on your computer, also serves as an API dashboard.
Quick Start: WhatsApp Bot
Make sure the database is running to store sessions and message logs.
Use the integrated terminal (Ctrl+`) that is already connected to the workspace.
Run the following commands to set up a Node.js project:
mkdir wa-bot && cd wa-bot
# Initialize package
npm init -y
# Install WhatsApp library
npm install @whiskeysockets/baileys pino
# Install AI helper (optional)
npm install openai
Scan the QR Code that appears in the terminal with your WhatsApp, and the bot is ready to run!
Meta Panel Advantages for Bot Development
- Monitor MySQL and Apache status in real-time while the bot is running
- Quickly restart database services without leaving the editor
- Access phpMyAdmin for bot data inspection
- Integrated terminal supports multi-instance (bot + web + worker)
- Fix Mobile 403 enables webhook testing from mobile devices
6 Cross-Device Testing (Mobile & Laptop)
XAMPP by default blocks access from external IPs, causing the "Access Forbidden / 403" error when you try to open localhost from a smartphone. XAMPP Meta Panel solves this problem with the Fix Mobile 403 feature that works in one click.
Complete Mobile Testing Guide
Make sure your laptop and phone are connected to the same WiFi or hotspot.
Open Command Prompt, type:
# Find the "IPv4 Address" line under the WiFi adapter
# Example: 192.168.1.15
Make sure the web server is running before proceeding.
This button will automatically modify the httpd-xampp.conf file to allow access from local IPs.
Open the browser on your phone, type the laptop IP in the address bar:
http://192.168.1.15/my-project
# For Laravel:
http://192.168.1.15:8000
Security
The Fix Mobile 403 feature opens LAN access for development purposes. Do not use it on a public network. After testing, it is recommended to restore the configuration to its original state (click the "Restore Security" button).
What Does "Fix Mobile 403" Do?
Technically, this feature modifies the httpd-xampp.conf file located in
C:\xampp\apache\conf\extra\. The changes made:
Require local
# AFTER (Allow LAN access):
Require all granted
Allow from 192.168.
7 Advanced Configuration
XAMPP Meta Panel provides quick access to all important configuration files. Click the Config button next to each service to open the file in the VSCode editor tab.
Available Configuration Files
| Service | File | Location | Function |
|---|---|---|---|
| Apache | httpd.conf |
apache/conf/ | Main web server configuration |
| Apache | httpd-xampp.conf |
apache/conf/extra/ | Security & access control |
| Apache | httpd-vhosts.conf |
apache/conf/extra/ | Virtual hosts |
| PHP | php.ini |
php/ | PHP runtime configuration |
| MySQL | my.ini |
mysql/bin/ | Database server configuration |
VSCode Settings for Meta Panel
{
"xampp.metaPanel.xamppPath": "C:\\xampp",
"xampp.metaPanel.autoStart": false,
"xampp.metaPanel.defaultPort": 80,
"xampp.metaPanel.showNotifications": true,
"xampp.metaPanel.phpVersion": "8.2"
}
Changing the Apache Port
If port 80 is already used by another application (IIS, Skype, VMware), you can change it:
Click Config → httpd.conf from the panel.
Find Listen 80 and change it to
Listen 8080. Also find ServerName localhost:80 and change it to ServerName localhost:8080.
Stop and Start Apache again from the panel. Access via http://localhost:8080.
8 Comparison & Statistics
A comprehensive comparison between Standard XAMPP, Laragon, Awan Server V5, and XAMPP + Meta Panel.
Platform Capability Score
Access Speed & Ease of Use
Full Comparison Table
| Criteria | Standard XAMPP | Laragon | Awan Server V5 | XAMPP + Meta Panel |
|---|---|---|---|---|
| Laravel Support | Manual (CMD) | Auto Vhost | Web Panel | 1-Click UI in VSCode |
| Android/LAN Testing | Error 403 | Good | Large Scale | Auto Fix Mobile 403 |
| WA Bot / AI | Separate Install | Built-in Tools | Heavy Optimization | Integrated VSCode Terminal |
| RAM Consumption (Idle) | ~50MB | ~10MB | ~150MB+ | Follows XAMPP Base |
| Startup Time | ~15 seconds | ~5 seconds | ~20 seconds | ~8 seconds (from VSCode) |
| Multi-Version PHP | Manual | Automatic | Limited | Via Config Panel |
| SSL/HTTPS | Manual Setup | Auto SSL | Support | Config + Quick Setup |
9 WhatsApp Bot Performance Analysis
The following charts show the advantages of XAMPP Meta Panel in facilitating the development and deployment of WhatsApp Chat Bots.
Feature Advantages for WhatsApp Bot (Line Chart)
Time Required per Task (Minutes)
Efficiency Summary
- 78% faster in initial bot setup compared to manual methods
- 65% reduction in time for debugging database issues
- 90% easier to restart services during development
- 3x more productive thanks to terminal and panel integration in one editor
WA Bot Workflow with Meta Panel
10 Troubleshooting (Q&A)
Error: "Apache Shutdown Unexpectedly"
90% of cases are caused by Port 80 or Port 443 already being used by another application.
Solution via Meta Panel: Click Config → httpd.conf. Change
Listen 80 to Listen 8080. Save
and restart Apache.
Error: "MySQL cannot start"
Usually occurs because MySQL data is corrupt or port 3306 is conflicting.
Solution: Open Config → my.ini, change port=3306 to port=3307. If it fails,
open mysql/data and delete the files ib_logfile0
and ib_logfile1.
Error: "php artisan serve" fails to run
PHP might not be detected in your system's PATH.
Solution: Meta Panel automatically uses XAMPP's PHP.
If necessary, set xampp.metaPanel.xamppPath manually.
Extension does not appear in the sidebar
Right-click on the Activity Bar, make sure "XAMPP Meta Panel" is checked. If it's not there, try reloading VSCode.
WhatsApp QR Code does not appear in the terminal
Make sure the terminal is using cmd or PowerShell. Git Bash sometimes does not render QR Codes correctly.
Tip: Clear XAMPP Cache
If the page doesn't update, try deleting the xampp/tmp folder and restart Apache.