Add public folder support

configs/electron-builder.config.mjs

@@ -1,41 +1,33 @@
-
 /**
  * @type {import('electron-builder').Configuration}
  */
 const config = {
-  appId: "308487730@qq.com",
+  appId: '308487730@qq.com',
   asar: true,
   directories: {
-    output: "release/${version}"
+    output: 'release/${version}',
+    buildResources: 'public',
   },
-  files: [
-    "!node_modules",
-    "dist",
-    "package.json"
-  ],
+  files: ['!node_modules', 'dist', 'package.json'],
   mac: {
-    artifactName: "${productName}_${version}.${ext}",
-    target: [
-      "dmg"
-    ]
+    artifactName: '${productName}_${version}.${ext}',
+    target: ['dmg'],
   },
   win: {
     target: [
       {
-        target: "nsis",
-        arch: [
-          "x64"
-        ]
-      }
+        target: 'nsis',
+        arch: ['x64'],
+      },
     ],
-    artifactName: "${productName}_${version}.${ext}"
+    artifactName: '${productName}_${version}.${ext}',
   },
   nsis: {
     oneClick: false,
     perMachine: false,
     allowToChangeInstallationDirectory: true,
-    deleteAppDataOnUninstall: false
-  }
+    deleteAppDataOnUninstall: false,
+  },
 }
 
 export { config }

scripts/build.mjs

@@ -4,6 +4,7 @@ import { build as viteBuild } from 'vite'
 import { build as electronBuild, Platform } from 'electron-builder'
 import { config as builderConfig } from '../configs/electron-builder.config.mjs'
 import chalk from 'chalk'
+import path from 'path'
 
 const TAG = chalk.bgBlue('[build.mjs]')
 
@@ -16,7 +17,17 @@ const viteConfigs = {
 async function buildElectron() {
   for (const [name, configPath] of Object.entries(viteConfigs)) {
     console.group(TAG, name)
-    await viteBuild({ configFile: configPath, mode: process.env.NODE_ENV })
+
+    const config = {
+      configFile: configPath,
+      mode: process.env.NODE_ENV,
+    }
+
+    if (name === 'reactTs') {
+      config.publicDir = path.resolve('./public')
+    }
+
+    await viteBuild(config)
     console.groupEnd()
     console.log() // for beautiful log.
   }

scripts/watch.mjs

@@ -1,14 +1,14 @@
 process.env.NODE_ENV = 'development'
 
 import { readFileSync } from 'fs'
-import { join } from 'path'
+import { resolve, join } from 'path'
 import electron from 'electron'
 import { spawn } from 'child_process'
 import { createServer, build as viteBuild } from 'vite'
-import chalk from 'chalk'
 
-const TAG = chalk.bgGreen('[dev.mjs]')
-const pkg = JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf8'))
+const pkg = JSON.parse(
+  readFileSync(join(process.cwd(), 'package.json'), 'utf8')
+)
 
 /**
  * @param {{ name: string; configFile: string; writeBundle: import('rollup').OutputPlugin['writeBundle'] }} param0
@@ -22,9 +22,7 @@ function getWatcher({ name, configFile, writeBundle }) {
       watch: {},
     },
     configFile,
-    plugins: [
-      { name, writeBundle },
-    ],
+    plugins: [{ name, writeBundle }],
   })
 }
 
@@ -72,7 +70,10 @@ async function watchPreload(viteDevServer) {
 }
 
 // bootstrap
-const viteDevServer = await createServer({ configFile: 'configs/vite.renderer.ts' })
+const viteDevServer = await createServer({
+  configFile: 'configs/vite.renderer.ts',
+  publicDir: resolve('./public'),
+})
 
 await viteDevServer.listen()
 await watchPreload(viteDevServer)

src/renderer/src/App.tsx

@@ -49,6 +49,10 @@ function App() {
           >
             Vite Docs
           </a>
+          <div>
+            Place static files into the public folder
+            <img style={{ width: 100 }} src="./img/node.png" />
+          </div>
         </p>
       </header>
     </div>