[WIP] hosting the sync-server with the desktop app (POC)

bin/package-electron

@@ -37,6 +37,7 @@ fi
 yarn workspace loot-core build:node
 
 yarn workspace @actual-app/web build --mode=desktop
+yarn workspace @actual-app/crdt build
 
 yarn workspace desktop-electron update-client
 

package.json

@@ -21,6 +21,7 @@
     "start": "yarn start:browser",
     "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
     "start:desktop-node": "yarn workspace loot-core watch:node",
+    "start:desktop-server-deps": "yarn workspace @actual-app/crdt build",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
     "start:desktop-electron": "yarn workspace desktop-electron watch",
     "start:electron": "yarn start:desktop",

packages/desktop-client/src/browser-preload.browser.js

@@ -139,6 +139,9 @@ global.Actual = {
   openURLInBrowser: url => {
     window.open(url, '_blank');
   },
+  downloadActualServer: () => {},
+  startActualServer: () => {},
+  exposeActualServer: () => {},
   onEventFromMain: () => {},
   applyAppUpdate: () => {},
   updateAppMenu: () => {},

packages/desktop-client/src/components/manager/BudgetList.tsx

@@ -23,6 +23,7 @@ import {
   type SyncedLocalFile,
 } from 'loot-core/types/file';
 
+import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { useInitialMount } from '../../hooks/useInitialMount';
 import { useMetadataPref } from '../../hooks/useMetadataPref';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
@@ -441,6 +442,20 @@ export function BudgetList({ showHeader = true, quickSwitchMode = false }) {
     }
   };
 
+  const startActualServer = async () => {
+    await globalThis.Actual.startActualServer('v24.10.1');
+  };
+
+  const [ngrokConfig] = useGlobalPref('ngrokConfig');
+  const exposeActualServer = async () => {
+    const url = await globalThis.Actual.exposeActualServer({
+      authToken: ngrokConfig.authToken,
+      port: ngrokConfig.port,
+      domain: ngrokConfig.domain,
+    });
+    console.info('exposing actual at: ' + url);
+  };
+
   return (
     <View
       style={{
@@ -515,6 +530,26 @@ export function BudgetList({ showHeader = true, quickSwitchMode = false }) {
               <Trans>Create test file</Trans>
             </Button>
           )}
+          <Button
+            variant="primary"
+            onPress={startActualServer}
+            style={{
+              ...narrowButtonStyle,
+              marginLeft: 10,
+            }}
+          >
+            Start Server
+          </Button>
+          <Button
+            variant="primary"
+            onPress={exposeActualServer}
+            style={{
+              ...narrowButtonStyle,
+              marginLeft: 10,
+            }}
+          >
+            Expose Server
+          </Button>
         </View>
       )}
     </View>

