feat: electron desktop app without express server (#1136)

* feat: add electron app

* refactor: using different approach

* chore: update commit hash to 02621e3545

* fix: working dev but prod showing not found and lint fix

* fix: add icon

* fix: resolve server file load issue

* fix: eslint and prettier wip

* fix: only load server build once

* fix: forward request for other ports

* fix: use cloudflare {} to avoid crash

* fix: no need for appLogger

* fix: forward cookie

* fix: update script and update preload loading path

* chore: minor update for appId

* fix: store and load all cookies

* refactor: split main/index.ts

* refactor: group electron main files into two folders

* fix: update electron build configs

* fix: update auto update feat

* fix: vite-plugin-node-polyfills need to be in dependencies for dmg version to work

* ci: trigger build for electron branch

* ci: mark draft if it's from branch commit

* ci: add icons for windows and linux

* fix: update icons for windows

* fix: add author in package.json

* ci: use softprops/action-gh-release@v2

* fix: use path to join

* refactor: refactor path logic for working in both mac and windows

* fix: still need vite-plugin-node-polyfills dependencies

* fix: update vite-electron.config.ts

* ci: sign mac app

* refactor: assets folder

* ci: notarization

* ci: add NODE_OPTIONS

* ci: window only nsis dist

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/electron.yml

@@ -0,0 +1,91 @@
+name: Electron Build and Release
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - electron
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+        node-version: [18.18.0]
+      fail-fast: false
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9.14.4
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # Install Linux dependencies
+      - name: Install Linux dependencies
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y rpm
+
+      # Build
+      - name: Build Electron app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          NODE_OPTIONS: "--max_old_space_size=4096"
+        run: |
+          if [ "$RUNNER_OS" == "Windows" ]; then
+            pnpm run electron:build:win
+          elif [ "$RUNNER_OS" == "macOS" ]; then
+            pnpm run electron:build:mac
+          else
+            pnpm run electron:build:linux
+          fi
+        shell: bash
+
+      # Create Release
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          draft: ${{ github.ref_type == 'branch' }}
+          files: |
+            dist/*.exe
+            dist/*.dmg
+            dist/*.deb
+            dist/*.AppImage
+            dist/*.zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

app/components/@settings/tabs/debug/DebugTab.tsx

@@ -1353,7 +1353,9 @@ export default function DebugTab() {
           </div>
           <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
             <div className="i-ph:code w-3.5 h-3.5 text-purple-500" />
-            DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) : '-'}s
+            DOM Ready: {systemInfo
+              ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)
+              : '-'}s
           </div>
         </div>
 

assets/entitlements.mac.plist

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <!-- Allows Just-In-Time compilation required by V8 JavaScript engine in Electron -->
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+
+    <!-- This is needed for the V8 JavaScript engine to function properly -->
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    
+    <!-- Allows network connections -->
+    <key>com.apple.security.network.client</key>
+    <true/>
+
+    <!-- Uncomment to allow read and write access to files explicitly selected by the user through system dialogs -->
+    <!-- <key>com.apple.security.files.user-selected.read-write</key>
+    <true/> -->
+
+    <!-- Uncomment to allow read and write access to the user's Downloads directory -->
+    <!-- <key>com.apple.security.files.downloads.read-write</key>
+    <true/> -->
+  </dict>
+</plist>

electron-builder.yml

@@ -0,0 +1,65 @@
+appId: com.stackblitz.bolt.diy
+productName: Bolt Local
+directories:
+  buildResources: build
+  output: dist
+files:
+  - build/**/*
+  - package.json
+  - node_modules/**/*
+  - icons/**
+  - electron-update.yml
+extraMetadata:
+  main: build/electron/main/index.mjs
+asarUnpack:
+  - resources/**
+  - build/client/**/*
+  - build/server/**/*
+  - electron-update.yml
+
+mac:
+  icon: assets/icons/icon.icns
+  target:
+    - dmg
+  identity: "Xinzhe Wang (RDQSC33B2X)"
+  category: "public.app-category.developer-tools"
+  type: "distribution"
+  hardenedRuntime: true
+  entitlements: "assets/entitlements.mac.plist"
+  entitlementsInherit: "assets/entitlements.mac.plist"
+  gatekeeperAssess: false
+
+win:
+  icon: assets/icons/icon.ico
+  target:
+    - nsis
+  signDlls: false
+  artifactName: ${name}-${version}-${os}-${arch}.${ext}
+
+linux:
+  icon: assets/icons/icon.png
+  target:
+    - AppImage
+    - deb
+  artifactName: ${name}-${version}-${os}-${arch}.${ext}
+  category: Development
+
+nsis:
+  oneClick: false
+  allowToChangeInstallationDirectory: true
+  createDesktopShortcut: true
+  createStartMenuShortcut: true
+  shortcutName: ${productName}
+  artifactName: ${name}-${version}-${os}-${arch}-setup.${ext}
+
+npmRebuild: false
+
+publish:
+  provider: github
+  owner: Derek-X-Wang
+  repo: bolt.local
+  private: true
+  releaseType: release
+
+electronDownload:
+  mirror: https://npmmirror.com/mirrors/electron/

electron-update.yml

@@ -0,0 +1,4 @@
+owner: stackblitz-labs
+repo: bolt.diy
+provider: github
+private: false

electron/main/index.ts

@@ -0,0 +1,201 @@
+/// <reference types="vite/client" />
+import { createRequestHandler } from '@remix-run/node';
+import electron, { app, BrowserWindow, ipcMain, protocol, session } from 'electron';
+import log from 'electron-log';
+import path from 'node:path';
+import * as pkg from '../../package.json';
+import { setupAutoUpdater } from './utils/auto-update';
+import { isDev, DEFAULT_PORT } from './utils/constants';
+import { initViteServer, viteServer } from './utils/vite-server';
+import { setupMenu } from './ui/menu';
+import { createWindow } from './ui/window';
+import { initCookies, storeCookies } from './utils/cookie';
+import { loadServerBuild, serveAsset } from './utils/serve';
+import { reloadOnChange } from './utils/reload';
+
+Object.assign(console, log.functions);
+
+console.debug('main: import.meta.env:', import.meta.env);
+console.log('main: isDev:', isDev);
+console.log('NODE_ENV:', global.process.env.NODE_ENV);
+console.log('isPackaged:', app.isPackaged);
+
+// Log unhandled errors
+process.on('uncaughtException', async (error) => {
+  console.log('Uncaught Exception:', error);
+});
+
+process.on('unhandledRejection', async (error) => {
+  console.log('Unhandled Rejection:', error);
+});
+
+(() => {
+  const root = global.process.env.APP_PATH_ROOT ?? import.meta.env.VITE_APP_PATH_ROOT;
+
+  if (root === undefined) {
+    console.log('no given APP_PATH_ROOT or VITE_APP_PATH_ROOT. default path is used.');
+    return;
+  }
+
+  if (!path.isAbsolute(root)) {
+    console.log('APP_PATH_ROOT must be absolute path.');
+    global.process.exit(1);
+  }
+
+  console.log(`APP_PATH_ROOT: ${root}`);
+
+  const subdirName = pkg.name;
+
+  for (const [key, val] of [
+    ['appData', ''],
+    ['userData', subdirName],
+    ['sessionData', subdirName],
+  ] as const) {
+    app.setPath(key, path.join(root, val));
+  }
+
+  app.setAppLogsPath(path.join(root, subdirName, 'Logs'));
+})();
+
+console.log('appPath:', app.getAppPath());
+
+const keys: Parameters<typeof app.getPath>[number][] = ['home', 'appData', 'userData', 'sessionData', 'logs', 'temp'];
+keys.forEach((key) => console.log(`${key}:`, app.getPath(key)));
+console.log('start whenReady');
+
+declare global {
+  // eslint-disable-next-line no-var, @typescript-eslint/naming-convention
+  var __electron__: typeof electron;
+}
+
+(async () => {
+  await app.whenReady();
+  console.log('App is ready');
+
+  // Load any existing cookies from ElectronStore, set as cookie
+  await initCookies();
+
+  const serverBuild = await loadServerBuild();
+
+  protocol.handle('http', async (req) => {
+    console.log('Handling request for:', req.url);
+
+    if (isDev) {
+      console.log('Dev mode: forwarding to vite server');
+      return await fetch(req);
+    }
+
+    req.headers.append('Referer', req.referrer);
+
+    try {
+      const url = new URL(req.url);
+
+      // Forward requests to specific local server ports
+      if (url.port !== `${DEFAULT_PORT}`) {
+        console.log('Forwarding request to local server:', req.url);
+        return await fetch(req);
+      }
+
+      // Always try to serve asset first
+      const assetPath = path.join(app.getAppPath(), 'build', 'client');
+      const res = await serveAsset(req, assetPath);
+
+      if (res) {
+        console.log('Served asset:', req.url);
+        return res;
+      }
+
+      // Forward all cookies to remix server
+      const cookies = await session.defaultSession.cookies.get({});
+
+      if (cookies.length > 0) {
+        req.headers.set('Cookie', cookies.map((c) => `${c.name}=${c.value}`).join('; '));
+
+        // Store all cookies
+        await storeCookies(cookies);
+      }
+
+      // Create request handler with the server build
+      const handler = createRequestHandler(serverBuild, 'production');
+      console.log('Handling request with server build:', req.url);
+
+      const result = await handler(req, {
+        /*
+         * Remix app access cloudflare.env
+         * Need to pass an empty object to prevent undefined
+         */
+        // @ts-ignore:next-line
+        cloudflare: {},
+      });
+
+      return result;
+    } catch (err) {
+      console.log('Error handling request:', {
+        url: req.url,
+        error:
+          err instanceof Error
+            ? {
+                message: err.message,
+                stack: err.stack,
+                cause: err.cause,
+              }
+            : err,
+      });
+
+      const error = err instanceof Error ? err : new Error(String(err));
+
+      return new Response(`Error handling request to ${req.url}: ${error.stack ?? error.message}`, {
+        status: 500,
+        headers: { 'content-type': 'text/plain' },
+      });
+    }
+  });
+
+  const rendererURL = await (isDev
+    ? (async () => {
+        await initViteServer();
+
+        if (!viteServer) {
+          throw new Error('Vite server is not initialized');
+        }
+
+        const listen = await viteServer.listen();
+        global.__electron__ = electron;
+        viteServer.printUrls();
+
+        return `http://localhost:${listen.config.server.port}`;
+      })()
+    : `http://localhost:${DEFAULT_PORT}`);
+
+  console.log('Using renderer URL:', rendererURL);
+
+  const win = await createWindow(rendererURL);
+
+  app.on('activate', async () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      await createWindow(rendererURL);
+    }
+  });
+
+  console.log('end whenReady');
+
+  return win;
+})()
+  .then((win) => {
+    // IPC samples : send and recieve.
+    let count = 0;
+    setInterval(() => win.webContents.send('ping', `hello from main! ${count++}`), 60 * 1000);
+    ipcMain.handle('ipcTest', (event, ...args) => console.log('ipc: renderer -> main', { event, ...args }));
+
+    return win;
+  })
+  .then((win) => setupMenu(win));
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+reloadOnChange();
+setupAutoUpdater();

