[photosd] Fix desktop build - part 2 (#1044)

The build is still not fixed, but this is a step closer to where we want
to be.

desktop/.gitignore

@@ -1,12 +1,20 @@
 # Node
 node_modules/
 
-# electron-builder
-dist/
-
 # macOS
 .DS_Store
 
+# Editors
+.vscode/
+
 # Local env files
 .env
 .env.*.local
+
+# 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/.prettierignore

@@ -1,3 +1 @@
 thirdparty/
-public/
-*.md

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,
-> will fix things if.
+> 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
 
@@ -31,7 +31,7 @@ yarn install
 Run the app
 
 ```sh
-yarn start
+yarn dev
 ```
 
 To recompile automatically using electron-reload, run this in a separate
@@ -40,3 +40,10 @@ terminal:
 ```bash
 yarn watch
 ```
+
+`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/README.md

@@ -0,0 +1,11 @@
+# Developer docs
+
+If you just want to run the Ente Photos desktop app locally or develop it, you
+can do:
+
+    yarn install
+    yarn dev
+
+The docs in this directory provide more details that some developers might find
+useful. You might also find the developer docs for
+[web](../../web/docs/README.md) useful.

desktop/docs/dependencies.md

@@ -0,0 +1,6 @@
+# Dependencies
+
+See [web/docs/dependencies.md](../../web/docs/dependencies.md) for general web
+specific dependencies. See [electron.md](electron.md) for our main dependency,
+Electron. The rest of this document describes the remaining, desktop specific
+dependencies that are used by the Photos desktop app.

desktop/docs/electron.md

@@ -0,0 +1,21 @@
+# Electron
+
+[Electron](https://www.electronjs.org) is a cross-platform (Linux, Windows,
+macOS) way for creating desktop apps using TypeScript.
+
+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 _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 `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

@@ -2,20 +2,19 @@
     "name": "ente",
     "version": "1.6.63",
     "private": true,
-    "description": "Desktop client for ente.io",
-    "author": "ente <code@ente.io>",
-    "main": "app/main.js",
+    "description": "Desktop client for Ente Photos",
+    "author": "Ente <code@ente.io>",
+    "main": "build/app/main.js",
     "scripts": {
-        "build": "yarn build-renderer && yarn build-main",
-        "build-main": "yarn install && tsc",
-        "build-renderer": "cd ui && yarn install && yarn export: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": "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/**/*.{js,jsx,ts,tsx}\"",
+        "lint": "yarn prettier --check . && eslint \"src/**/*.ts\"",
         "lint-fix": "yarn prettier --write . && eslint --fix .",
-        "start": "concurrently \"yarn start-main\" \"yarn start-renderer\"",
-        "start-main": "yarn build-main && electron app/main.js",
-        "start-renderer": "cd ui && yarn install && yarn dev:photos",
-        "test-release": "cross-env IS_TEST_RELEASE=true yarn build && electron-builder --config.compression=store",
         "watch": "tsc -w"
     },
     "dependencies": {
@@ -49,7 +48,6 @@
         "@typescript-eslint/eslint-plugin": "^5.28.0",
         "@typescript-eslint/parser": "^5.28.0",
         "concurrently": "^7.0.0",
-        "cross-env": "^7.0.3",
         "electron": "^25.8.4",
         "electron-builder": "^24.6.4",
         "electron-builder-notarize": "^1.2.0",
@@ -99,7 +97,7 @@
                     ]
                 }
             ],
-            "icon": "./build/icon.icns",
+            "icon": "./resources/icon.icns",
             "category": "Photography"
         },
         "mac": {
@@ -116,7 +114,7 @@
         "afterSign": "electron-builder-notarize",
         "extraFiles": [
             {
-                "from": "build",
+                "from": "resources",
                 "to": "resources",
                 "filter": [
                     "**/*"
@@ -129,14 +127,10 @@
             "node_modules/ffmpeg-static/package.json"
         ],
         "files": [
-            "app/**/*",
+            "build/app/**/*",
             {
-                "from": "ui/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,13 +3,15 @@
         "target": "es2021",
         "module": "commonjs",
         "esModuleInterop": true,
+        /* Emit the generated JS into build/app */
+        "outDir": "build/app",
         "noImplicitAny": true,
         "sourceMap": true,
-        "outDir": "app",
         "baseUrl": "src",
         "paths": {
             "*": ["node_modules/*"]
         }
     },
-    "include": ["src/**/*"]
+    /* Transpile all ts files in src/ */
+    "include": ["src/**/*.ts"]
 }

desktop/yarn.lock

@@ -1117,13 +1117,6 @@ crc@^3.8.0:
   dependencies:
     buffer "^5.1.0"
 
-cross-env@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
-  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
-  dependencies:
-    cross-spawn "^7.0.1"
-
 cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"

web/.gitignore

@@ -1,14 +1,17 @@
 # Node
 node_modules/
 
+# macOS
+.DS_Store
+
+# Editors
+.vscode/
+
+# Local env files
+.env
+.env.*.local
+
 # Next.js
 .next/
 out/
 next-env.d.ts
-
-# macOS
-.DS_Store
-
-# Local env files
-.env
-.env.*.local

web/docs/README.md

@@ -1,8 +1,9 @@
 # Developer docs
 
-If you just want to run ente locally or develop on it, you can do
+If you just want to run Ente's web apps locally or develop them, you can do
 
-    yarn
+    yarn install
     yarn dev
 
-The docs in this directory are for more advanced or infrequently needed details.
+The docs in this directory provide more details that some developers might find
+useful.