feat: electron app (#1586)

.github/workflows/client-app.yml

@@ -4,9 +4,19 @@ on:
   workflow_dispatch:
     inputs:
       version:
-        description: App Vesion
+        description: App Version
-        required: false
+        required: true
         default: 0.1.0
+      is-draft:
+        description: 'Draft Release?'
+        type: boolean
+        required: true
+        default: true
+      is-pre-release:
+        description: 'Pre Release? (labeled as "PreRelease")'
+        type: boolean
+        required: true
+        default: true
 
 permissions:
   actions: write
@@ -20,90 +30,150 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  create-release:
+  before-make:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
-    outputs:
-      release_id: ${{ steps.create-release.outputs.result }}
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - name: create release
-        id: create-release
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const { data } = await github.rest.repos.createRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              tag_name: `affine-client-v${{ github.event.inputs.version }}`,
-              name: `Affine Client v${{ github.event.inputs.version }}`,
-              body: 'Take a look at the assets to download and install this app.',
-              draft: true,
-              prerelease: false
-            })
-            return data.id
-
-  build-tauri:
-    needs: create-release
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, ubuntu-latest, windows-latest]
-
-    runs-on: ${{ matrix.platform }}
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version: 18
           cache: 'pnpm'
-      - run: pnpm i
+      - name: Install dependencies
+        run: yarn install
+        working-directory: apps/electron
 
-      - name: install dependencies (ubuntu only)
+      - name: before-make
-        if: matrix.platform == 'ubuntu-latest'
+        working-directory: apps/electron
-        run: |
+        run: yarn before-make
-          sudo apt-get update
+        env:
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
-      - name: install Rust stable
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
-        uses: dtolnay/rust-toolchain@stable
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
-
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
-      - name: Get rust cache
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
-        uses: Swatinem/rust-cache@v2
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-        id: rust-cache
+          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
-        with:
+
-          workspaces: |
+      - name: Upload Artifact (web-static)
-            apps/desktop/src-tauri
+        uses: actions/upload-artifact@v3
-
+        with:
-      - name: Upload to release on git tag Or output artifact path on nightly
+          name: before-make-web-static
-        uses: tauri-apps/tauri-action@v0
+          path: apps/electron/resources/web-static
-        id: tauri-action
+
+      - name: Upload Artifact (electron dist)
+        uses: actions/upload-artifact@v3
+        with:
+          name: before-make-electron-dist
+          path: apps/electron/dist
+
+  build-macos-x64:
+    needs: before-make
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: yarn install # that's right, yarn
+        working-directory: apps/electron
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-web-static
+          path: apps/electron/resources/web-static
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-electron-dist
+          path: apps/electron/dist
+
+      - name: make build
+        run: yarn make-macos-arm64
+        working-directory: apps/electron
+
+      - name: Save x64 artifacts
+        run: |
+          mkdir -p builds
+          mv apps/electron/out/make/AFFiNE.dmg ./builds/affine-darwin-x64-${{ github.event.inputs.version }}.dmg
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: affine-darwin-x64-builds
+          path: builds
+
+  build-macos-arm64:
+    needs: before-make
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: yarn install # that's right, yarn
+        working-directory: apps/electron
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-web-static
+          path: apps/electron/resources/web-static
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-electron-dist
+          path: apps/electron/dist
+
+      - name: make build
+        run: yarn make-macos-arm64
+        working-directory: apps/electron
+
+      - name: Save arm64 artifacts
+        run: |
+          mkdir -p builds
+          mv apps/electron/out/make/AFFiNE.dmg ./builds/affine-darwin-arm64-${{ github.event.inputs.version }}.dmg
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: affine-darwin-arm64-builds
+          path: builds
+
+  release:
+    needs: [build-macos-x64, build-macos-arm64]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download MacOS x64 Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: affine-darwin-x64-builds
+          path: ./
+
+      - name: Download MacOS arm64 Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: affine-darwin-arm64-builds
+          path: ./
+
+      - name: Create Release Draft
+        uses: softprops/action-gh-release@v1
         env:
-          CI_PULL_REQUEST: ${{ github.event_name == 'pull_request' }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          releaseId: ${{ needs.create-release.outputs.release_id }}
+          name: Desktop APP ${{ github.event.inputs.version }}
-
+          body: 'TODO: Add release notes here'
-  publish-release:
+          draft: ${{ github.event.inputs.is-draft }}
-    runs-on: ubuntu-latest
+          prerelease: ${{ github.event.inputs.is-pre-release }}
-    needs: [create-release, build-tauri]
+          files: |
-
+            ./VERSION
-    steps:
+            ./*.zip
-      - name: publish pre release
+            ./*.dmg
-        id: publish-pre-release
+            ./*.exe
-        uses: actions/github-script@v6
+            ./*.nupkg
-        env:
+            ./RELEASES
-          release_id: ${{ needs.create-release.outputs.release_id }}
+            ./*.AppImage
-        with:
+            ./*.apk
-          script: |
-            github.rest.repos.updateRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              release_id: process.env.release_id,
-              draft: false,
-              prerelease: true
-            })

.gitignore

@@ -60,7 +60,3 @@ module-resolve.cjs
 # Cache
 .eslintcache
 next-env.d.ts
-
-# generated assets
-apps/desktop/public/affine-out
-apps/desktop/public/preload

.prettierignore

@@ -1 +1,2 @@
 pnpm-lock.yaml
+

apps/desktop/.gitignore

@@ -0,0 +1,3 @@
+# generated assets
+public/affine-out
+public/preload

apps/electron/.gitignore

@@ -0,0 +1,13 @@
+*.autogen.*
+dist
+
+resources/web-static
+
+# yarn (3)
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

apps/electron/.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-3.4.1.cjs
+nodeLinker: node-modules

apps/electron/README.md

@@ -0,0 +1,24 @@
+# AFFiNE Electron App
+
+# ⚠️ NOTE ⚠️
+
+Due to PNPM related issues, this project is currently using **yarn 3**.
+See https://github.com/electron/forge/issues/2633
+
+## Development
+
+```
+# in project root, start web app at :8080
+pnpm dev
+
+# in /apps/electron, start electron app
+pnpm dev
+```
+
+## Credits
+
+Most of the boilerplate code is generously borrowed from the following
+
+- [vite-electron-builder](https://github.com/cawa-93/vite-electron-builder)
+- [Turborepo basic example](https://github.com/vercel/turborepo/tree/main/examples/basic)
+- [yerba](https://github.com/t3dotgg/yerba)

apps/electron/forge.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  packagerConfig: {
+    name: 'AFFiNE',
+    icon: './resources/icons/icon.icns',
+  },
+  makers: [
+    {
+      name: '@electron-forge/maker-dmg',
+      config: {
+        format: 'ULFO',
+        icon: './resources/icons/icon.icns',
+        name: 'AFFiNE',
+      },
+    },
+  ],
+};

apps/electron/layers/main/src/index.ts

@@ -0,0 +1,57 @@
+import './security-restrictions';
+
+import { app } from 'electron';
+
+import { restoreOrCreateWindow } from './main-window';
+import { registerProtocol } from './protocol';
+
+/**
+ * Prevent multiple instances
+ */
+const isSingleInstance = app.requestSingleInstanceLock();
+if (!isSingleInstance) {
+  app.quit();
+  process.exit(0);
+}
+
+app.on('second-instance', restoreOrCreateWindow);
+
+/**
+ * Disable Hardware Acceleration for more power-save
+ */
+app.disableHardwareAcceleration();
+
+/**
+ * Shout down background process if all windows was closed
+ */
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+/**
+ * @see https://www.electronjs.org/docs/v14-x-y/api/app#event-activate-macos Event: 'activate'
+ */
+app.on('activate', restoreOrCreateWindow);
+
+/**
+ * Create app window when background process will be ready
+ */
+app
+  .whenReady()
+  .then(registerProtocol)
+  .then(restoreOrCreateWindow)
+  .catch(e => console.error('Failed create window:', e));
+
+/**
+ * Check new app version in production mode only
+ */
+// FIXME: add me back later
+// if (import.meta.env.PROD) {
+//   app
+//     .whenReady()
+//     .then(() => import('electron-updater'))
+//     .then(({ autoUpdater }) => autoUpdater.checkForUpdatesAndNotify())
+//     .catch(e => console.error('Failed check updates:', e));
+// }

apps/electron/layers/main/src/main-window.ts

@@ -0,0 +1,78 @@
+import { BrowserWindow } from 'electron';
+import electronWindowState from 'electron-window-state';
+import { join } from 'path';
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+async function createWindow() {
+  const mainWindowState = electronWindowState({
+    defaultWidth: 1000,
+    defaultHeight: 800,
+  });
+
+  const browserWindow = new BrowserWindow({
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    show: false, // Use 'ready-to-show' event to show window
+    webPreferences: {
+      contextIsolation: true,
+      sandbox: false,
+      webviewTag: false, // The webview tag is not recommended. Consider alternatives like iframe or Electron's BrowserView. https://www.electronjs.org/docs/latest/api/webview-tag#warning
+      spellcheck: false, // FIXME: enable?
+      preload: join(__dirname, '../../preload/dist/index.js'),
+    },
+  });
+
+  mainWindowState.manage(browserWindow);
+
+  /**
+   * If you install `show: true` then it can cause issues when trying to close the window.
+   * Use `show: false` and listener events `ready-to-show` to fix these issues.
+   *
+   * @see https://github.com/electron/electron/issues/25012
+   */
+  browserWindow.on('ready-to-show', () => {
+    browserWindow.show();
+
+    if (IS_DEV) {
+      browserWindow.webContents.openDevTools();
+    }
+  });
+
+  browserWindow.on('close', e => {
+    e.preventDefault();
+    browserWindow.destroy();
+    // TODO: gracefully close the app, for example, ask user to save unsaved changes
+  });
+
+  /**
+   * URL for main window.
+   */
+  const pageUrl =
+    IS_DEV && process.env.DEV_SERVER_URL !== undefined
+      ? process.env.DEV_SERVER_URL
+      : 'file://./index.html'; // see protocol.ts
+
+  await browserWindow.loadURL(pageUrl);
+
+  return browserWindow;
+}
+
+/**
+ * Restore existing BrowserWindow or Create new BrowserWindow
+ */
+export async function restoreOrCreateWindow() {
+  let window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+
+  if (window === undefined) {
+    window = await createWindow();
+  }
+
+  if (window.isMinimized()) {
+    window.restore();
+  }
+
+  window.focus();
+}

apps/electron/layers/main/src/protocol.ts

@@ -0,0 +1,16 @@
+import { protocol } from 'electron';
+import { join } from 'path';
+
+export function registerProtocol() {
+  protocol.interceptFileProtocol('file', (request, callback) => {
+    const url = request.url.replace(/^file:\/\//, '');
+    if (url.startsWith('./')) {
+      const realpath = join(
+        __dirname,
+        '../../../resources/web-static',
+        decodeURIComponent(url)
+      );
+      callback(realpath);
+    }
+  });
+}

apps/electron/layers/main/src/security-restrictions.ts

@@ -0,0 +1,35 @@
+import { app, shell } from 'electron';
+
+app.on('web-contents-created', (_, contents) => {
+  /**
+   * Block navigation to origins not on the allowlist.
+   *
+   * Navigation is a common attack vector. If an attacker can convince the app to navigate away
+   * from its current page, they can possibly force the app to open web sites on the Internet.
+   *
+   * @see https://www.electronjs.org/docs/latest/tutorial/security#13-disable-or-limit-navigation
+   */
+  contents.on('will-navigate', (event, url) => {
+    // Prevent navigation
+    event.preventDefault();
+    shell.openExternal(url).catch(console.error);
+  });
+
+  /**
+   * Hyperlinks to allowed sites open in the default browser.
+   *
+   * The creation of new `webContents` is a common attack vector. Attackers attempt to convince the app to create new windows,
+   * frames, or other renderer processes with more privileges than they had before; or with pages opened that they couldn't open before.
+   * You should deny any unexpected window creation.
+   *
+   * @see https://www.electronjs.org/docs/latest/tutorial/security#14-disable-or-limit-creation-of-new-windows
+   * @see https://www.electronjs.org/docs/latest/tutorial/security#15-do-not-use-openexternal-with-untrusted-content
+   */
+  contents.setWindowOpenHandler(({ url }) => {
+    // Open default browser
+    shell.openExternal(url).catch(console.error);
+
+    // Prevent creating new window in application
+    return { action: 'deny' };
+  });
+});

apps/electron/layers/main/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "sourceMap": false,
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "strict": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "../../types/**/*.d.ts", "index.ts"]
+}