electron/main/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "include": ["."],
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "jsx": "preserve",
+    "target": "ESNext",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "module": "ESNext",
+    "isolatedModules": true,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "verbatimModuleSyntax": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

electron/main/ui/menu.ts

@@ -0,0 +1,29 @@
+import { BrowserWindow, Menu } from 'electron';
+
+export function setupMenu(win: BrowserWindow): void {
+  const app = Menu.getApplicationMenu();
+  Menu.setApplicationMenu(
+    Menu.buildFromTemplate([
+      ...(app ? app.items : []),
+      {
+        label: 'Go',
+        submenu: [
+          {
+            label: 'Back',
+            accelerator: 'CmdOrCtrl+[',
+            click: () => {
+              win?.webContents.navigationHistory.goBack();
+            },
+          },
+          {
+            label: 'Forward',
+            accelerator: 'CmdOrCtrl+]',
+            click: () => {
+              win?.webContents.navigationHistory.goForward();
+            },
+          },
+        ],
+      },
+    ]),
+  );
+}

electron/main/ui/window.ts

@@ -0,0 +1,51 @@
+import { app, BrowserWindow } from 'electron';
+import path from 'node:path';
+import { isDev } from '../utils/constants';
+import { store } from '../utils/store';
+
+export function createWindow(rendererURL: string) {
+  console.log('Creating window with URL:', rendererURL);
+
+  const bounds = store.get('bounds');
+  console.log('restored bounds:', bounds);
+
+  const win = new BrowserWindow({
+    ...{
+      width: 1200,
+      height: 800,
+      ...bounds,
+    },
+    vibrancy: 'under-window',
+    visualEffectState: 'active',
+    webPreferences: {
+      preload: path.join(app.getAppPath(), 'build', 'electron', 'preload', 'index.cjs'),
+    },
+  });
+
+  console.log('Window created, loading URL...');
+  win.loadURL(rendererURL).catch((err) => {
+    console.log('Failed to load URL:', err);
+  });
+
+  win.webContents.on('did-fail-load', (_, errorCode, errorDescription) => {
+    console.log('Failed to load:', errorCode, errorDescription);
+  });
+
+  win.webContents.on('did-finish-load', () => {
+    console.log('Window finished loading');
+  });
+
+  // Open devtools in development
+  if (isDev) {
+    win.webContents.openDevTools();
+  }
+
+  const boundsListener = () => {
+    const bounds = win.getBounds();
+    store.set('bounds', bounds);
+  };
+  win.on('moved', boundsListener);
+  win.on('resized', boundsListener);
+
+  return win;
+}

