build: copy static assets in dev

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

.github/actions/setup-node/action.yml

@@ -4,18 +4,28 @@
 name: Setup Node, pnpm and install dependencies
 description: Setup pnpm and Node.js with caching
 
+inputs:
+  run-install:
+    description: 'Whether to run `pnpm install`'
+    required: false
+    default: 'true'
+
 runs:
   using: composite
   steps:
     - name: Setup pnpm
       uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
+      with:
+        run_install: false
 
     - name: Setup Node
       uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
       with:
         node-version-file: .nvmrc
         cache: pnpm
+        cache-dependency-path: pnpm-lock.yaml
 
     - name: Install dependencies
+      if: ${{ inputs.run-install == 'true' }}
       run: pnpm install --frozen-lockfile
       shell: bash

.github/workflows/publish.yml

@@ -37,6 +37,7 @@ jobs:
 
   release:
     name: Publish ${{ matrix.platform }} (electron-builder)
+    needs: prepare
     strategy:
       matrix:
         include:
@@ -67,7 +68,7 @@ jobs:
       - name: Build application
         run: pnpm build
         env:
-          OAUTH_CLIENT_ID: ${{ secrets.OAUTH_CLIENT_ID }}
+          VITE_OAUTH_CLIENT_ID: ${{ secrets.OAUTH_CLIENT_ID }}
 
       - name: Package and publish for ${{ matrix.platform }}
         run: ${{ matrix.package-cmd }}

.github/workflows/renovate.yml

@@ -21,16 +21,9 @@ jobs:
       - name: Checkout
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
+      - uses: ./.github/actions/setup-node
         with:
-          run_install: false
-
-      - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
-        with:
-          node-version-file: .nvmrc
-          cache: pnpm
+          run-install: "false"
 
       - name: Install Renovate
         run: pnpm install --global renovate

.github/workflows/test.yml

@@ -15,7 +15,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - uses: ./.github/actions/setup-node
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
 
       - name: Check TypeScript
         run: pnpm tsc --noEmit

CONTRIBUTING.md

@@ -10,7 +10,7 @@ We also suggest you read the [Project Philosophy](#project-philosophy) in our do
 > [!TIP]
 > _Optional: If you prefer to use your own OAuth credentials, you can do so by passing them as environment variables when bundling the app. This is optional as the app has some default "development" keys (use at your own discretion)._
 > ```shell
-> OAUTH_CLIENT_ID="123" pnpm build
+> VITE_OAUTH_CLIENT_ID="123" pnpm build
 > ```
 
 To get started:
@@ -25,11 +25,6 @@ Copy the `.env.template` to `.env` and add update `GITHUB_TOKEN` with a GitHub P
 GITHUB_TOKEN=<some personal access token>
 ```
 
-Build static resources (tray icons, twemojis, etc). You only need to rebuild if you change static assets:
-  ```shell
-  pnpm build
-  ```
-
 Start development mode (includes GraphQL codegen and hot module reload):
   ```shell
   pnpm dev

package.json

@@ -125,7 +125,6 @@
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-electron": "0.29.1",
     "vite-plugin-electron-renderer": "0.14.6",
-    "vite-plugin-static-copy": "3.3.0",
     "vitest": "4.1.0",
     "zustand": "5.0.12"
   },

src/renderer/constants.ts

