Initial commit

.github/workflows/electron.yml

@@ -0,0 +1,44 @@
+name: Build
+
+on:
+  push:
+    branches: [master, main]
+    tags:
+      - "*.*.*"
+
+jobs:
+  build_on_mac:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@master
+        with:
+          node-version: 16.x
+      # - name: see directory in electron_dist
+      #   run: ls ./electron
+      # - name: add key to single keychain
+      #   run: security import ./electron/june-ai-single2-certs-electron.p12 -P ${{ secrets.CSC_KEY_PASSWORD }}
+      # - name: electron mac os security identities
+      #   run: security find-identity -v
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build
+        run: yarn build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: ls
+        run: ls ./build
+
+      - name: Retrieve information from package.json
+        uses: myrotvorets/info-from-package-json-action@0.0.2
+        id: package_json
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        # if: startsWith(github.ref, 'refs/tags/')
+        with:
+          tag_name: "0.1.0"
+          files: |
+            build/electron-vite-svelte-${{ steps.package_json.outputs.packageVersion }}.dmg

.gitignore

@@ -0,0 +1,16 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/npm-debug.log*
+/yarn-error.log
+
+# misc
+.DS_Store
+
+# local
+*.local
+
+# dist
+dist
+build

License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Pengsha Ying and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,23 @@
+# vite-electron-svelte-ts
+
+- ⚡ **Full stack uses Vite** to run Electron application, including main process.
+- 💡 The project is managed using **[yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)**, Therefore, it is recommended to use **Yarn** as a packages management tool.
+
+## Usage
+
+```bash
+git clone https://github.com/narze/vite-electron-svelte-ts.git
+cd vite-electron-svelte-ts
+yarn
+yarn start
+```
+
+## Build
+
+```base
+yarn build
+```
+
+## License
+
+[MIT](License)

build.config.js