electron/main/utils/auto-update.ts

@@ -0,0 +1,110 @@
+import logger from 'electron-log';
+import type { MessageBoxOptions } from 'electron';
+import { app, dialog } from 'electron';
+import type { AppUpdater, UpdateDownloadedEvent, UpdateInfo } from 'electron-updater';
+import path from 'node:path';
+
+// NOTE: workaround to use electron-updater.
+import * as electronUpdater from 'electron-updater';
+import { isDev } from './constants';
+
+const autoUpdater: AppUpdater = (electronUpdater as any).default.autoUpdater;
+
+export async function setupAutoUpdater() {
+  // Configure logger
+  logger.transports.file.level = 'debug';
+  autoUpdater.logger = logger;
+
+  // Configure custom update config file
+  const resourcePath = isDev
+    ? path.join(process.cwd(), 'electron-update.yml')
+    : path.join(app.getAppPath(), 'electron-update.yml');
+  logger.info('Update config path:', resourcePath);
+  autoUpdater.updateConfigPath = resourcePath;
+
+  // Disable auto download - we want to ask user first
+  autoUpdater.autoDownload = false;
+  autoUpdater.autoInstallOnAppQuit = true;
+
+  autoUpdater.on('checking-for-update', () => {
+    logger.info('checking-for-update...');
+  });
+
+  autoUpdater.on('update-available', async (info: UpdateInfo) => {
+    logger.info('Update available.', info);
+
+    const dialogOpts: MessageBoxOptions = {
+      type: 'info' as const,
+      buttons: ['Update', 'Later'],
+      title: 'Application Update',
+      message: `Version ${info.version} is available.`,
+      detail: 'A new version is available. Would you like to update now?',
+    };
+
+    const response = await dialog.showMessageBox(dialogOpts);
+
+    if (response.response === 0) {
+      autoUpdater.downloadUpdate();
+    }
+  });
+
+  autoUpdater.on('update-not-available', () => {
+    logger.info('Update not available.');
+  });
+
+  /*
+   * Uncomment this before we have any published updates on github releases.
+   * autoUpdater.on('error', (err) => {
+   *   logger.error('Error in auto-updater:', err);
+   *   dialog.showErrorBox('Error: ', err.message);
+   * });
+   */
+
+  autoUpdater.on('download-progress', (progressObj) => {
+    logger.info('Download progress:', progressObj);
+  });
+
+  autoUpdater.on('update-downloaded', async (event: UpdateDownloadedEvent) => {
+    logger.info('Update downloaded:', formatUpdateDownloadedEvent(event));
+
+    const dialogOpts: MessageBoxOptions = {
+      type: 'info' as const,
+      buttons: ['Restart', 'Later'],
+      title: 'Application Update',
+      message: 'Update Downloaded',
+      detail: 'A new version has been downloaded. Restart the application to apply the updates.',
+    };
+
+    const response = await dialog.showMessageBox(dialogOpts);
+
+    if (response.response === 0) {
+      autoUpdater.quitAndInstall(false);
+    }
+  });
+
+  // Check for updates
+  try {
+    logger.info('Checking for updates. Current version:', app.getVersion());
+    await autoUpdater.checkForUpdates();
+  } catch (err) {
+    logger.error('Failed to check for updates:', err);
+  }
+
+  // Set up periodic update checks (every 4 hours)
+  setInterval(
+    () => {
+      autoUpdater.checkForUpdates().catch((err) => {
+        logger.error('Periodic update check failed:', err);
+      });
+    },
+    4 * 60 * 60 * 1000,
+  );
+}
+
+function formatUpdateDownloadedEvent(event: UpdateDownloadedEvent): string {
+  return JSON.stringify({
+    version: event.version,
+    downloadedFile: event.downloadedFile,
+    files: event.files.map((e) => ({ files: { url: e.url, size: e.size } })),
+  });
+}

