Create distributables for Windows + Linux (#284)

* try getting forge working just for building * build with forge * use forge only for vite bundling * revert some small changes * update pipelines * set up auto-update * add preview command * update typecheck * fix packages * Simplify install process by not allowing users to change install directory * Update included files * Removed commented code * fix loading the app when packaged * prettier --------- Co-authored-by: Benoit Coudour <[email protected]>
beyond-all-reason · Jan 5, 2025 · 30f7c5e · 30f7c5e
1 parent 7881864
commit 30f7c5e
Show file tree

Hide file tree

Showing 27 changed files with 2,699 additions and 576 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -8,32 +8,22 @@ on:
 
 jobs:
     build:
-        env:
-            NODE_ENV: "production"
         runs-on: ${{ matrix.os }}
         strategy:
             fail-fast: false
             matrix:
                 os: [windows-latest, ubuntu-latest]
-                node-version: [18]
+                node-version: [20.18.0]
 
         steps:
             - name: Check out Git repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: Install Node.js, NPM and Yarn
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node-version }}
-                  cache: "npm"
-
-            - name: Ensure fresh npm version (Windows pre-requirement)
-              # https://github.com/actions/setup-node/issues/411
-              run: npm i -g npm@8
-              if: ${{ matrix.os == 'windows-latest' }}
-
-            - name: Ensure fresh npm version
-              run: npm install -g npm@latest
+                  cache: npm
 
             - name: Build Env Information
               run: |
@@ -45,7 +35,7 @@ jobs:
 
             - name: Electron Build & Publish
               run: |
-                  npm run build
+                  npm run package
                   npm run release
               env:
                   NODE_OPTIONS: "--max-old-space-size=8192"

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -12,7 +12,7 @@ jobs:
             - name: Install Node.js, NPM and Yarn
               uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 20.18.0
                   cache: npm
 
             - name: Build Env Information

diff --git a/.gitignore b/.gitignore
@@ -43,3 +43,4 @@ thumbs.db
 /tsconfig.web.tsbuildinfo
 debug.log
 bun.lockb
+*.pfx
diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,8 @@ src/routes.ts
 node_modules
 typed-router.d.ts
 vendor
