265 lines
5.1 KiB
Markdown
265 lines
5.1 KiB
Markdown
# XAMPP Control Panel
|
||
|
||
A web-based GUI to control XAMPP on Linux — start, stop, restart, reload and check the status of Apache, MySQL and FTP with a single click.
|
||
|
||
---
|
||
|
||
## Requirements
|
||
|
||
- Linux (Debian / Ubuntu / Mint or similar)
|
||
- XAMPP installed at `/opt/lampp/`
|
||
- Python 3 (`python3 --version`)
|
||
- A modern browser (Firefox, Chrome, etc.)
|
||
|
||
---
|
||
|
||
## Folder structure
|
||
|
||
Place all files inside `~/xampp-gui/`:
|
||
|
||
```
|
||
~/xampp-gui/
|
||
├── index.html ← Web UI
|
||
├── xampp-backend.py ← Python backend (port 5050)
|
||
├── http-server.py ← HTTP server (port 8080)
|
||
├── xampp-gui.sh ← Launcher script
|
||
└── README.md
|
||
```
|
||
|
||
Create the folder:
|
||
|
||
```bash
|
||
mkdir -p ~/xampp-gui
|
||
```
|
||
|
||
---
|
||
|
||
## Setup
|
||
|
||
### 1. Make the launcher executable
|
||
|
||
```bash
|
||
chmod +x ~/xampp-gui/xampp-gui.sh
|
||
```
|
||
|
||
### 2. Optional: passwordless sudo for XAMPP
|
||
|
||
The backend runs XAMPP commands via `sudo`. To avoid repeated password prompts, add a sudoers rule:
|
||
|
||
```bash
|
||
sudo visudo
|
||
```
|
||
|
||
Add at the end (replace `yourusername`):
|
||
|
||
```
|
||
yourusername ALL=(ALL) NOPASSWD: /opt/lampp/*
|
||
yourusername ALL=(ALL) NOPASSWD: /opt/lampp/bin/*
|
||
```
|
||
|
||
Save: `Ctrl+O` → `Enter` → `Ctrl+X`
|
||
|
||
If you skip this step, the launcher will ask for your password once via `sudo -v` at startup, which is also fine.
|
||
|
||
---
|
||
|
||
## Launch
|
||
|
||
```bash
|
||
bash ~/xampp-gui/xampp-gui.sh
|
||
```
|
||
|
||
This will:
|
||
|
||
1. Kill any old processes on ports 5050 and 8080
|
||
2. Ask for your sudo password once (`sudo -v`)
|
||
3. Start the Python backend on port **5050**
|
||
4. Start a local HTTP server on port **8080**
|
||
5. Open the browser automatically at `http://localhost:8080/`
|
||
|
||
> **Important:** Always open the UI via `http://localhost:8080/`.
|
||
> Do **not** open `index.html` by double-clicking — the browser will block backend requests from `file://` pages.
|
||
|
||
---
|
||
|
||
## Manual start (two terminals)
|
||
|
||
**Terminal 1 – Backend:**
|
||
|
||
```bash
|
||
python3 ~/xampp-gui/xampp-backend.py
|
||
```
|
||
|
||
**Terminal 2 – HTTP server:**
|
||
|
||
```bash
|
||
python3 ~/xampp-gui/http-server.py
|
||
```
|
||
|
||
Then open: `http://localhost:8080/`
|
||
|
||
---
|
||
|
||
## Port overview
|
||
|
||
| Port | Service |
|
||
|------|---------|
|
||
| 5050 | Python backend (XAMPP commands) |
|
||
| 8080 | HTTP server (Web UI) |
|
||
| 80 | Apache (XAMPP) |
|
||
| 3306 | MySQL (XAMPP) |
|
||
| 21 | FTP / ProFTPD (XAMPP) |
|
||
|
||
---
|
||
|
||
## Troubleshooting
|
||
|
||
**Backend not reachable:**
|
||
|
||
```bash
|
||
lsof -i :5050
|
||
kill -9 $(lsof -t -i :5050) 2>/dev/null
|
||
python3 ~/xampp-gui/xampp-backend.py &
|
||
```
|
||
|
||
**Command hangs / timeout:**
|
||
|
||
```bash
|
||
sudo -v
|
||
bash ~/xampp-gui/xampp-gui.sh
|
||
```
|
||
|
||
**Port 8080 already in use:**
|
||
|
||
```bash
|
||
kill -9 $(lsof -t -i :8080) 2>/dev/null
|
||
python3 ~/xampp-gui/http-server.py &
|
||
```
|
||
|
||
---
|
||
|
||
## Desktop launcher (.desktop file)
|
||
|
||
To add XAMPP Control Panel to your application menu or desktop:
|
||
|
||
```bash
|
||
nano ~/.local/share/applications/xampp-control.desktop
|
||
```
|
||
|
||
Paste (replace `yourusername`):
|
||
|
||
```ini
|
||
[Desktop Entry]
|
||
Version=1.0
|
||
Type=Application
|
||
Name=XAMPP Control Panel
|
||
Comment=XAMPP Web GUI starten
|
||
Exec=bash -c "cd /home/yourusername/xampp-gui && bash xampp-gui.sh"
|
||
Icon=/opt/lampp/htdocs/favicon.ico
|
||
Terminal=true
|
||
StartupNotify=false
|
||
Categories=Development;WebDevelopment;
|
||
```
|
||
|
||
Then make it executable and refresh the application menu:
|
||
|
||
```bash
|
||
chmod +x ~/.local/share/applications/xampp-control.desktop
|
||
update-desktop-database ~/.local/share/applications/
|
||
```
|
||
|
||
> **Note:** `Terminal=true` is required — the launcher asks for your sudo password once on startup.
|
||
|
||
---
|
||
|
||
## Desktop app (Electron)
|
||
|
||
You can optionally package the Web UI as a native desktop app using Electron.
|
||
|
||
### Install Node.js and Electron
|
||
|
||
```bash
|
||
sudo apt install nodejs npm -y
|
||
```
|
||
|
||
### Create the app folder
|
||
|
||
```bash
|
||
mkdir -p ~/xampp-gui-app
|
||
cd ~/xampp-gui-app
|
||
npm init -y
|
||
npm install electron --save-dev
|
||
```
|
||
|
||
### Create `main.js`
|
||
|
||
```js
|
||
const { app, BrowserWindow } = require('electron');
|
||
const { spawn } = require('child_process');
|
||
const path = require('path');
|
||
const os = require('os');
|
||
|
||
let win, backend, server;
|
||
|
||
function startServices() {
|
||
const guiDir = path.join(os.homedir(), 'xampp-gui');
|
||
backend = spawn('python3', [path.join(guiDir, 'xampp-backend.py')], { stdio: 'ignore' });
|
||
server = spawn('python3', [path.join(guiDir, 'http-server.py')], { stdio: 'ignore' });
|
||
}
|
||
|
||
function createWindow() {
|
||
win = new BrowserWindow({
|
||
width: 1200,
|
||
height: 800,
|
||
autoHideMenuBar: true,
|
||
title: 'XAMPP Control Panel'
|
||
});
|
||
setTimeout(() => win.loadURL('http://localhost:8080/index.html'), 1500);
|
||
}
|
||
|
||
app.whenReady().then(() => { startServices(); createWindow(); });
|
||
|
||
app.on('window-all-closed', () => {
|
||
if (backend) backend.kill();
|
||
if (server) server.kill();
|
||
app.quit();
|
||
});
|
||
```
|
||
|
||
### Update `package.json`
|
||
|
||
```json
|
||
{
|
||
"name": "xampp-control-panel",
|
||
"version": "1.0.0",
|
||
"main": "main.js",
|
||
"scripts": {
|
||
"start": "electron ."
|
||
},
|
||
"devDependencies": {
|
||
"electron": "^latest"
|
||
}
|
||
}
|
||
```
|
||
|
||
### Run the desktop app
|
||
|
||
```bash
|
||
cd ~/xampp-gui-app
|
||
npm start
|
||
```
|
||
|
||
For the Electron variant, the `.desktop` file looks like this:
|
||
|
||
```ini
|
||
[Desktop Entry]
|
||
Version=1.0
|
||
Type=Application
|
||
Name=XAMPP Control Panel
|
||
Comment=XAMPP Web GUI starten
|
||
Exec=bash -c "cd /home/yourusername/xampp-gui-app && npm start"
|
||
Icon=/opt/lampp/htdocs/favicon.ico
|
||
Terminal=false
|
||
StartupNotify=false
|
||
Categories=Development;WebDevelopment;
|
||
``` |