packages/desktop-electron/index.ts

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
+import ngrok from '@ngrok/ngrok';
 import {
   net,
   app,
@@ -19,6 +20,8 @@ import {
 import { copy, exists, remove } from 'fs-extra';
 import promiseRetry from 'promise-retry';
 
+import { GlobalPrefs } from 'loot-core/types/prefs';
+
 import { getMenu } from './menu';
 import {
   get as getWindowState,
@@ -51,11 +54,29 @@ if (!isDev || !process.env.ACTUAL_DATA_DIR) {
 // be closed automatically when the JavaScript object is garbage collected.
 let clientWin: BrowserWindow | null;
 let serverProcess: UtilityProcess | null;
+let actualServerProcess: UtilityProcess | null;
+let globalPrefs: Partial<GlobalPrefs> | null;
 
 if (isDev) {
   process.traceProcessWarnings = true;
 }
 
+async function loadGlobalPrefs() {
+  let state: GlobalPrefs | undefined = undefined;
+  try {
+    state = JSON.parse(
+      fs.readFileSync(
+        path.join(process.env.ACTUAL_DATA_DIR, 'global-store.json'),
+        'utf8',
+      ),
+    );
+  } catch (e) {
+    console.log('Could not load global state');
+  }
+
+  return state;
+}
+
 function createBackgroundProcess() {
   serverProcess = utilityProcess.fork(
     __dirname + '/server.js',
@@ -93,6 +114,65 @@ function createBackgroundProcess() {
   });
 }
 
+function startSyncServer() {
+  const serverPath = path.resolve(
+    __dirname,
+    '../../../node_modules/actual-sync/app.js', // if letting electron-builder bundle it (needs to be in our workspace)
+  );
+
+  // NOTE: config.json parameters will be relative to THIS directory at the moment - may need a fix?
+  // Or we can override the config.json location when starting the process
+  try {
+    actualServerProcess = utilityProcess.fork(
+      serverPath, // This requires actual-server depencies (crdt) to be built before running electron - they need to be manually specified because actual-server doesn't get bundled
+      [],
+      isDev ? { execArgv: ['--inspect'], stdio: 'pipe' } : { stdio: 'pipe' },
+    );
+  } catch (error) {
+    console.error(error);
+  }
+
+  actualServerProcess.stdout?.on('data', (chunk: Buffer) => {
+    // Send the Server console.log messages to the main browser window
+    clientWin?.webContents.executeJavaScript(`
+        console.info('Server Log:', ${JSON.stringify(chunk.toString('utf8'))})`);
+  });
+
+  actualServerProcess.stderr?.on('data', (chunk: Buffer) => {
+    // Send the Server console.error messages out to the main browser window
+    clientWin?.webContents.executeJavaScript(`
+          console.error('Server Log:', ${JSON.stringify(chunk.toString('utf8'))})`);
+  });
+}
+
+async function exposeSyncServer(ngrokConfig: GlobalPrefs['ngrokConfig']) {
+  const hasRequiredConfig =
+    ngrokConfig?.authToken && ngrokConfig?.domain && ngrokConfig?.port;
+
+  if (!hasRequiredConfig) {
+    console.error('Cannot expose sync server: missing ngrok settings');
+    return { error: 'Missing ngrok settings' };
+  }
+
+  try {
+    const listener = await ngrok.forward({
+      schemes: ['https'], // change this to https and bind certificate - may need to generate cert and store in user-data
+      addr: ngrokConfig.port,
+      host_header: `localhost:${ngrokConfig.port}`,
+      authtoken: ngrokConfig.authToken,
+      domain: ngrokConfig.domain,
+      // crt: fs.readFileSync("crt.pem", "utf8"),
+      // key: fs.readFileSync("key.pem", "utf8"),
+    });
+
+    console.info(`Exposing actual server on url: ${listener.url()}`);
+    return { url: listener.url() };
+  } catch (error) {
+    console.error('Unable to run ngrok', error);
+    return { error: `Unable to run ngrok. ${error}` };
+  }
+}
+
 async function createWindow() {
   const windowState = await getWindowState();
 
@@ -223,6 +303,14 @@ app.on('ready', async () => {
   // Install an `app://` protocol that always returns the base HTML
   // file no matter what URL it is. This allows us to use react-router
   // on the frontend
+
+  globalPrefs = await loadGlobalPrefs(); // load global prefs
+
+  if (globalPrefs.ngrokConfig.autoStart) {
+    startSyncServer();
+    exposeSyncServer(globalPrefs.ngrokConfig);
+  }
+
   protocol.handle('app', request => {
     if (request.method !== 'GET') {
       return new Response(null, {
@@ -373,6 +461,14 @@ ipcMain.handle('open-external-url', (event, url) => {
   shell.openExternal(url);
 });
 
+ipcMain.handle('start-actual-server', async () => startSyncServer());
+
+ipcMain.handle(
+  'expose-actual-server',
+  async (_event, payload: GlobalPrefs['ngrokConfig']) =>
+    exposeSyncServer(payload),
+);
+
 ipcMain.on('message', (_event, msg) => {
   if (!serverProcess) {
     return;

packages/desktop-electron/package.json

@@ -56,20 +56,10 @@
     },
     "win": {
       "target": [
-        {
-          "target": "appx",
-          "arch": [
-            "ia32",
-            "x64",
-            "arm64"
-          ]
-        },
         {
           "target": "nsis",
           "arch": [
-            "ia32",
-            "x64",
-            "arm64"
+            "x64"
           ]
         }
       ],
@@ -85,6 +75,8 @@
     "npmRebuild": false
   },
   "dependencies": {
+    "@ngrok/ngrok": "^1.4.1",
+    "actual-sync": "file:../../../actual-server",
     "better-sqlite3": "^9.6.0",
     "fs-extra": "^11.2.0",
     "node-fetch": "^2.7.0",

packages/desktop-electron/preload.ts

@@ -1,5 +1,7 @@
 import { ipcRenderer, contextBridge, IpcRenderer } from 'electron';
 
+import { GlobalPrefs } from 'loot-core/types/prefs';
+
 import {
   GetBootstrapDataPayload,
   OpenFileDialogPayload,
@@ -58,6 +60,16 @@ contextBridge.exposeInMainWorld('Actual', {
     ipcRenderer.invoke('open-external-url', url);
   },
 
+  startActualServer: (releaseVersion: string) => {
+    return ipcRenderer.invoke('start-actual-server', {
+      releaseVersion,
+    });
+  },
+
+  exposeActualServer: (settings: GlobalPrefs['ngrokConfig']) => {
+    return ipcRenderer.invoke('expose-actual-server', settings);
+  },
+
   onEventFromMain: (type: string, handler: (...args: unknown[]) => void) => {
     ipcRenderer.on(type, handler);
   },

packages/loot-core/src/platform/server/asyncStorage/index.d.ts

@@ -1,7 +1,7 @@
 export function init(opts?: { persist?: boolean }): void;
 export type Init = typeof init;
 
-export function getItem(key: string): Promise<string>;
+export function getItem<T = string>(key: string): Promise<T>;
 export type GetItem = typeof getItem;
 
 export function setItem(key: string, value: unknown): void;
@@ -10,7 +10,7 @@ export type SetItem = typeof setItem;
 export function removeItem(key: string): void;
 export type RemoveItem = typeof removeItem;
 
-export function multiGet(keys: string[]): Promise<[string, string][]>;
+export function multiGet(keys: string[]): Promise<[string, unknown][]>;
 export type MultiGet = typeof multiGet;
 
 export function multiSet(keyValues: [string, unknown][]): void;

packages/loot-core/src/server/main.ts

@@ -1262,6 +1262,9 @@ handlers['save-global-prefs'] = async function (prefs) {
       prefs.serverSelfSignedCert,
     );
   }
+  if ('ngrokConfig' in prefs) {
+    await asyncStorage.setItem('ngrokConfig', prefs.ngrokConfig);
+  }
   return 'ok';
 };
 
@@ -1274,6 +1277,7 @@ handlers['load-global-prefs'] = async function () {
     [, theme],
     [, preferredDarkTheme],
     [, serverSelfSignedCert],
+    [, ngrokConfig],
   ] = await asyncStorage.multiGet([
     'floating-sidebar',
     'max-months',
@@ -1282,6 +1286,7 @@ handlers['load-global-prefs'] = async function () {
     'theme',
     'preferred-dark-theme',
     'server-self-signed-cert',
+    'ngrokConfig',
   ]);
   return {
     floatingSidebar: floatingSidebar === 'true' ? true : false,
@@ -1301,6 +1306,7 @@ handlers['load-global-prefs'] = async function () {
         ? preferredDarkTheme
         : 'dark',
     serverSelfSignedCert: serverSelfSignedCert || undefined,
+    ngrokConfig: ngrokConfig || undefined,
   };
 };
 

packages/loot-core/src/types/prefs.d.ts

@@ -78,4 +78,11 @@ export type GlobalPrefs = Partial<{
   preferredDarkTheme: DarkTheme;
   documentDir: string; // Electron only
   serverSelfSignedCert: string; // Electron only
+  ngrokConfig?: {
+    // Electron only
+    autoStart?: boolean;
+    authToken?: string;
+    port?: number;
+    domain?: string;
+  };
 }>;

packages/loot-core/typings/window.d.ts

@@ -1,3 +1,5 @@
+import type { GlobalPrefs } from 'loot-core/types/prefs';
+
 export {};
 
 declare global {
@@ -6,6 +8,11 @@ declare global {
       IS_FAKE_WEB: boolean;
       ACTUAL_VERSION: string;
       openURLInBrowser: (url: string) => void;
+      downloadActualServer: (releaseVersion: string) => Promise<void>;
+      startActualServer: (releaseVersion: string) => Promise<void>;
+      exposeActualServer: (
+        settings: GlobalPrefs['ngrokConfig'],
+      ) => Promise<{ url?: string; error?: string } | undefined>;
       saveFile: (
         contents: string | Buffer,
         filename: string,