io.Connect Desktop Seed Project

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

• io.Connect Desktop Seed Project
  • Overview
  • Quick Start
    • Prerequisites
    • Creating Your Project
    • Installation
    • Running in Development Mode
    • Building for Production
  • Project Structure
  • Configuration
    • Basic Settings
    • License Key
  • Customization
    • Applying Modifications
    • Changing io.CD System Config
    • Changing the Logo
    • Custom Applications
      • Using Template Applications
      • Creating Custom Applications
      • Managing Applications
  • Development
    • Installing or Updating components during development
  • Testing
    • Running Tests
    • Writing Tests
  • Building for Production
    • Build Commands
    • Build Output
      • Windows OS:
      • macOS:
      • Linux:
    • Code Signing
      • Windows Code Signing
        • Option 1: PFX Certificate File
        • Option 2: Certificate Store (e.g., DigiCert KeyLocker)
        • Option 3: Custom Script
      • macOS Code Signing
        • Code Signing Configuration
        • Notarization Configuration
    • CI/CD Integration
    • Auto-Updates
  • Troubleshooting
    • Common Issues
    • 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 [email protected]

Creating Your Project

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

Installation

cd your-project-name

# Install dependencies
npm install

# Install components
npm run setup

Running in Development Mode

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

Building for Production

# 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:

{
  "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:

{
  "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:

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

Example - Configure Logging:

{
  "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):

{
  "logging": {
    "level": "debug"
  },
  "features": {
    "devTools": true
  }
}

Build mode (modifications/build/iocd/config/system.json.merge):

{
  "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/:

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:

# 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

{
   "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

# 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

# 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:

# 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:

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:

# 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:

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, 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

# 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):

{
  "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 and Mono 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.

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

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

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

{
  "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:

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

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

// 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

{
  "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:

{
  "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:

// 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

{
  "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:

{
  "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:

// 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:

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)
• 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:

{
  "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:

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
• 💬 Community Forum
• 📧 Support Portal