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

$3

- 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

$3

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

$3

`bash
cd your-project-name

Install dependencies

npm install

Install components

npm run setup
`

$3

`bash


Start io.Connect Desktop in dev mode


npm run dev
`

$3

`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

$3

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.

$3

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

---

Customization

$3

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)

$3

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

$3

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

$3

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
`

$3

To install a component or update existing component while in development mode, use the following command:

`bash


Update components

iocd components install

Or using npm script (note the -- before the component name)

npm run components-install --
`

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 @

Or using npm script (note the -- before the component name)


npm run components-install -- @
`
---

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.

$3

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
`

$3

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

$3

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

$3

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

$3

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
};
`

$3

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

Build installer

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

$3

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:

`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

$3

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

$3

- 📚 Documentation
- 💬 Community Forum
- 📧 Support Portal
---