electron/main/utils/constants.ts

@@ -0,0 +1,4 @@
+import { app } from 'electron';
+
+export const isDev = !(global.process.env.NODE_ENV === 'production' || app.isPackaged);
+export const DEFAULT_PORT = 5173;

electron/main/utils/cookie.ts

@@ -0,0 +1,40 @@
+import { session } from 'electron';
+import { DEFAULT_PORT } from './constants';
+import { store } from './store';
+
+/**
+ * On app startup: read any existing cookies from store and set it as a cookie.
+ */
+export async function initCookies() {
+  await loadStoredCookies();
+}
+
+// Function to store all cookies
+export async function storeCookies(cookies: Electron.Cookie[]) {
+  for (const cookie of cookies) {
+    store.set(`cookie:${cookie.name}`, cookie);
+  }
+}
+
+// Function to load stored cookies
+async function loadStoredCookies() {
+  // Get all keys that start with 'cookie:'
+  const cookieKeys = store.store ? Object.keys(store.store).filter((key) => key.startsWith('cookie:')) : [];
+
+  for (const key of cookieKeys) {
+    const cookie = store.get(key);
+
+    if (cookie) {
+      try {
+        // Add default URL if not present
+        const cookieWithUrl = {
+          ...cookie,
+          url: cookie.url || `http://localhost:${DEFAULT_PORT}`,
+        };
+        await session.defaultSession.cookies.set(cookieWithUrl);
+      } catch (error) {
+        console.error(`Failed to set cookie ${key}:`, error);
+      }
+    }
+  }
+}