apps/electron/layers/preload/src/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @module preload
+ */
+
+import { contextBridge } from 'electron';
+
+import { sha256sum } from './sha256sum';
+
+// Expose version number to renderer
+contextBridge.exposeInMainWorld('yerba', { version: 0.1 });
+
+/**
+ * The "Main World" is the JavaScript context that your main renderer code runs in.
+ * By default, the page you load in your renderer executes code in this world.
+ *
+ * @see https://www.electronjs.org/docs/api/context-bridge
+ */
+
+/**
+ * After analyzing the `exposeInMainWorld` calls,
+ * `packages/preload/exposedInMainWorld.d.ts` file will be generated.
+ * It contains all interfaces.
+ * `packages/preload/exposedInMainWorld.d.ts` file is required for TS is `renderer`
+ *
+ * @see https://github.com/cawa-93/dts-for-context-bridge
+ */
+
+/**
+ * Safe expose node.js API
+ * @example
+ * window.nodeCrypto('data')
+ */
+contextBridge.exposeInMainWorld('nodeCrypto', { sha256sum });

apps/electron/layers/preload/src/sha256sum.ts

@@ -0,0 +1,6 @@
+import type { BinaryLike } from 'crypto';
+import { createHash } from 'crypto';
+
+export function sha256sum(data: BinaryLike) {
+  return createHash('sha256').update(data).digest('hex');
+}