@@ -57,7 +57,7 @@ export const Constants = {
 
   GITHUB_HOSTNAME: 'github.com' as Hostname,
 
-  OAUTH_DEVICE_FLOW_CLIENT_ID: process.env.OAUTH_CLIENT_ID as ClientID,
+  OAUTH_DEVICE_FLOW_CLIENT_ID: import.meta.env.VITE_OAUTH_CLIENT_ID as ClientID,
 
   // GitHub Enterprise Cloud with Data Residency uses *.ghe.com domains
   GITHUB_ENTERPRISE_CLOUD_DATA_RESIDENCY_HOSTNAME: 'ghe.com',

src/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ViteTypeOptions {
+  strictImportMetaEnv: unknown;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_OAUTH_CLIENT_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

vite.config.ts

@@ -1,3 +1,5 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import twemoji from '@discordapp/twemoji';
@@ -7,15 +9,15 @@ import type { Plugin } from 'vite';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import electron from 'vite-plugin-electron/simple';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 import { Constants } from './src/renderer/constants';
 
 /**
- * Helper to generate Twemoji static copy targets.
- * Extracts all emojis from Constants.EMOJIS and maps them to their SVG filenames.
+ * Vite plugin that copies static assets to disk on startup.
+ * Runs in both dev and build modes so the Electron main process can resolve
+ * asset file URLs without requiring a prior `pnpm build`.
  */
-const getTwemojiCopyTargets = () => {
+const copyStaticAssetsPlugin = (): Plugin => {
   const flatten = (obj: object): string[] =>
     Object.values(obj).flatMap((v) =>
       Array.isArray(v) ? v : flatten(v as object),
@@ -27,15 +29,59 @@ const getTwemojiCopyTargets = () => {
       .split('/')
       .pop();
 
-  const allEmojis = flatten(Constants.EMOJIS);
-  const emojiFilenames = allEmojis.map((emoji) =>
-    extractSvgFilename(twemoji.parse(emoji, { folder: 'svg', ext: '.svg' })),
-  );
+  let isBuild = false;
 
-  return emojiFilenames.map((filename) => ({
-    src: `../../node_modules/@discordapp/twemoji/dist/svg/${filename}`,
-    dest: 'assets/images/twemoji',
-  }));
+  const copyAssets = () => {
+    // Copy the root assets/ directory (images, sounds, etc.) into build/
+    fs.cpSync(
+      fileURLToPath(new URL('assets', import.meta.url)),
+      fileURLToPath(new URL('build/assets', import.meta.url)),
+      { recursive: true },
+    );
+
+    // Copy individual Twemoji SVGs needed by the app into build/assets/images/twemoji/
+    const twemojiSrcDir = fileURLToPath(
+      new URL('node_modules/@discordapp/twemoji/dist/svg', import.meta.url),
+    );
+    const twemojiDestDir = fileURLToPath(
+      new URL('build/assets/images/twemoji', import.meta.url),
+    );
+
+    fs.mkdirSync(twemojiDestDir, { recursive: true });
+
+    const allEmojis = flatten(Constants.EMOJIS);
+    for (const emoji of allEmojis) {
+      const filename = extractSvgFilename(
+        twemoji.parse(emoji, { folder: 'svg', ext: '.svg' }),
+      );
+      if (filename) {
+        fs.copyFileSync(
+          path.join(twemojiSrcDir, filename),
+          path.join(twemojiDestDir, filename),
+        );
+      }
+    }
+  };
+
+  return {
+    name: 'copy-static-assets',
+    configResolved(config) {
+      isBuild = config.command === 'build';
+    },
+    // In serve/dev mode, copy before the build starts (emptyOutDir doesn't run).
+    // In build mode, copy after all output is written — buildStart runs before
+    // Vite's emptyOutDir wipe, so assets copied there would be deleted.
+    buildStart() {
+      if (!isBuild) {
+        copyAssets();
+      }
+    },
+    closeBundle() {
+      if (isBuild) {
+        copyAssets();
+      }
+    },
+  };
 };
 
 /**
@@ -90,6 +136,9 @@ export default defineConfig(({ command }) => {
         main: {
           entry: fileURLToPath(new URL('src/main/index.ts', import.meta.url)),
           vite: {
+            // The outer Vite config sets root:'src/renderer', so we must
+            // explicitly tell the main-process sub-build where to find .env files.
+            envDir: fileURLToPath(new URL('.', import.meta.url)),
             build: {
               outDir: fileURLToPath(new URL('build', import.meta.url)),
               rollupOptions: {
@@ -118,15 +167,7 @@ export default defineConfig(({ command }) => {
           },
         },
       }),
-      viteStaticCopy({
-        targets: [
-          ...getTwemojiCopyTargets(),
-          {
-            src: '../../assets',
-            dest: '.',
-          },
-        ],
-      }),
+      copyStaticAssetsPlugin(),
     ],
     root: 'src/renderer',
     publicDir: false as const,
@@ -135,17 +176,5 @@ export default defineConfig(({ command }) => {
       outDir: fileURLToPath(new URL('build', import.meta.url)),
       emptyOutDir: true,
     },
-    // Define build-time replacements for the main process bundle.
-    // During CI builds `process.env.OAUTH_CLIENT_ID` will be injected via the environment.
-    define: isBuild
-      ? {
-          'process.env.OAUTH_CLIENT_ID': JSON.stringify(
-            process.env.OAUTH_CLIENT_ID ?? '',
-          ),
-        }
-      : {
-          // Development Keys - See CONTRIBUTING.md
-          'process.env.OAUTH_CLIENT_ID': JSON.stringify('Ov23liQIkFs5ehQLNzHF'),
-        },
   };
 });