-docs
+docs
+dist
+.vite
+out
+buildResources
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -2,17 +2,17 @@
     "version": "0.2.0",
     "configurations": [
         {
+            "name": "Electron: Main",
             "type": "node",
-            "env": {
-                "NODE_OPTIONS": "--enable-source-maps"
-            },
             "request": "launch",
-            "name": "Electron: Main",
+            "cwd": "${workspaceFolder}",
             "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
             "windows": {
                 "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
             },
-            "cwd": "${workspaceFolder}",
+            "env": {
+                "NODE_OPTIONS": "--enable-source-maps"
+            },
             "console": "integratedTerminal"
         },
         {
@@ -21,7 +21,7 @@
             "request": "attach",
             "port": 9223,
             "webRoot": "${workspaceFolder}/src/renderer",
-            "timeout": 30000
+            "timeout": 60000
         }
     ],
     "compounds": [

diff --git a/README.md b/README.md
@@ -31,11 +31,87 @@ It is highly recommended to use [VSCode](https://code.visualstudio.com/) for dev
 
 ### Requirements
 
-- [Node.js 20](https://nodejs.org/en/download/)
+- [Node.js 20.18.0](https://nodejs.org/en/download/)
 
-### Project setup:
+### Local Development
 
 ```bash
 npm install
-npm run start
+npm start
 ```
+
+### Project Structure
+
+```
+.
+├──buildResources   # used by electron-builder
+├──src
+│  ├──main
+│  │  ├──main.ts
+│  │  └──...
+│  ├──preload
+│  │  ├──preload.ts
+│  │  └──...
+│  └──renderer      # with vue
+│     ├──public     # (optional) publicDir for renderer
+│     ├──index.ts
+│     ├──index.html
+│     └──...
+├──electron-builder.config.ts
+├──electron.vite.config.ts
+├──package.json
+└──...
+```
+
+- [**Main process**](https://www.electronjs.org/docs/latest/tutorial/process-model#the-main-process)
+    - Runs in a Node.js environment and has access to Node.js APIs
+    - Anything requiring access to the operating system or Node.js APIs needs to live here
+- [**Preload script**](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts)
+    - Runs in a Node.js environment
+    - Defines global objects that can be used in the renderer
+    - Handles communication between the main and renderer processes
+        - Uses Electron's ipcMain and ipcRenderer modules for inter-process communication (IPC).
+- [**Renderer process**](https://www.electronjs.org/docs/latest/tutorial/process-model#the-renderer-process)
+    - Runs in a web environment and has **no** direct access to Node.js APIs
+
+### Build & Publish:
+
+- [`electron-forge`](https://www.electronforge.io/config/plugins/vite)
+    - Builds the app with a pre-configured Vite setup for Electron apps
+    - This intentionally does not include `electron` or any other `node_modules` dependencies in the build
+        - Dependencies get added to the package by `electron-builder` with ASAR
+        - Note: apps that only have CJS exports need to be included in the build, e.g. `glob-promise`
+- [`electron-builder`](https://www.electron.build/)
+    - Packages Electron app for distribution
+        - Configured for Windows NSIS installer and Linux AppImage
+    - Handles publishing updates
+        - Auto-updates TBD
+
+### Commands
+
+- `npm start`
+    - Runs `electron-forge` in `development` mode
+    - **renderer** runs with Hot Module Replacement (HMR)
+    - **main** and **preload** are directly bundled to `.vite/build`
+- `npm run package`
+    - Runs `electron-forge` in `production` mode
+    - **renderer** us bundled to `.vite/renderer`
+    - **main** and **preload** are bundled to `.vite/build`
+- `npm run preview`
+    - Runs `electron-forge` in `production` mode, and runs electron
+    - **main**, **preload**, and **renderer** are bundled to `.vite/build`
+    - This is useful for validating the `production` build without packaging the app
+- `npm run build:win`
+    - Runs `npm run build` and `electron-builder`, building for Windows
+    - Outputs NSIS installer in `dist`
+- `npm run build:linux`
+    - Runs `npm run build` and `electron-builder`, building for Linux
+    - Outputs AppImage executable in `dist`
+- `npm run build:unpack`
+    - Runs `npm run build` and `electron-builder`, building an unpackaged directory
+    - Outputs the unpacked contents in `dist`
+    - Useful for testing
+- `npm run dev-cert` (optional and only for Windows development)
+    - Runs `electron-builder` to create a self-signed cert for Windows apps.
+    - After selecting "None" in the pop-up, a cert file should be created called `BAR Team.pfx`
+    - Then run `npm run build:win:dev-cert` to build a signed Windows installer
diff --git a/buildResources/icon.ico b/buildResources/icon.ico
diff --git a/src/renderer/assets/images/icon.png → buildResources/icon.png b/src/renderer/assets/images/icon.png → buildResources/icon.png
diff --git a/electron-builder.config.ts b/electron-builder.config.ts
@@ -0,0 +1,52 @@
+import { Configuration } from "electron-builder";
+
+/**
+ * @see https://www.electron.build/configuration
+ */
+const config: Configuration = {
+    appId: "BeyondAllReason",
+    productName: "Beyond All Reason",
+    files: [
+        "!**/.vscode/*",
+        "!{docs,src,out,tests,vendor}/*",
+        "!vite.*.config.{js,ts,mjs,cjs,mts}",
+        "!{eslint.config.mjs,.prettierignore,prettier.config.mjs,README.md}",
+        "!{.env,.env.*,.npmrc,pnpm-lock.yaml}",
+        "!{tsconfig.json,tsconfig.*.json}",
+        "!{electron-builder.config.ts,forge.config.cjs}",
+    ],
+    directories: { buildResources: "buildResources" },
+    asarUnpack: ["resources/**"],
+
+    publish: { provider: "github" },
+    fileAssociations: [
+        {
+            ext: "sdfz",
+            description: "BAR Replay File",
+            role: "Viewer",
+            icon: "icon.ico",
+            name: "SDFZ NAME HERE",
+        },
+    ],
+
+    // Windows
+    win: {
+        target: ["nsis"],
+    },
+    nsis: {
+        artifactName: "${productName}-${version}-setup.${ext}",
+        uninstallDisplayName: "${productName}",
+        oneClick: true,
+        perMachine: true,
+        allowToChangeInstallationDirectory: false,
+    },
+
+    // Linux
+    linux: {
+        target: ["AppImage"],
+        category: "Game",
+    },
+    appImage: {},
+};
+
+export default config;
diff --git a/forge.config.cjs b/forge.config.cjs
@@ -1,33 +1,6 @@
-const { MakerDeb } = require("@electron-forge/maker-deb");
-const { MakerRpm } = require("@electron-forge/maker-rpm");
-const { MakerFlatpak } = require("@electron-forge/maker-flatpak");
-const { MakerSquirrel } = require("@electron-forge/maker-squirrel");
 const { VitePlugin } = require("@electron-forge/plugin-vite");
 
 const config = {
-    packagerConfig: {
-        asar: false, // Cannot enable asar, it breaks map parsing
-    },
-    rebuildConfig: {},
-    makers: [
-        new MakerSquirrel({
-            authors: "BAR Team",
-            description: "Beyond All Reason Lobby",
-        }),
-        new MakerRpm({
-            options: {
-                mimeType: ["application/sdfz"],
-                categories: ["Game"],
-                icon: "src/renderer/assets/images/icon.png",
-                homepage: "https://www.beyondallreason.info/",
-                license: "MIT",
-                name: "bar-lobby",
-                productName: "BAR Lobby",
-            },
-        }),
-        new MakerDeb({}),
-        new MakerFlatpak({}),
-    ],
     plugins: [
         new VitePlugin({
             build: [
@@ -49,20 +22,6 @@ const config = {
                 },
             ],
         }),
-        // {
-        //     name: "@electron-forge/plugin-auto-unpack-natives",
-        //     config: {},
-        // },
-        // Uncomment and configure fuses if needed:
-        // new FusesPlugin({
-        //     version: FuseVersion.V1,
-        //     [FuseV1Options.RunAsNode]: false,
-        //     [FuseV1Options.EnableCookieEncryption]: true,
-        //     [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
-        //     [FuseV1Options.EnableNodeCliInspectArguments]: false,
-        //     [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
-        //     [FuseV1Options.OnlyLoadAppFromAsar]: true,
-        // }),
     ],
 };
 

diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
 
     <body>
         <div id="app"></div>
-        <script src="/src/renderer/index.ts" type="module"></script>
     </body>
+
+    <script src="./src/renderer/index.ts" type="module"></script>
 </html>