apps/electron/layers/preload/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "sourceMap": false,
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "strict": true,
+    "isolatedModules": true,
+
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "../../types/**/*.d.ts"]
+}

apps/electron/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@affine/electron",
+  "productName": "AFFiNE",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "node scripts/dev.mjs",
+    "prod": "NODE_ENV=production node scripts/dev.mjs",
+    "before-make": "zx scripts/before-make.mjs",
+    "make": "electron-forge make",
+    "make-macos-arm64": "electron-forge make --platform=darwin --arch=arm64",
+    "postinstall": "ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs"
+  },
+  "config": {
+    "forge": "./forge.config.js"
+  },
+  "main": "./dist/layers/main/index.js",
+  "devDependencies": {
+    "@electron-forge/cli": "^6.0.5",
+    "@electron-forge/core": "^6.0.5",
+    "@electron-forge/core-utils": "^6.0.5",
+    "@electron-forge/maker-deb": "^6.0.5",
+    "@electron-forge/maker-dmg": "^6.0.5",
+    "@electron-forge/maker-squirrel": "^6.0.5",
+    "@electron-forge/maker-zip": "^6.0.5",
+    "@electron-forge/shared-types": "^6.0.5",
+    "@electron/rebuild": "^3.2.10",
+    "dts-for-context-bridge": "^0.7.1",
+    "electron": "^23.1.3",
+    "esbuild": "^0.17.8",
+    "zx": "^7.2.0"
+  },
+  "dependencies": {
+    "electron-window-state": "^5.0.3"
+  },
+  "packageManager": "yarn@3.4.1"
+}

