build: copy static resources for dev mode (#2725)

* build: copy static assets in dev

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

* build: copy static assets in dev

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

---------

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

Author: setchy

.env.template

@@ -1,2 +1,5 @@
 # GitHub Personal Access Token for GraphQL Codegen
-GITHUB_TOKEN=some-pat
+GITHUB_TOKEN=some-pat
+
+# Custom OAuth Client ID for GitHub Device Flow
+#OAUTH_CLIENT_ID=some-client-id

.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:

.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

@@ -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"
   },

pnpm-lock.yaml

@@ -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,