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