apps/electron/scripts/before-make.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env zx
+import 'zx/globals';
+
+import path from 'node:path';
+
+import * as esbuild from 'esbuild';
+
+import { mainConfig, preloadConfig } from './common.mjs';
+
+const repoRootDir = path.join(__dirname, '..', '..', '..');
+const electronRootDir = path.join(__dirname, '..');
+const publicDistDir = path.join(electronRootDir, 'resources');
+const affineWebDir = path.join(repoRootDir, 'apps', 'web');
+const affineWebOutDir = path.join(affineWebDir, 'out');
+const publicAffineOutDir = path.join(publicDistDir, `web-static`);
+
+console.log('build with following dir', {
+  repoRootDir,
+  electronRootDir,
+  publicDistDir,
+  affineSrcDir: affineWebDir,
+  affineSrcOutDir: affineWebOutDir,
+  publicAffineOutDir,
+});
+
+// copy web dist files to electron dist
+
+// step 0: clean up
+await cleanup();
+console.log('Clean up done');
+
+// step 1: build web (nextjs) dist
+cd(repoRootDir);
+await $`pnpm i -r`;
+await $`pnpm build`;
+await $`pnpm export`;
+await fs.move(affineWebOutDir, publicAffineOutDir, { overwrite: true });
+
+// step 2: build electron resources
+await buildLayers();
+console.log('Build layers done');
+
+/// --------
+/// --------
+/// --------
+async function cleanup() {
+  await fs.emptyDir(publicAffineOutDir);
+  await fs.emptyDir(path.join(electronRootDir, 'layers', 'main', 'dist'));
+  await fs.emptyDir(path.join(electronRootDir, 'layers', 'preload', 'dist'));
+  await fs.remove(path.join(electronRootDir, 'out'));
+}
+
+async function buildLayers() {
+  await esbuild.build({
+    ...preloadConfig,
+  });
+
+  await esbuild.build({
+    ...mainConfig,
+    define: {
+      'process.env.NODE_ENV': `"production"`,
+    },
+  });
+}

apps/electron/scripts/common.mjs

@@ -0,0 +1,30 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const __dirname = new URL('.', import.meta.url).pathname;
+
+const { node } = JSON.parse(
+  fs.readFileSync(
+    path.join(__dirname, '../electron-vendors.autogen.json'),
+    'utf-8'
+  )
+);
+
+/** @type {import('esbuild').BuildOptions} */
+export const mainConfig = {
+  entryPoints: ['layers/main/src/index.ts'],
+  outdir: 'dist/layers/main',
+  bundle: true,
+  target: `node${node}`,
+  platform: 'node',
+  external: ['electron'],
+};
+
+export const preloadConfig = {
+  entryPoints: ['layers/preload/src/index.ts'],
+  outdir: 'dist/layers/preload',
+  bundle: true,
+  target: `node${node}`,
+  platform: 'node',
+  external: ['electron'],
+};

apps/electron/scripts/dev.mjs