electron/main/utils/reload.ts

@@ -0,0 +1,35 @@
+import { app } from 'electron';
+import path from 'node:path';
+import { promises as fs } from 'node:fs';
+
+// Reload on change.
+let isQuited = false;
+
+const abort = new AbortController();
+const { signal } = abort;
+
+export async function reloadOnChange() {
+  const dir = path.join(app.getAppPath(), 'build', 'electron');
+
+  try {
+    const watcher = fs.watch(dir, { signal, recursive: true });
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for await (const _event of watcher) {
+      if (!isQuited) {
+        isQuited = true;
+        app.relaunch();
+        app.quit();
+      }
+    }
+  } catch (err) {
+    if (!(err instanceof Error)) {
+      throw err;
+    }
+
+    if (err.name === 'AbortError') {
+      console.log('abort watching:', dir);
+      return;
+    }
+  }
+}

electron/main/utils/serve.ts

@@ -0,0 +1,71 @@
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import type { ServerBuild } from '@remix-run/node';
+import mime from 'mime';
+import { createReadStream, promises as fs } from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { app } from 'electron';
+import { isDev } from './constants';
+
+export async function loadServerBuild(): Promise<any> {
+  if (isDev) {
+    console.log('Dev mode: server build not loaded');
+    return;
+  }
+
+  const serverBuildPath = path.join(app.getAppPath(), 'build', 'server', 'index.js');
+  console.log(`Loading server build... path is ${serverBuildPath}`);
+
+  try {
+    const fileUrl = pathToFileURL(serverBuildPath).href;
+    const serverBuild: ServerBuild = /** @type {ServerBuild} */ await import(fileUrl);
+    console.log('Server build loaded successfully');
+
+    // eslint-disable-next-line consistent-return
+    return serverBuild;
+  } catch (buildError) {
+    console.log('Failed to load server build:', {
+      message: (buildError as Error)?.message,
+      stack: (buildError as Error)?.stack,
+      error: JSON.stringify(buildError, Object.getOwnPropertyNames(buildError as object)),
+    });
+
+    return;
+  }
+}
+
+// serve assets built by vite.
+export async function serveAsset(req: Request, assetsPath: string): Promise<Response | undefined> {
+  const url = new URL(req.url);
+  const fullPath = path.join(assetsPath, decodeURIComponent(url.pathname));
+  console.log('Serving asset, path:', fullPath);
+
+  if (!fullPath.startsWith(assetsPath)) {
+    console.log('Path is outside assets directory:', fullPath);
+    return;
+  }
+
+  const stat = await fs.stat(fullPath).catch((err) => {
+    console.log('Failed to stat file:', fullPath, err);
+    return undefined;
+  });
+
+  if (!stat?.isFile()) {
+    console.log('Not a file:', fullPath);
+    return;
+  }
+
+  const headers = new Headers();
+  const mimeType = mime.getType(fullPath);
+
+  if (mimeType) {
+    headers.set('Content-Type', mimeType);
+  }
+
+  console.log('Serving file with mime type:', mimeType);
+
+  const body = createReadableStreamFromReadable(createReadStream(fullPath));
+
+  // eslint-disable-next-line consistent-return
+  return new Response(body, { headers });
+}

