Zora for Windows v1.0.0

Learn how Zora for windows operates and the technologies behind it.

Creating an Electron App with XAMPP Integration

Welcome to this comprehensive guide on creating an Electron app with XAMPP integration. In this guide, you will learn how to:

1. Initialize an Electron project.

2. Write a main script to start and stop XAMPP.

3. Configure electron-builder for packaging.

4. Create an installer that includes XAMPP installation.

Let's get started!

---

Chapter 1: Project Initialization

Step 1: Create a Project Directory

First, create a directory for your project:

mkdir my-electron-app
cd my-electron-app

Step 2: Initialize a Node.js Project

Initialize a new Node.js project by running the following command:

npm init -y

Step 3: Install Electron

Install Electron as a development dependency:

npm install electron --save-dev

---

Chapter 2: Writing the Main Script

Step 1: Create main.js

Create a file named main.js in your project directory. This file will contain the main script for your Electron application.

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec, execFile } = require('child_process');
const fs = require('fs');

function isXAMPPInstalled() {
  const xamppControlScript = path.join('C:', 'xampp', 'xampp_start.exe');
  return fs.existsSync(xamppControlScript);
}

function installXAMPP(callback) {
  const xamppInstallerPath = path.join(__dirname, 'resources', 'xampp_installer.exe');

  execFile(xamppInstallerPath, ['/S'], (error, stdout, stderr) => {
    if (error) {
      console.error(`Error installing XAMPP: ${error}`);
      return;
    }
    console.log(`XAMPP installed: ${stdout}`);
    if (stderr) {
      console.error(`XAMPP stderr: ${stderr}`);
    }
    callback();
  });
}

function startXAMPP() {
  const xamppControlScript = path.join('C:', 'xampp', 'xampp_start.exe');

  exec(xamppControlScript, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error starting XAMPP: ${error}`);
      return;
    }
    console.log(`XAMPP started: ${stdout}`);
    if (stderr) {
      console.error(`XAMPP stderr: ${stderr}`);
    }
  });
}

function stopXAMPP() {
  const xamppControlScript = path.join('C:', 'xampp', 'xampp_stop.exe');

  exec(xamppControlScript, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error stopping XAMPP: ${error}`);
      return;
    }
    console.log(`XAMPP stopped: ${stdout}`);
    if (stderr) {
      console.error(`XAMPP stderr: ${stderr}`);
    }
  });
}

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL('http://localhost'); // Point this to your PHP local server URL
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', () => {
  if (isXAMPPInstalled()) {
    startXAMPP();
    createWindow();
  } else {
    installXAMPP(() => {
      startXAMPP();
      createWindow();
    });
  }
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    stopXAMPP();
    app.quit();
  }
});

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

---

Chapter 3: Configuring package.json

Step 1: Update package.json with Specific Electron Version

Update your package.json to include the Electron and electron-builder versions. Make sure to replace ^latest-version with actual versions.

{
  "name": "zora-dummy",
  "version": "1.0.0",
  "description": "Zora Dummy - An Electron app with XAMPP integration",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Milton Vafana",
  "license": "MIT",
  "devDependencies": {
    "electron": "^24.0.0",
    "electron-builder": "^24.6.0"
  },
  "build": {
    "appId": "com.example.zoradummy",
    "productName": "Zora Dummy",
    "directories": {
      "output": "dist"
    },
    "files": [
      "package.json",
      "main.js",
      "resources/**",
      "node_modules/**"
    ],
    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerHeaderIcon": "path/to/icon.ico",
      "include": "include.nsh"
    }
  }
}

Chapter 4: Creating include.nsh

Step 1: Create include.nsh

Create an include.nsh file in the root of your project to handle the custom XAMPP installation steps.

!macro customInit
  ; Check if XAMPP is installed
  ReadRegStr $0 HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\XAMPP" "DisplayName"
  StrCmp $0 "" +3
  MessageBox MB_OK "XAMPP is already installed."
  Goto skipInstallXAMPP
  ; Install XAMPP
  ExecWait '"$INSTDIR\resources\xampp_installer.exe" /S'
  MessageBox MB_OK "XAMPP has been installed."
  skipInstallXAMPP:
!macroend

Step 2: Ensure XAMPP Installer is in resources Directory

Place the XAMPP installer executable in a resources directory within your project:

project-root/
├── main.js
├── package.json
├── resources/
│   └── xampp_installer.exe
├── include.nsh
└── ...

---

Chapter 5: Building the Installer

Step 1: Build the Installer

Run the build command:

npm run build

This command will use electron-builder to create an installer for your Electron application. The resulting installer will be located in the dist directory.

---

Book Summary

This book provided a detailed guide on creating an Electron app that integrates with XAMPP, including how to:

1. Initialize an Electron project.

2. Write the main script to manage XAMPP.

3. Configure electron-builder for packaging.

4. Create an installer that includes XAMPP installation.