@@ -0,0 +1,115 @@
+import { spawn } from 'node:child_process';
+
+import { generateAsync } from 'dts-for-context-bridge';
+import electronPath from 'electron';
+import * as esbuild from 'esbuild';
+
+import { mainConfig, preloadConfig } from './common.mjs';
+
+/** @type 'production' | 'development'' */
+const mode = (process.env.NODE_ENV = process.env.NODE_ENV || 'development');
+
+/** Messages on stderr that match any of the contained patterns will be stripped from output */
+const stderrFilterPatterns = [
+  // warning about devtools extension
+  // https://github.com/cawa-93/vite-electron-builder/issues/492
+  // https://github.com/MarshallOfSound/electron-devtools-installer/issues/143
+  /ExtensionLoadWarning/,
+];
+
+// hard-coded for now:
+// fixme(xp): report error if app is not running on port 8080
+process.env.DEV_SERVER_URL = `http://localhost:8080`;
+
+/** @type {ChildProcessWithoutNullStreams | null} */
+let spawnProcess = null;
+
+function spawnOrReloadElectron() {
+  if (spawnProcess !== null) {
+    spawnProcess.off('exit', process.exit);
+    spawnProcess.kill('SIGINT');
+    spawnProcess = null;
+  }
+
+  spawnProcess = spawn(String(electronPath), ['.']);
+
+  spawnProcess.stdout.on(
+    'data',
+    d => d.toString().trim() && console.warn(d.toString(), { timestamp: true })
+  );
+  spawnProcess.stderr.on('data', d => {
+    const data = d.toString().trim();
+    if (!data) return;
+    const mayIgnore = stderrFilterPatterns.some(r => r.test(data));
+    if (mayIgnore) return;
+    console.error(data, { timestamp: true });
+  });
+
+  // Stops the watch script when the application has been quit
+  spawnProcess.on('exit', process.exit);
+}
+
+async function main() {
+  async function watchPreload(onInitialBuild) {
+    const preloadBuild = await esbuild.context({
+      ...preloadConfig,
+      plugins: [
+        {
+          name: 'affine-dev:reload-app-on-preload-change',
+          setup(build) {
+            let initialBuild = false;
+            build.onEnd(() => {
+              generateAsync({
+                input: 'layers/preload/src/**/*.ts',
+                output: 'layers/preload/preload.autogen.d.ts',
+              });
+              if (initialBuild) {
+                console.log(`[preload] has changed`);
+                spawnOrReloadElectron();
+              } else {
+                initialBuild = true;
+                onInitialBuild();
+              }
+            });
+          },
+        },
+      ],
+    });
+    await preloadBuild.watch();
+  }
+
+  async function watchMain() {
+    const mainBuild = await esbuild.context({
+      ...mainConfig,
+      define: {
+        'process.env.NODE_ENV': `"${mode}"`,
+        'process.env.DEV_SERVER_URL': `"${process.env.DEV_SERVER_URL}"`,
+      },
+      plugins: [
+        {
+          name: 'affine-dev:reload-app-on-main-change',
+          setup(build) {
+            let initialBuild = false;
+            build.onEnd(() => {
+              if (initialBuild) {
+                console.log(`[main] has changed, [re]launching electron...`);
+              } else {
+                initialBuild = true;
+              }
+              spawnOrReloadElectron();
+            });
+          },
+        },
+      ],
+    });
+    await mainBuild.watch();
+  }
+
+  await watchPreload(async () => {
+    await watchMain();
+    spawnOrReloadElectron();
+    console.log(`Electron is started, watching for changes...`);
+  });
+}
+
+main();

apps/electron/scripts/update-electron-vendors.mjs

@@ -0,0 +1,17 @@
+/**
+ * This script should be run in electron context
+ * @example
+ *  ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs
+ */
+
+import { writeFileSync } from 'fs';
+
+const electronRelease = process.versions;
+
+const node = electronRelease.node.split('.')[0];
+const chrome = electronRelease.v8.split('.').splice(0, 2).join('');
+
+writeFileSync(
+  './electron-vendors.autogen.json',
+  JSON.stringify({ chrome, node })
+);

apps/electron/types/env.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Describes all existing environment variables and their types.
+ * Required for Code completion and type checking
+ *
+ * Note: To prevent accidentally leaking env variables to the client, only variables prefixed with `VITE_` are exposed to your Vite-processed code
+ *
+ * @see https://github.com/vitejs/vite/blob/cab55b32de62e0de7d7789e8c2a1f04a8eae3a3f/packages/vite/types/importMeta.d.ts#L62-L69 Base Interface
+ * @see https://vitejs.dev/guide/env-and-mode.html#env-files Vite Env Variables Doc
+ */
+interface ImportMetaEnv {
+  /**
+   * The value of the variable is set in scripts/watch.js and depend on layers/main/vite.config.js
+   */
+  readonly DEV_SERVER_URL: undefined | string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package.json

@@ -8,6 +8,7 @@
     "dev": "pnpm --filter @affine/app dev",
     "dev:ac": "NODE_API_SERVER=ac pnpm --filter @affine/app dev",
     "dev:local": "NODE_API_SERVER=local pnpm --filter @affine/app dev",
+    "dev:app": "pnpm --filter @affine/electron dev:app",
     "build": "pnpm --filter @affine/app build",
     "build:client": "pnpm --filter @affine/client-app build:app",
     "build:storybook": "pnpm -r build-storybook",

pnpm-workspace.yaml

@@ -1,5 +1,6 @@
 packages:
   # apps folder for multiple platform clients
   - 'apps/*'
+  - '!apps/electron'
   # all packages in direct subdirs of packages/
   - 'packages/*'