Improving client setup

.changeset/four-years-search.md

@@ -0,0 +1,23 @@
+---
+'@elek-io/client': minor
+---
+
+Initial setup - pre GUI
+
+- [x] Debugging main & renderer in VSCode. See https://www.electronforge.io/advanced/debugging
+- [x] CI/CD with lint, test & build
+- [x] Custom file protocol handler to access Assets on disk
+- [x] Working IPC calls
+- [x] Working IPC call to Core with git command execution with included dugite binary
+- [x] Using react inside renderer
+- [x] Typesafe routing working with data loading. See https://tanstack.com/router/latest
+- [x] Sentry.io
+  - [x] Error monitoring in renderer, main & preload
+  - [x] Replays on error
+  - [x] Performance monitoring
+  - [x] Profiling
+  - [x] Creating releases incl. sourcemap upload
+- [x] First security & best practice audit. See https://github.com/doyensec/electronegativity & https://www.electronjs.org/docs/latest/tutorial/security
+- [x] Automatic updates working. See https://www.electronforge.io/advanced/auto-update (Should work but needs certificates I do not have for not - need to test later)
+- [x] Using an custom app icon
+- [x] Custom borderless window with draggable area

.github/workflows/cd.yml

@@ -7,11 +7,14 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
   release:
-    name: Release
+    name: Releasing on ${{ matrix.platform }} with Node.js ${{ matrix.node-version }}
     timeout-minutes: 15
     strategy:
       matrix:
-        platform: [ubuntu-latest, macos-latest, windows-latest]
+        # @see https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories
+        # macos-12 = intel
+        # macos-14 = M1 (arm)
+        platform: [ubuntu-22.04, macos-12, macos-14, windows-2022]
         node-version: [18]
     runs-on: ${{ matrix.platform }}
     steps:
@@ -27,7 +30,7 @@ jobs:
         run: yarn install
       - name: Run linter
         run: yarn run lint
-      - name: Create pull request or publish to GitHub
+      - name: Build and create pull request or publish to GitHub
         uses: changesets/action@v1
         with:
           title: 'WIP: Release x.x.x'

.github/workflows/ci.yml

@@ -5,11 +5,14 @@ on:
 
 jobs:
   test:
-    name: Test
+    name: Testing on ${{ matrix.platform }} with Node.js ${{ matrix.node-version }}
     timeout-minutes: 15
     strategy:
       matrix:
-        platform: [ubuntu-latest, macos-latest, windows-latest]
+        # @see https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners/about-github-hosted-runners#standard-github-hosted-runners-for-public-repositories
+        # macos-12 = intel
+        # macos-14 = M1 (arm)
+        platform: [ubuntu-22.04, macos-12, macos-14, windows-2022]
         node-version: [18]
     runs-on: ${{ matrix.platform }}
     steps:
@@ -22,8 +25,22 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: npm ic
+        run: yarn install
       - name: Run linter
-        run: npm run lint
+        run: yarn run lint
+      - name: Identify misconfigurations and security anti-patterns
+        uses: doyensec/electronegativity-action@v2
+      - name: Upload report
+        uses: github/codeql-action/upload-sarif@v1
+        with:
+          sarif_file: ../electronegativity_results
       - name: Build
-        run: npm run build
+        run: yarn run build
+      # Uncomment if necessary
+      # For example to inspect the build applications
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: artifact_${{ matrix.platform }}
+          path: out/make
+          if-no-files-found: error

.gitignore

@@ -90,3 +90,6 @@ typings/
 
 # Electron-Forge
 out/
+
+# Sentry Config File
+.env.sentry-build-plugin

.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+  "configurations": [
+    {
+      "name": "Dev (Electron Main)",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
+      },
+      // runtimeArgs will be passed directly to your Electron application
+      "runtimeArgs": [],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal"
+    },
+    {
+      "name": "Build process",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["run", "build"],
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    }
+  ]
+}

forge.config.ts

