# io.Connect Desktop Seed Project

> A seed project for developing and building io.Connect Desktop based products

- [io.Connect Desktop Seed Project](#ioconnect-desktop-seed-project)
  - [Overview](#overview)
  - [Quick Start](#quick-start)
    - [Prerequisites](#prerequisites)
    - [Creating Your Project](#creating-your-project)
    - [Installation](#installation)
    - [Running in Development Mode](#running-in-development-mode)
    - [Building for Production](#building-for-production)
  - [Project Structure](#project-structure)
  - [Configuration](#configuration)
    - [Basic Settings](#basic-settings)
    - [License Key](#license-key)
  - [Customization](#customization)
    - [Applying Modifications](#applying-modifications)
    - [Changing io.CD System Config](#changing-iocd-system-config)
    - [Changing the Logo](#changing-the-logo)
    - [Custom Applications](#custom-applications)
      - [Using Template Applications](#using-template-applications)
      - [Creating Custom Applications](#creating-custom-applications)
      - [Managing Applications](#managing-applications)
  - [Development](#development)
    - [Installing or Updating components during development](#installing-or-updating-components-during-development)
  - [Testing](#testing)
    - [Running Tests](#running-tests)
    - [Writing Tests](#writing-tests)
  - [Building for Production](#building-for-production-1)
    - [Build Commands](#build-commands)
    - [Build Output](#build-output)
      - [**Windows OS**:](#windows-os)
      - [**macOS**:](#macos)
      - [**Linux**:](#linux)
    - [Code Signing](#code-signing)
      - [Windows Code Signing](#windows-code-signing)
        - [Option 1: PFX Certificate File](#option-1-pfx-certificate-file)
        - [Option 2: Certificate Store (e.g., DigiCert KeyLocker)](#option-2-certificate-store-eg-digicert-keylocker)
        - [Option 3: Custom Script](#option-3-custom-script)
      - [macOS Code Signing](#macos-code-signing)
        - [Code Signing Configuration](#code-signing-configuration)
        - [Notarization Configuration](#notarization-configuration)
    - [CI/CD Integration](#cicd-integration)
    - [Auto-Updates](#auto-updates)
  - [Troubleshooting](#troubleshooting)
    - [Common Issues](#common-issues)
    - [Getting Help](#getting-help)

---

## Overview

This seed project provides everything needed to build, test, and deploy your branded version of io.Connect Desktop distribution. It includes pre-configured components, build scripts, and CI/CD integration examples.

**What's Included:**
- ✅ Licensed io.Connect Desktop components
- ✅ Build and packaging scripts
- ✅ Configuration templates
- ✅ Automated testing framework
- ✅ CI/CD pipeline examples
- ✅ Code signing setup guides

---

## Quick Start

### Prerequisites

- **Node.js**: v22 or higher
- **npm**: v9 or higher
- **Operating System**: Windows 10+ or macOS 11+
- **License**: This seed project requires a valid io.Connect Desktop license to use the included components. For licensing questions, contact sales@interop.io

### Creating Your Project

```bash
npx @interopio/iocd-cli@latest create # Follow prompts to set up your project
```

### Installation

```bash
cd your-project-name

# Install dependencies
npm install

# Install components
npm run setup
```

### Running in Development Mode

```bash
# Start io.Connect Desktop in dev mode
npm run dev
```

### Building for Production

```bash
# Build production installer
npm run build
```

---

## Project Structure

```
.
├── apps/                    # Custom applications (add your own)
├── components/              # Downloaded io.Connect Desktop components
│   ├── iocd/               # Main io.Connect Desktop component (required)
│   └── [other-components]/ # Additional licensed components (devTools, demos, etc.)
├── config/                  # Configuration files
│   ├── forge.config.js     # Electron Forge configuration
│   ├── iocd.cli.config.json # CLI configuration
│   └── iocd.license.key    # License key file (optional)
├── modifications/           # Customizations and overrides
│   ├── base/               # Applied in all modes (dev/build)
│   ├── dev/                # Applied only in development mode
│   └── build/              # Applied only during production builds
├── tests/                   # Automated tests
│   └── basic.test.js       # Example Playwright test suite
├── .github/workflows/       # CI/CD pipeline examples
├── package.json
└── README.md
```

---

## Configuration

### Basic Settings

Product metadata is configured in your `package.json` file:

```json
{
  "name": "your-product-slug",
  "version": "1.0.0",
  "description": "Your product description",
  "productName": "Your Product Name",
  "author": "Your Company"
}
```

These values are automatically populated by the create script and are used for:
- **name** → Project identifier (folder name, exe name, package name, etc.)
- **productName** → Display name shown to users
- **description** → Product description in installers and metadata
- **author** → Company name (also used to auto-generate copyright)
- **version** → Application version

CLI-specific settings go in `config/iocd.cli.config.json`:

```json
{
  "components": {
    "store": {
      "github": {
        "repo": "interopio/iocd-components/releases"
      }
    },
    "list": {
      "iocd": "latest"
    }
  }
}
```

> **Tip**: You can view the full JSON schema for `iocd.cli.config.json` in `node_modules/@interopio/iocd-cli/dist/schemas/iocd.cli.config.schema.json`. Add a `$schema` property to your config file for IDE autocompletion and validation.

### License Key

Set your license key using:
- **Environment variable**: `IOCD_LICENSE_KEY`
- **Config file**: `config/iocd.license.key`

---

## Customization

### Applying Modifications

Modifications are the recommended way to customize io.Connect Desktop components without directly editing component files. They allow you to change configurations, add applications, modify assets, and override default behavior while preserving your changes across component updates.

**Key Concepts:**

- **Modifications are stored separately** from components in the `modifications/` folder
- **Changes persist** when components are updated or reinstalled
- **Mode-specific modifications** allow different behavior in dev vs. build mode
- **Files are copied or merged** into components when running `iocd dev` or `iocd build`

**Directory Structure:**

```
modifications/
├── base/                     # Applied in all modes
│   └── iocd/
│       ├── config/
│       ├── assets/
│       └── apps/
├── dev/                      # Applied only in dev mode
│   └── iocd/
│       └── config/
└── build/                    # Applied only in build mode
    └── iocd/
        └── config/
```

**Processing Order:**

1. **Base modifications** (`modifications/base/`) are applied first
2. **Mode-specific modifications** (`modifications/dev/` or `modifications/build/`) are applied second, overriding base when needed

**Common Use Cases:**

- Replace logos and icons in `modifications/base/iocd/assets/`
- Configure system settings in `modifications/base/iocd/config/`
- Add application definitions in `modifications/base/iocd/apps/`
- Use different URLs for dev (localhost) vs. build (file://) in mode-specific folders

**Special File Types:**

- **`.json.merge`** - Deep merges with existing JSON instead of replacing
- **`.delete`** - Removes the corresponding file
- **`.replace`** marker - Replaces entire directory (place in directory to replace)

### Changing io.CD System Config

The io.Connect Desktop system configuration (`system.json`) controls platform-wide settings like auto-updates, logging, and feature flags. To customize these settings, create modification files that merge with the default configuration.

**Location:**
```
modifications/base/iocd/config/system.json.merge
```

**Example - Enable Auto-Updates:**

```json
{
  "autoUpdater": {
    "enabled": true,
    "updateSource": {
      "type": "Service",
      "baseUrl": "https://updates.yourcompany.com"
    },
    "interval": 60
  }
}
```

**Example - Configure Logging:**

```json
{
  "logging": {
    "level": "info",
    "appender": "default"
  }
}
```

**Mode-Specific Configuration:**

Use different settings for dev vs. build mode:

**Dev mode** (`modifications/dev/iocd/config/system.json.merge`):
```json
{
  "logging": {
    "level": "debug"
  },
  "features": {
    "devTools": true
  }
}
```

**Build mode** (`modifications/build/iocd/config/system.json.merge`):
```json
{
  "logging": {
    "level": "error"
  },
  "features": {
    "telemetry": true
  }
}
```

**Important Notes:**

- Use `.merge` extension to deep merge with existing configuration
- Without `.merge`, the file completely replaces the original
- Changes are applied when running `iocd dev` or `iocd build`
- Environment variables like `${PRODUCT_VERSION}` are automatically expanded

### Changing the Logo

Replace the default logo files in `modifications/base/iocd/assets/images/`:

```bash
modifications/base/iocd/assets/
└── images/
    ├── logo.ico   # Windows executable icon (multiple resolutions)
    ├── logo.icns  # macOS app bundle icon (multiple resolutions)
    └── logo.png   # Application icon (used in UI)
```

**Requirements:**
- **logo.ico**: Windows icon file with multiple sizes (16x16, 32x32, 48x48, 256x256)
- **logo.icns**: macOS icon file with multiple sizes (use Icon Composer or iconutil)
- **logo.png**: PNG file, recommended size 512x512

### Custom Applications

io.Connect Desktop includes several built-in applications that you can replace with your own custom versions:

- **Workspaces** - Workspace management UI
- **Groups** - Window grouping UI  
- **Splash Screen** - Application splash screen
- **Launchpad** - Application launcher
- **Notifications** - Notification center

Applications in the `apps/` folder allow you to customize these built-in apps or add entirely new functionality. This approach keeps your core platform applications in the same repository, eliminating the need to manage them across multiple repositories and simplifying version control, deployment, and coordination.

#### Using Template Applications

Template applications can be selected during project creation or added later:

```bash
# Add template application
iocd apps add workspaces

# List available templates
iocd apps list --available
```

**Available templates:**
- `workspaces` - Workspace management
- `groups` - Window grouping
- `splash-screen` - Loading screen
- `launchpad` - Application launcher

Once added, build your implementation on top of the template in the `apps/` folder.

#### Creating Custom Applications

For custom applications, create a folder in `apps/` with an `iocd.app.json` file:

```
apps/
└── my-custom-app/
    ├── iocd.app.json       # Defines modifications and build behavior
    ├── package.json
    └── src/
```

**Example `iocd.app.json`:**

In this example:
- **Dev mode** (triggered by `iocd dev` or `npm run dev`): Executes a `start` script (typically starts a dev server with hot-reload) and copies the development app configuration so the app definition points to the dev server
- **Build mode** (triggered by `iocd build` or `npm run build`): Executes a `build` script (typically builds optimized production assets) and copies the final built assets to the modifications folder
  
```json
{
   "dev": {
        "script": "start",
        "modifications": [
            {
                "source": "/config/my-app-dev.json",
                "destination": "/modifications/dev/iocd/config/apps/my-app.json"
            }
        ]
    },
    "build": {
        "script": "build",
        "modifications": [
            {
                "source": "/dist/",
                "destination": "/modifications/build/iocd/assets/my-app"
            }
        ]
    }
}
```

The `iocd.app.json` file defines:
- **base**: Array of modifications applied in all modes
- **dev**: Object with optional `script` (npm script name) and `modifications` array
- **build**: Object with optional `script` (npm script name) and `modifications` array

#### Managing Applications

```bash
# Install application dependencies
iocd apps install

# Start applications in dev mode
iocd apps dev

# Build applications for production
iocd apps build
```

---

## Development

Development mode allows you to quickly start io.Connect Desktop with all your configured changes and applications, enabling rapid iteration and testing during development.

When you run dev mode, the CLI will:
1. **Apply all relevant modifications** - Base modifications and dev-specific modifications are copied to components
2. **Start all applications** - Runs the dev script for each app (typically starting dev servers with hot-reload)
3. **Launch io.Connect Desktop** - Starts the platform with all changes applied

```bash
# Start io.Connect Desktop in dev mode
iocd dev

# Or using npm script
npm run dev
```

### Installing or Updating components during development
To install a component or update existing component while in development mode, use the following command:

```bash
# Update components
iocd components install <component-name>

# Or using npm script (note the -- before the component name)
npm run components-install -- <component-name>
```

This command will download and install the latest version of the specified component.

If you want to install a specific version, use:

```bash
iocd components install <component-name>@<version>

# Or using npm script (note the -- before the component name)
npm run components-install -- <component-name>@<version>
```
---

## Testing

Testing is based on **WebdriverIO** and depends on the `@interopio/wdio-iocd-service` package, which enables starting and controlling io.Connect Desktop from WebDriver. This allows you to create and run comprehensive end-to-end (E2E) tests for your io.Connect Desktop application.

### Running Tests

Tests are written in the `tests/` folder and can be executed using:

```bash
# Run all tests
npm test

# Or using the WebdriverIO CLI directly
npx wdio run ./wdio.config.ts
```

### Writing Tests

Tests are written using WebdriverIO syntax with the io.Connect Desktop service handling application lifecycle. Example test structure:

```javascript
describe('io.Connect Desktop Application', () => {
  it('should launch successfully', async () => {
    // Your test logic here
    // The @interopio/wdio-iocd-service handles starting/stopping io.Connect Desktop
  });
});
```

Add your test files to the `tests/` directory. They'll run automatically in CI/CD pipelines.

---

## Building for Production

The build process creates production-ready installers for distribution. It orchestrates multiple steps to produce signed, optimized packages ready for deployment.

**What happens during build:**

1. **Build all applications** - Executes build scripts for each app in production mode
2. **Reinstall components** - Downloads and installs fresh component versions
3. **Apply all modifications** - Copies base and build-specific modifications to components
4. **Code sign binaries** - Signs executables and libraries (if configured)
5. **Create build artifacts** - Generates installers (`.exe` setup on Windows, `.dmg` on macOS, `.zip` archives)
6. **Publish to release server** - Uploads artifacts for auto-updates (if configured)

**Build System:**

The build process is based on [Electron Forge](https://www.electronforge.io/), a complete toolchain for building and packaging Electron applications. The main configuration is located in `config/forge.config.js`, where you can customize makers, publishers, and build behavior.

### Build Commands

```bash
# Build installer
iocd build

# Or using npm script
npm run build

# Build options
iocd build --output custom/path         # Custom output directory
iocd build --publish-only               # Skip build, only publish
iocd build --skip-install               # Skip component installation
```

### Build Output

Depending on OS you can configure Electron Forge makers to produce different types of artifacts. We have tested the following configurations:

#### **Windows OS**:
1. Squirrel.Windows installer (`.exe` setup)
* You can change the install GIF by replacing the **install.gif** in assets folder.
* The app will be installed into **%LocalAppData%\YourAppName**. Squirrel is opinionated and does not allow changing this path.
* By default the UserData folder generated by the platform will stay in **%LocalAppData%\interop.io\io.Connect Desktop** folder. You can change this by add the following system.json.merge-win32 file in modifications/base/iocd/config/system.json.merge-win32 (the merge file has win32 suffix which indicates it is only applied on Windows OS):

```json
{
  "paths": {
    "userData": "%LocalAppData%/${PRODUCT_SLUG}/UserData/%IO_CD_ENV%-%IO_CD_REGION%",
    "cache": {
      "location": "%LocalAppData%/${PRODUCT_SLUG}/Cache/%IO_CD_ENV%-%IO_CD_REGION%",
      "copy": true
    }
  }
}
```
1. Portable ZIP archive

#### **macOS**:
1. DMG disk image
2. ZIP archive

#### **Linux**
You can build Windows OS installers on Linux, but [Wine](https://www.winehq.org/) and [Mono](https://www.mono-project.com/) must be installed on the runner. 

**NOTE:** It may also be necessary to install the `zip` command, because it is used to create ZIP archives, and you may also have to alias `wine64` as `wine`. Linux does not support code signing for Windows OS.

The full list of makers is available in the [Electron Forge documentation](https://www.electronforge.io/config/makers).

### Code Signing

Code signing ensures that your application is trusted by operating systems and users can verify it hasn't been tampered with. Both Windows and macOS require code signing for distribution.

#### Windows Code Signing

##### Option 1: PFX Certificate File

```json
{
  "win": {
    "codeSign": {
      "type": "signtool",
      "pfxPath": "path/to/certificate.pfx",
      "pfxPassword": "${WIN_PFX_PASS}"
    }
  }
}
```

##### Option 2: Certificate Store (e.g., DigiCert KeyLocker)

```json
{
  "win": {
    "codeSign": {
      "type": "signtool",
      "certificateSha1": "${WIN_CERT_SHA1}"
    }
  }
}
```

**Important**: 
- If using DigiCert KeyLocker, run `smctl windows certsync` before building to sync certificates to Windows store
- Either `pfxPath` or `certificateSha1` must be provided (not both)
- Set type to `"off"` to disable code signing

##### Option 3: Custom Script

For advanced signing scenarios, you can provide a custom signing script:

```json
{
  "win": {
    "codeSign": {
      "type": "custom",
      "customCodeSignScriptPath": "path/to/custom-sign.js"
    }
  }
}
```

Your custom script should export a function that receives the binary path and config:

```javascript
// custom-sign.js
module.exports = async function(binaryPath, config) {
  // Your custom signing logic here
  console.log(`Signing ${binaryPath}`);
  // Use any signing tool or API you need
};
```

#### macOS Code Signing

##### Code Signing Configuration

```json
{
  "mac": {
    "codeSign": {
      "type": "keychain",
      "identity": "Developer ID Application: Your Company (TEAM_ID)"
    }
  }
}
```

**Options**:
- `type`: `"keychain"` (use keychain certificate), `"certificate"` (use .p12 file), `"custom"` (custom script), or `"off"` (no signing)
- `identity`: Developer ID Application identity or SHA-1 hash (optional - auto-selected if not specified)
- `keychain`: Keychain name or path (optional - uses default keychain if not specified)

**Custom Script Option:**

For advanced signing scenarios, you can provide a custom signing script:

```json
{
  "mac": {
    "codeSign": {
      "type": "custom",
      "customCodeSignScriptPath": "path/to/custom-sign.js"
    }
  }
}
```

Your custom script should export a function that receives the app bundle path and config:

```javascript
// custom-sign.js
module.exports = async function(appBundlePath, config) {
  // Your custom signing logic here
  console.log(`Signing ${appBundlePath}`);
  // Use any signing tool or API you need
};
```

##### Notarization Configuration

```json
{
  "mac": {
    "notarization": {
      "type": "notarytool",
      "appleId": "${MAC_NOTARIZATION_APPLE_ID}",
      "appleIdPassword": "${MAC_NOTARIZATION_APPLE_ID_PASSWORD}",
      "appleTeamId": "${MAC_NOTARIZATION_APPLE_TEAM_ID}"
    }
  }
}
```

**Important**:
- Notarization is required for distribution outside Mac App Store
- Use app-specific password (not your regular Apple ID password)
- Generate app-specific password at appleid.apple.com
- Set type to `"off"` to skip notarization (for development builds)

**Custom Script Option:**

For advanced notarization scenarios, you can provide a custom notarization script:

```json
{
  "mac": {
    "notarization": {
      "type": "custom",
      "customNotarizationScriptPath": "path/to/custom-notarize.js"
    }
  }
}
```

Your custom script should export a function that receives the app bundle path and config:

```javascript
// custom-notarize.js
module.exports = async function(appBundlePath, config) {
  // Your custom notarization logic here
  console.log(`Notarizing ${appBundlePath}`);
  // Use any notarization tool or API you need
};
```

### CI/CD Integration

Continuous Integration and Continuous Deployment (CI/CD) automates building, testing, and publishing your io.Connect Desktop application. The seed project includes an GitHub Actions workflow located in `.github/workflows/build.yml`. It produces signed installers and can publish them to a release server.

It is possible to build a Windows installer on Linux. Below is an example Dockerfile that sets up a Linux container to build a Windows installer:
```Docker
FROM node:lts-alpine

# install wine
RUN apk update
RUN apk add --no-cache wine dpkg
RUN dpkg --add-architecture i386
RUN alias wine=win64 # electron-forge uses wine command, so we need an alias

# Install Mono
RUN apk update
RUN apk add mono-dev

# Install zip command
# This is necessary for this Dockerfile, but may not be necessary for a Linux
# runner in CI.
RUN apk update
RUN apk add zip

# Generate io.Connect Desktop project
RUN npx @interopio/iocd-cli@latest create \
    --non-interactive \
    --product-name "io.Connect Desktop" \
    --folder-name io-connect-desktop \
    --license-key <paste license key here>

# Build installer
WORKDIR /io-connect-desktop
RUN npm install
RUN npm run setup
RUN npm run build
```

### Auto-Updates

Setting up auto-updates allows your users to automatically receive new versions of your application.

**Requirements:**

Auto-updates are supported for specific build artifact types:
- **Windows**: Squirrel.Windows installers (`.exe` setup files)
- **macOS**: ZIP archives

Other build outputs (portable ZIP on Windows, DMG on macOS) do not support automatic updates.

**Setup Steps:**

**1. Set up a release server**

You can use existing solutions or build your own:
- **Existing services**: Nucleus, Hazel, or other update servers (see [Electron update services](https://www.electronjs.org/docs/latest/tutorial/updates#using-other-update-services))
- **Custom solution**: Build your own update server following Squirrel protocols

**2. Configure io.Connect Desktop to check the update server**

Create or modify `modifications/base/iocd/config/system.json.merge`:

```json
{
  "autoUpdater": {
    "enabled": true,
    "updateSource": {
      "type": "Service",
      "baseUrl": "https://updates.yourcompany.com"
    },
    "interval": 60
  }
}
```

**3. Publish updates**

Choose one of the following approaches:

**Option A: Automatic publishing during build** - Configure publishers in `config/forge.config.js`:

```javascript
publishers: [
  {
    name: '@electron-forge/publisher-electron-release-server',
    config: {
      baseUrl: 'https://updates.yourcompany.com',
      username: process.env.RELEASE_SERVER_USERNAME,
      password: process.env.RELEASE_SERVER_PASSWORD
    }
  }
]
```

**Option B: Manual upload** - After building, manually upload the installer artifacts to your release server.

**4. Test auto-updates**

- Install your application using the signed installer
- Publish a new version to your update server
- Launch the application and verify it detects and installs the update

---

## Troubleshooting

### Common Issues

**Build fails with "License not found"**
- Ensure `IOCD_LICENSE_KEY` environment variable is set
- Or create `config/iocd.license.key` file with your license key

**Code signing fails on Windows**
- Verify certificate is valid and not expired
- Check that `pfxPassword` is correct
- For certificate store signing: Ensure `smctl windows certsync` was run first
- Verify exactly one of `pfxPath` or `certificateSha1` is configured (not both)

**macOS notarization fails**
- Use app-specific password, not regular Apple ID password
- Generate app-specific password at appleid.apple.com
- Verify Apple Developer Program membership is active
- Check that `appleTeamId` matches your Developer Team ID

**Application won't start in dev mode**
- Run `iocd setup` to verify component installation
- Check that `components/iocd` directory exists
- Review logs in system temp directory

**Components not downloading**
- Verify network connectivity
- Check component store configuration in `config/iocd.cli.config.json`
- For GitHub store: Ensure repository access and credentials are correct

### Getting Help

- 📚 [Documentation](https://docs.interop.io/desktop)
- 💬 [Community Forum](https://community.interop.io)
- 📧 [Support Portal](https://support.interop.io)
---
