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>

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',
+  },
+});