build take 2

desktop/.gitignore

@@ -11,8 +11,10 @@ node_modules/
 .env
 .env.*.local
 
-# tsc transpiles src/**/*.ts and emits the generated JS into app/
-app/
+# Generated code during build
+# - tsc transpiles src/**/*.ts and emits the generated JS into build/app
+# - The out dir from the photos web app is symlinked to build/out
+build/
 
 # electron-builder
 dist/

desktop/README.md

@@ -12,9 +12,9 @@ To know more about Ente, see [our main README](../README.md) or visit
 
 > [!CAUTION]
 >
-> We moved a few things around when switching to a monorepo recently, so this
-> folder might not build with the instructions below. Hang tight, we're on it,
-> and will fix.
+> We moved a few things around when switching to a monorepo recently, and the
+> desktop app is not currently building with these instructions below. Hang
+> tight, we're on it, and will fix soon.
 
 Fetch submodules
 
@@ -41,7 +41,8 @@ terminal:
 yarn watch
 ```
 
-To build a binary for your platform, run
+`yarn dev` is handy during development, but if you wish, you can also create a
+binary for your platform by using
 
 ```sh
 yarn build

desktop/docs/electron.md

@@ -7,14 +7,15 @@ Electron embeds Chromium and Node.js in the generated app's binary. The
 generated app thus consists of two separate processes - the _main_ process, and
 a _renderer_ process.
 
-* The _renderer_ process is a regular web app that gets loaded into the embedded
-  Chromium. In our case, we build a static export of the [Photos web
-  app](../web/README.md) and bundle it in the generated app's binary - at
-  runtime, the embedded Chromium loads this.
-
-* The _main_ process is runs the embedded Node.js. This code can deal with the
+* The _main_ process is runs the embedded node. This process  can deal with the
  host OS - it is conceptually like a `node` repl running on your machine. In our
  case, the TypeScript code (in the `src/` directory) gets transpiled by `tsc`
- into JavaScript in the `app/` directory, which gets bundled in the generated
- app's binary and is loaded by the `node` (main) process when it starts.
-y
+ into JavaScript in the `build/app/` directory, which gets bundled in the
+ generated app's binary and is loaded by the node (main) process when the app
+ starts.
+
+* The _renderer_ process is a regular web app that gets loaded into the embedded
+  Chromium. When the main process starts, it creates a new "window" that shows
+  this embedded Chromium. In our case, we build and bundle a static export of
+  the [Photos web app](../web/README.md) in the generated app. This gets loaded
+  by the embedded Chromium at runtime, acting as the app's UI.

desktop/package.json

@@ -4,14 +4,14 @@
     "private": true,
     "description": "Desktop client for Ente Photos",
     "author": "Ente <code@ente.io>",
-    "main": "app/main.js",
+    "main": "build/app/main.js",
     "scripts": {
-        "build": "yarn build-renderer && yarn build-main && electron-builder",
-        "build-main": "tsc",
-        "build-renderer": "cd ../web && yarn install && yarn build:photos",
+        "build": "mkdir -p build && yarn build-renderer && yarn build-main",
+        "build-main": "tsc && electron-builder --config.compression=store",
+        "build-renderer": "cd ../web && yarn install && yarn build:photos && cd ../desktop/build && rm -f out && ln -sf ../../web/apps/photos/out",
         "dev": "concurrently \"yarn dev-main\" \"yarn dev-renderer\"",
-        "dev-main": "yarn build-main && electron app/main.js",
-        "dev-renderer": "cd ../web && yarn install && yarn dev:photos",
+        "dev-main": "tsc && electron build/app/main.js",
+        "dev-renderer": "cd ../web && yarn install && yarn dev:photos && cd ../desktop/build && rm -f out && ln -sf ../../web/apps/photos/out",
         "postinstall": "electron-builder install-app-deps",
         "lint": "yarn prettier --check . && eslint \"src/**/*.ts\"",
         "lint-fix": "yarn prettier --write . && eslint --fix .",
@@ -97,7 +97,7 @@
                     ]
                 }
             ],
-            "icon": "./build/icon.icns",
+            "icon": "./resources/icon.icns",
             "category": "Photography"
         },
         "mac": {
@@ -114,7 +114,7 @@
         "afterSign": "electron-builder-notarize",
         "extraFiles": [
             {
-                "from": "build",
+                "from": "resources",
                 "to": "resources",
                 "filter": [
                     "**/*"
@@ -127,14 +127,10 @@
             "node_modules/ffmpeg-static/package.json"
         ],
         "files": [
-            "app/**/*",
+            "build/app/**/*",
             {
-                "from": "../web/apps/photos",
-                "to": "ui",
-                "filter": [
-                    "!**/*",
-                    "out/**/*"
-                ]
+                "from": "build/out",
+                "to": "out"
             }
         ]
     },

desktop/src/config/index.ts

@@ -1,5 +1,5 @@
 const PROD_HOST_URL: string = "ente://app";
-const RENDERER_OUTPUT_DIR: string = "./ui/out";
+const RENDERER_OUTPUT_DIR: string = "./out";
 const LOG_FILENAME = "ente.log";
 const MAX_LOG_SIZE = 50 * 1024 * 1024; // 50MB
 

desktop/src/services/imageProcessor.ts

@@ -74,7 +74,7 @@ const IMAGE_MAGICK_THUMBNAIL_GENERATE_COMMAND_TEMPLATE = [
 
 function getImageMagickStaticPath() {
     return isDev
-        ? "build/image-magick"
+        ? "resources/image-magick"
         : path.join(process.resourcesPath, "image-magick");
 }
 

desktop/src/utils/createWindow.ts

@@ -11,7 +11,7 @@ import { isPlatform } from "./common/platform";
 
 export async function createWindow(): Promise<BrowserWindow> {
     const appImgPath = isDev
-        ? "build/window-icon.png"
+        ? "resources/window-icon.png"
         : path.join(process.resourcesPath, "window-icon.png");
     const appIcon = nativeImage.createFromPath(appImgPath);
     // Create the browser window.
@@ -40,7 +40,7 @@ export async function createWindow(): Promise<BrowserWindow> {
     }
 
     if (isDev) {
-        splash.loadFile(`../build/splash.html`);
+        splash.loadFile(`../resources/splash.html`);
         mainWindow.loadURL(PROD_HOST_URL);
         // Open the DevTools.
         mainWindow.webContents.openDevTools();
@@ -53,7 +53,7 @@ export async function createWindow(): Promise<BrowserWindow> {
     mainWindow.webContents.on("did-fail-load", () => {
         splash.close();
         isDev
-            ? mainWindow.loadFile(`../../build/error.html`)
+            ? mainWindow.loadFile(`../resources/error.html`)
             : splash.loadURL(
                   `file://${path.join(process.resourcesPath, "error.html")}`
               );

desktop/tsconfig.json

@@ -3,15 +3,15 @@
         "target": "es2021",
         "module": "commonjs",
         "esModuleInterop": true,
+        /* Emit the generated JS into build/app */
+        "outDir": "build/app",
         "noImplicitAny": true,
         "sourceMap": true,
-        /* Emit the generated JS into app/ */
-        "outDir": "app",
         "baseUrl": "src",
         "paths": {
             "*": ["node_modules/*"]
         }
     },
-    /* transpile all ts files in src/ */
+    /* Transpile all ts files in src/ */
     "include": ["src/**/*.ts"]
 }