electron/main/utils/store.ts

@@ -0,0 +1,3 @@
+import ElectronStore from 'electron-store';
+
+export const store = new ElectronStore<any>({ encryptionKey: 'something' });

electron/main/utils/vite-server.ts

@@ -0,0 +1,44 @@
+import { app } from 'electron';
+import type { ViteDevServer } from 'vite';
+
+let viteServer: ViteDevServer | undefined;
+
+// Conditionally import Vite only in development
+export async function initViteServer() {
+  if (!(global.process.env.NODE_ENV === 'production' || app.isPackaged)) {
+    const vite = await import('vite');
+    viteServer = await vite.createServer({
+      root: '.',
+      envDir: process.cwd(), // load .env files from the root directory.
+    });
+  }
+}
+
+/*
+ *
+ * take care of vite-dev-server.
+ *
+ */
+app.on('before-quit', async (_event) => {
+  if (!viteServer) {
+    return;
+  }
+
+  /*
+   * ref: https://stackoverflow.com/questions/68750716/electron-app-throwing-quit-unexpectedly-error-message-on-mac-when-quitting-the-a
+   * event.preventDefault();
+   */
+  try {
+    console.log('will close vite-dev-server.');
+    await viteServer.close();
+    console.log('closed vite-dev-server.');
+
+    // app.quit(); // Not working. causes recursively 'before-quit' events.
+    app.exit(); // Not working expectedly SOMETIMES. Still throws exception and macOS shows dialog.
+    // global.process.exit(0); // Not working well... I still see exceptional dialog.
+  } catch (err) {
+    console.log('failed to close Vite server:', err);
+  }
+});
+
+export { viteServer };

electron/main/vite.config.ts

@@ -0,0 +1,44 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve('electron/main/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        'vite',
+        'electron',
+        ...[
+          'electron-log',
+
+          // electron-log uses fs internally
+          'fs',
+          'util',
+        ],
+
+        // Add all Node.js built-in modules as external
+        'node:fs',
+        'node:path',
+        'node:url',
+        'node:util',
+        'node:stream',
+        'node:events',
+        'electron-store',
+        '@remix-run/node',
+
+        // "mime", // NOTE: don't enable. not working if it's external.
+        'electron-updater',
+      ],
+      output: {
+        dir: 'build/electron',
+        entryFileNames: 'main/[name].mjs',
+        format: 'esm',
+      },
+    },
+    minify: false,
+    emptyOutDir: false,
+  },
+});

electron/preload/index.ts

@@ -0,0 +1,22 @@
+import { ipcRenderer, contextBridge, type IpcRendererEvent } from 'electron';
+
+console.debug('start preload.', ipcRenderer);
+
+const ipc = {
+  invoke(...args: any[]) {
+    return ipcRenderer.invoke('ipcTest', ...args);
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  on(channel: string, func: Function) {
+    const f = (event: IpcRendererEvent, ...args: any[]) => func(...[event, ...args]);
+    console.debug('register listener', channel, f);
+    ipcRenderer.on(channel, f);
+
+    return () => {
+      console.debug('remove listener', channel, f);
+      ipcRenderer.removeListener(channel, f);
+    };
+  },
+};
+
+contextBridge.exposeInMainWorld('ipc', ipc);

electron/preload/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../main/tsconfig.json",
+  "include": ["./**/*.ts"],
+  "compilerOptions": {
+    "rootDir": "."
+  }
+}

electron/preload/vite.config.ts