@@ -1,32 +1,38 @@
-import { MakerDeb } from '@electron-forge/maker-deb';
-import { MakerDMG } from '@electron-forge/maker-dmg';
-import { MakerRpm } from '@electron-forge/maker-rpm';
+// import { MakerDeb } from '@electron-forge/maker-deb';
+// import { MakerDMG } from '@electron-forge/maker-dmg';
+// import { MakerRpm } from '@electron-forge/maker-rpm';
 import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
 import { VitePlugin } from '@electron-forge/plugin-vite';
 import type { ForgeConfig } from '@electron-forge/shared-types';
 
 const config: ForgeConfig = {
-  packagerConfig: {},
+  packagerConfig: {
+    icon: 'icons/icon',
+  },
   rebuildConfig: {},
   makers: [
     new MakerSquirrel({
       title: 'elek.io Client',
       setupExe: 'elek.io Client',
       name: 'client',
+      // The ICO file to use as the icon for the generated Setup.exe
+      setupIcon: 'icons/icon.ico',
     }),
-    new MakerDMG({}),
-    new MakerRpm({
-      options: {
-        productName: 'elek.io Client',
-        bin: 'elek.io Client',
-      },
-    }),
-    new MakerDeb({
-      options: {
-        productName: 'elek.io Client',
-        bin: 'elek.io Client',
-      },
-    }),
+    new MakerZIP(),
+    // new MakerDMG(),
+    // new MakerRpm({
+    //   options: {
+    //     productName: 'elek.io Client',
+    //     bin: 'elek.io Client',
+    //   },
+    // }),
+    // new MakerDeb({
+    //   options: {
+    //     productName: 'elek.io Client',
+    //     bin: 'elek.io Client',
+    //   },
+    // }),
   ],
   publishers: [
     {
@@ -48,11 +54,11 @@ const config: ForgeConfig = {
       build: [
         {
           // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-          entry: 'src/main.ts',
+          entry: 'src/main/index.ts',
           config: 'vite.main.config.ts',
         },
         {
-          entry: 'src/preload.ts',
+          entry: 'src/renderer/preload.ts',
           config: 'vite.preload.config.ts',
         },
       ],

icons/README.md

@@ -0,0 +1,3 @@
+# Application icons
+
+Please refer to the [Electron Forge documentation](https://www.electronforge.io/guides/create-and-add-icons).

index.html

@@ -4,9 +4,35 @@
     <meta charset="UTF-8" />
     <title>Hello World!</title>
   </head>
-  <body>
+  <body style="margin: 0; padding: 0">
+    <div
+      style="
+        display: flex;
+        background-color: grey;
+        -webkit-app-region: drag;
+        height: 28px;
+      "
+    ></div>
     <h1>💖 Hello World!</h1>
     <p>Welcome to your Electron application.</p>
-    <script type="module" src="/src/renderer.ts"></script>
+    <p>
+      Internal navigation to any
+      <a href="https://google.com">origin</a> is currently not allowed.
+    </p>
+    <p>
+      Navigation to an URL with the intent to
+      <a href="https://google.com" target="_blank">open a new window</a> should
+      open given URL in the OS's default browser (external) instead -
+      <a href="https://elek.io" target="_blank"
+        >if the origin is on the whitelist</a
+      >.
+    </p>
+    <button
+      onclick="window.ipc.core.user.get().then((result) => console.log('Result:', result)).catch((err) => console.log('Error:', err))"
+    >
+      Test IPC
+    </button>
+    <div id="app"></div>
+    <script type="module" src="/src/renderer/index.ts"></script>
   </body>
 </html>

package.json

@@ -14,7 +14,7 @@
     "url": "https://elek.io"
   },
   "license": "todo",
-  "main": ".vite/build/main.js",
+  "main": ".vite/build/index.js",
   "scripts": {
     "lint": "eslint --ext .ts,.tsx .",
     "dev": "electron-forge start",
@@ -23,7 +23,17 @@
     "release": "electron-forge publish"
   },
   "dependencies": {
-    "electron-squirrel-startup": "^1.0.0"
+    "@elek-io/core": "^0.1.1",
+    "@sentry/electron": "^4.17.0",
+    "@sentry/react": "7.92.0",
+    "@sentry/vite-plugin": "^2.13.0",
+    "@tanstack/react-router": "^1.15.23",
+    "@tanstack/router-devtools": "^1.15.23",
+    "dugite": "^2.5.2",
+    "electron-squirrel-startup": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "update-electron-app": "^3.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
@@ -32,12 +42,17 @@
     "@electron-forge/maker-dmg": "^7.2.0",
     "@electron-forge/maker-rpm": "^7.2.0",
     "@electron-forge/maker-squirrel": "^7.2.0",
+    "@electron-forge/maker-zip": "^7.2.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
     "@electron-forge/publisher-github": "^7.2.0",
+    "@tanstack/router-vite-plugin": "^1.15.22",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "electron": "^28.2.1",
+    "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.0.1",
     "eslint-plugin-import": "^2.25.0",
     "ts-node": "^10.0.0",