@@ -0,0 +1,40 @@
+/**
+ * @type {import('electron-builder').CliOptions}
+ * {@link https://www.electron.build/configuration/configuration}
+ */
+const options = {
+  config: {
+    productName: "electron-vite-svelte",
+    appId: "com.example.yourapp",
+    directories: {
+      output: "build",
+    },
+    files: ["dist/renderer/**/*", "dist/main/**/*"],
+    dmg: {
+      contents: [
+        {
+          x: 410,
+          y: 150,
+          type: "link",
+          path: "/Applications",
+        },
+        {
+          x: 130,
+          y: 150,
+          type: "file",
+        },
+      ],
+    },
+    mac: {
+      icon: "public/icons/icon.icns",
+    },
+    win: {
+      icon: "public/icons/icon.ico",
+    },
+    linux: {
+      icon: "public/icons",
+    },
+  },
+}
+
+module.exports = options

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vite-electron-svelte-ts",
+  "version": "0.1.0",
+  "description": "A Electron application create by Vite",
+  "main": "./dist/main/main.cjs.js",
+  "repository": "https://github.com/narze/vite-electron-svelte-ts.git",
+  "author": "Manassarn Manoonchai <manassarn@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "src/*"
+    ]
+  },
+  "scripts": {
+    "start": "node ./scripts/dev-runner",
+    "build": "node ./scripts/build"
+  },
+  "devDependencies": {
+    "chalk": "^4.1.1",
+    "electron": "^12.0.8",
+    "electron-builder": "^22.10.5",
+    "listr": "^0.14.3",
+    "vite": "^2.3.3"
+  }
+}

scripts/build.js

@@ -0,0 +1,69 @@
+const path = require('path')
+const chalk = require('chalk')
+const ListR = require('listr')
+const builder = require('electron-builder')
+const { build: viteBuild, createLogger } = require('vite')
+
+const builderConfig = require('../build.config')
+const { MAIN_ROOT, RENDERER_ROOT } = require('./constants')
+
+function build() {
+  const tasks = new ListR([
+    {
+      title: 'building renderer process',
+      task: buildRenderer
+    },
+    {
+      title: 'building main process',
+      task: buildMainProcess
+    }
+  ])
+
+  tasks.run()
+    .then(() => {
+      builder.build(builderConfig)
+    })
+    .catch((error) => {
+      createLogger().error(
+        chalk.red(`error during build application:\n${error.stack}`)
+      )
+      process.exit(1)
+    })
+}
+
+async function buildRenderer() {
+  try {
+    const rendererOutput = await viteBuild({
+      root: RENDERER_ROOT,
+      base: './',
+      build: {
+        outDir: path.resolve(__dirname, '../dist/renderer')
+      }
+    })
+    return rendererOutput
+  } catch (error) {
+    createLogger().error(
+      chalk.red(`error during build renderer:\n${error.stack}`)
+    )
+    process.exit(1)
+  }
+}
+
+async function buildMainProcess() {
+  try {
+    const buildOutput = await viteBuild({
+      root: MAIN_ROOT,
+      build: {
+        outDir: path.resolve(__dirname, '../dist/main'),
+      }
+    })
+    return buildOutput
+  } catch (error) {
+    createLogger().error(
+      chalk.red(`error during build main process:\n${error.stack}`)
+    )
+    process.exit(1)
+  }
+}
+
+build()

scripts/constants.js

@@ -0,0 +1,6 @@
+const path = require('path')
+
+module.exports = {
+  MAIN_ROOT: path.resolve(__dirname, '../src/main'),
+  RENDERER_ROOT: path.resolve(__dirname, '../src/renderer')
+}

scripts/dev-runner.js

@@ -0,0 +1,99 @@
+const path = require('path')
+const chalk = require('chalk')
+const electron = require('electron')
+const { spawn } = require('child_process')
+const { createServer, createLogger, build } = require('vite')
+const { MAIN_ROOT, RENDERER_ROOT } = require('./constants')
+
+let manualRestart
+let electronProcess 
+
+async function startRenderer() {
+  try {
+    const viteServer = await createServer({
+      root: RENDERER_ROOT
+    })
+    await viteServer.listen()
+    return viteServer
+  } catch (error) {
+    createLogger().error(
+      chalk.red(`error when starting dev server:\n${error.stack}`)
+    )
+  }
+}
+
+async function watchMainProcess() {
+  try {
+    const rollupWatcher = await build({
+      root: MAIN_ROOT,
+      mode: 'development',
+      build: {
+        emptyOutDir: false,
+        outDir: path.resolve(__dirname, '../dist/dev'),
+        watch: true
+      }
+    })
+    return await new Promise((resolve, reject) => {
+      rollupWatcher.on('event', (event) => {
+        if (event.code === 'BUNDLE_END') {
+          resolve(rollupWatcher)
+        }
+      })
+    })
+  } catch (error) {
+    createLogger().error(
+      chalk.red(`error during watch main process:\n${error.stack}`)
+    )
+    process.exit(1)
+  }
+}
+
+function startElectron(RENDERER_URL) {
+  let args = [
+    '--inspect=5858',
+    path.join(__dirname, '../dist/dev/main.cjs.js'),
+  ]
+
+  if (process.env.npm_execpath.endsWith('yarn.js')) {
+    args = args.concat(process.argv.slice(3))
+  } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
+    args = args.concat(process.argv.slice(2))
+  }
+
+  electronProcess = spawn(electron, args, {env: {
+    RENDERER_URL
+  }})
+
+  electronProcess.on('close', () => {
+    if (!manualRestart) process.exit()
+  })
+}
+
+async function start() {
+  const rendererServer = await startRenderer()
+  const { port = 3000, https = false} = rendererServer.config.server
+  const RENDERER_URL = `http${https ? 's' : ''}://localhost:${port}`
+
+  const mainWatcher = await watchMainProcess()
+
+  startElectron(RENDERER_URL)
+
+  mainWatcher.on('event', (event) => {
+    if (event.code !== 'BUNDLE_END') {
+      return
+    }
+
+    if (electronProcess && electronProcess.kill) {
+      manualRestart = true
+      process.kill(electronProcess.pid)
+      electronProcess = null
+      startElectron(RENDERER_URL)
+
+      setTimeout(() => {
+        manualRestart = false
+      }, 5000)
+    }
+  })
+}
+
+start()

src/main/env.d.ts

@@ -0,0 +1,8 @@
+interface ImportMeta {
+  env: {
+    MODE: string
+    BASE_URL: string
+    PROD: boolean
+    DEV: boolean
+  }
+}

src/main/index.ts

@@ -0,0 +1,30 @@
+import * as path from 'path'
+import { app, BrowserWindow } from 'electron'
+
+const loadURL = import.meta.env.PROD
+  ? `file://${path.resolve(__dirname, '../renderer/index.html')}`
+  : process['env'].RENDERER_URL || 'http://localhost:3000'
+
+function createWindow() {
+  const mainWindow = new BrowserWindow({ 
+    width: 800,
+    height: 600,
+    icon: path.resolve(__dirname, '../../public/icons/256x256.png')
+  })
+
+  mainWindow.loadURL(loadURL)
+
+  // mainWindow.webContents.openDevTools()
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})