@@ -0,0 +1,31 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve('electron/preload/index.ts'),
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      external: ['electron'],
+      output: {
+        dir: 'build/electron',
+
+        /*
+         * preload must be cjs format.
+         * if mjs, it will be error:
+         *   - Unable to load preload script.
+         *   - SyntaxError: Cannot use import statement outside a module.
+         */
+        entryFileNames: 'preload/[name].cjs',
+        format: 'cjs',
+      },
+    },
+    minify: false,
+    emptyOutDir: false,
+  },
+  esbuild: {
+    platform: 'node',
+  },
+});

eslint.config.mjs

@@ -39,7 +39,7 @@ export default [
   },
   {
     files: [...tsFileExtensions, ...jsFileExtensions, '**/*.tsx'],
-    ignores: ['functions/*'],
+    ignores: ['functions/*', 'electron/**/*'],
     rules: {
       'no-restricted-imports': [
         'error',

notarize.cjs

@@ -0,0 +1,31 @@
+const { notarize } = require('@electron/notarize');
+
+exports.default = async function notarizing(context) {
+  const { electronPlatformName, appOutDir } = context;
+
+  if (electronPlatformName !== 'darwin') {
+    return;
+  }
+
+  // Skip notarization when identity is null (development build)
+  if (!context.packager.config.mac || context.packager.config.mac.identity === null) {
+    console.log('Skipping notarization: identity is null');
+    return;
+  }
+
+  const appName = context.packager.appInfo.productFilename;
+  const appBundleId = context.packager.config.appId;
+
+  try {
+    console.log(`Notarizing ${appBundleId} found at ${appOutDir}/${appName}.app`);
+    await notarize({
+      tool: 'notarytool',
+      appPath: `${appOutDir}/${appName}.app`,
+      teamId: process.env.APPLE_TEAM_ID,
+    });
+    console.log(`Done notarizing ${appBundleId}`);
+  } catch (error) {
+    console.error('Notarization failed:', error);
+    throw error;
+  }
+};

package.json

@@ -6,6 +6,10 @@
   "sideEffects": false,
   "type": "module",
   "version": "0.0.7",
+  "author": {
+    "name": "bolt.diy team",
+    "email": "maintainers@bolt.diy"
+  },
   "scripts": {
     "deploy": "npm run build && wrangler pages deploy",
     "build": "remix vite:build",
@@ -25,7 +29,20 @@
     "typegen": "wrangler types",
     "preview": "pnpm run build && pnpm run start",
     "prepare": "husky",
-    "clean": "node scripts/clean.js"
+    "clean": "node scripts/clean.js",
+    "electron:dev": "pnpm electron:dev:main",
+    "electron:dev:renderer": "cross-env NODE_ENV=development pnpm exec electron electron/dev-server.mjs",
+    "electron:dev:main": "cross-env NODE_ENV=development pnpm run electron:build:deps && electron build/electron/main/index.mjs",
+    "electron:build:start": "electron-builder start",
+    "electron:build:deps": "concurrently \"pnpm electron:build:main\" \"pnpm electron:build:preload\" --kill-others-on-fail",
+    "electron:build:main": "vite build --config ./electron/main/vite.config.ts",
+    "electron:build:preload": "vite build --config ./electron/preload/vite.config.ts",
+    "electron:build:renderer": "remix vite:build --config vite-electron.config.js",
+    "electron:build:unpack": "rm -rf dist && pnpm electron:build:renderer && pnpm electron:build:deps && electron-builder --dir",
+    "electron:build:mac": "rm -rf dist && pnpm electron:build:renderer && pnpm electron:build:deps && electron-builder --mac",
+    "electron:build:win": "rm -rf dist && pnpm electron:build:renderer && pnpm electron:build:deps && electron-builder --win",
+    "electron:build:linux": "rm -rf dist && pnpm electron:build:renderer && pnpm electron:build:deps && electron-builder --linux",
+    "electron:build:dist": "rm -rf dist && pnpm electron:build:renderer && pnpm electron:build:deps && electron-builder --mwl"
   },
   "engines": {
     "node": ">=18.18.0"
@@ -94,6 +111,9 @@
     "date-fns": "^3.6.0",
     "diff": "^5.2.0",
     "dotenv": "^16.4.7",
+    "electron-log": "^5.2.3",
+    "electron-store": "^10.0.0",
+    "electron-updater": "^6.3.9",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.12.0",
     "ignore": "^6.0.2",
@@ -104,6 +124,7 @@
     "js-cookie": "^3.0.5",
     "jspdf": "^2.5.2",
     "jszip": "^3.10.1",
+    "mime": "^4.0.4",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
     "path-browserify": "^1.0.1",
@@ -127,23 +148,32 @@
     "shiki": "^1.24.0",
     "tailwind-merge": "^2.2.1",
     "unist-util-visit": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "zod": "^3.24.1",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@blitz/eslint-plugin": "0.1.0",
     "@cloudflare/workers-types": "^4.20241127.0",
+    "@electron/notarize": "^2.5.0",
     "@iconify-json/ph": "^1.2.1",
     "@iconify/types": "^2.0.0",
     "@remix-run/dev": "^2.15.2",
+    "@remix-run/serve": "^2.15.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/diff": "^5.2.3",
     "@types/dom-speech-recognition": "^0.0.4",
+    "@types/electron": "^1.6.10",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/path-browserify": "^1.0.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "electron": "^33.2.0",
+    "electron-builder": "^25.1.8",
     "@vitejs/plugin-react": "^4.3.4",
     "fast-glob": "^3.3.2",
     "husky": "9.1.7",
@@ -152,17 +182,17 @@
     "node-fetch": "^3.3.2",
     "pnpm": "^9.14.4",
     "prettier": "^3.4.1",
+    "rimraf": "^4.4.1",
     "sass-embedded": "^1.81.0",
     "typescript": "^5.7.2",
     "unified": "^11.0.5",
     "unocss": "^0.61.9",
     "vite": "^5.4.11",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-copy": "^0.1.6",
     "vite-plugin-optimize-css-modules": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.1.7",
-    "wrangler": "^3.91.0",
-    "zod": "^3.24.1"
+    "wrangler": "^3.91.0"
   },
   "resolutions": {
     "@typescript-eslint/utils": "^8.0.0-alpha.30"

tsconfig.json

@@ -5,7 +5,8 @@
       "@remix-run/cloudflare",
       "vite/client",
       "@cloudflare/workers-types/2023-07-01",
-      "@types/dom-speech-recognition"
+      "@types/dom-speech-recognition",
+      "electron"
     ],
     "isolatedModules": true,
     "esModuleInterop": true,
@@ -23,7 +24,6 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-
     // vite takes care of building everything, not tsc
     "noEmit": true
   },

vite-electron.config.ts

@@ -0,0 +1,75 @@
+import { defineConfig } from 'vite';
+import { vitePlugin as remixVitePlugin } from '@remix-run/dev';
+import UnoCSS from 'unocss/vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import { execSync } from 'child_process';
+
+// Get git hash with fallback
+const getGitHash = () => {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim();
+  } catch {
+    return 'no-git-info';
+  }
+};
+
+export default defineConfig((config) => {
+  return {
+    define: {
+      __COMMIT_HASH: JSON.stringify(getGitHash()),
+      __APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    },
+    build: {
+      target: 'esnext',
+    },
+    plugins: [
+      nodePolyfills({
+        include: ['path', 'buffer', 'process'],
+      }),
+      remixVitePlugin({
+        future: {
+          v3_fetcherPersist: true,
+          v3_relativeSplatPath: true,
+          v3_throwAbortReason: true,
+          v3_lazyRouteDiscovery: true,
+        },
+        serverModuleFormat: 'esm',
+      }),
+      UnoCSS(),
+      tsconfigPaths(),
+      config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
+      {
+        name: 'replaceReactDomServerImport',
+        enforce: 'pre',
+        transform(code, id) {
+          if (id.endsWith('entry.server.tsx')) {
+            /*
+             * Hack: fix the issue with react-dom/server not being found in electron
+             * Replace the import from 'react-dom/server' with 'react-dom/server.browser', only for electron build
+             */
+            return code.replace(/from 'react-dom\/server';?/g, "from 'react-dom/server.browser';");
+          }
+
+          return undefined;
+        },
+      },
+    ],
+    envPrefix: [
+      'VITE_',
+      'OPENAI_LIKE_API_BASE_URL',
+      'OLLAMA_API_BASE_URL',
+      'LMSTUDIO_API_BASE_URL',
+      'TOGETHER_API_BASE_URL',
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
+  };
+});