Skip to content

Commit c34130c

Browse files
LarrMarburgerundergroundwires
LarrMarburger
authored and
undergroundwires
committed
Migrate to electron-vite and electron-builder
- Switch from deprecated Vue CLI plugin to `electron-vite` (see nklayman/vue-cli-plugin-electron-builder#1982) - Update main/preload scripts to use `index.cjs` filenames to support `"type": "module"`, resolving crash issue (#233). This crash was related to Electron not supporting ESM (see electron/asar#249, electron/electron#21457). - This commit completes migration to Vite from Vue CLI (#230). Structure changes: - Introduce separate folders for Electron's main and preload processes. - Move TypeHelpers to `src/` to mark tit as accessible by the rest of the code. Config changes: - Make `vite.config.ts` reusable by Electron configuration. - On electron-builder, use `--publish` flag instead of `-p` for clarity. Tests: - Add log for preload script loading verification. - Implement runtime environment sanity checks. - Enhance logging in `check-desktop-runtime-errors`.
1 parent aa94981 commit c34130c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1014
-2597
lines changed

‎.github/workflows/checks.build.yaml

+8-8
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,15 @@ jobs:
3232
name: Build
3333
run: npm run build -- --mode ${{ matrix.mode }}
3434

35-
# A new job is used due to environments/modes different from Vue CLI, https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1626
3635
build-desktop:
3736
strategy:
3837
matrix:
3938
os: [ macos, ubuntu, windows ]
40-
mode: [ development, production ] # "test" is not supported https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1627
39+
mode: [
40+
# electron-vite modes: https://electron-vite.org/guide/env-and-mode.html#global-env-variables
41+
development, # Used by `dev` command
42+
production, # Used by `build` and `preview` commands
43+
]
4144
fail-fast: false # Allows to see results from other combinations
4245
runs-on: ${{ matrix.os }}-latest
4346
steps:
@@ -51,14 +54,11 @@ jobs:
5154
name: Install dependencies
5255
run: npm ci
5356
-
54-
name: Install cross-env
55-
# Used to set NODE_ENV due to https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1626
56-
run: npm install --global cross-env
57+
name: Prebuild
58+
run: npm run electron:prebuild -- --mode ${{ matrix.mode }}
5759
-
5860
name: Build
59-
run: |-
60-
cross-env-shell NODE_ENV=${{ matrix.mode }}
61-
npm run electron:build -- --publish never --mode ${{ matrix.mode }}
61+
run: npm run electron:build -- --publish never
6262

6363
create-icons:
6464
strategy:

‎.github/workflows/release.desktop.yaml

+16-7
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,29 @@ jobs:
1313
fail-fast: false # So publish runs for other OSes if one fails
1414
runs-on: ${{ matrix.os }}-latest
1515
steps:
16-
- uses: actions/checkout@v2
16+
-
17+
uses: actions/checkout@v2
1718
with:
1819
ref: master # otherwise it defaults to the version tag missing bump commit
1920
fetch-depth: 0 # fetch all history
20-
- name: Checkout to bump commit
21+
-
22+
name: Checkout to bump commit
2123
run: git checkout "$(git rev-list "${{ github.event.release.tag_name }}"..master | tail -1)"
22-
- name: Setup node
24+
-
25+
name: Setup node
2326
uses: ./.github/actions/setup-node
24-
- name: Install dependencies
27+
-
28+
name: Install dependencies
2529
run: npm ci
26-
- name: Run unit tests
30+
-
31+
name: Run unit tests
2732
run: npm run test:unit
28-
- name: Publish desktop app
29-
run: npm run electron:build -- -p always # https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#upload-release-to-github
33+
-
34+
name: Prebuild
35+
run: npm run electron:prebuild
36+
-
37+
name: Build and publish
38+
run: npm run electron:build -- --publish always
3039
env:
3140
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
3241
EP_GH_IGNORE_TIME: true # Otherwise publishing fails if GitHub release is more than 2 hours old https://github.com/electron-userland/electron-builder/issues/2074

‎docs/development.md

+7
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ You could run other types of tests as well, but they may take longer time and ov
4343
- Start a local web server that serves the built solution from `./dist`.
4444
- 💡 Run `npm run build` before `npm run preview`.
4545

46+
**Desktop apps:**
47+
48+
- `npm run electron:dev`: The command will build the main process and preload scripts source code, and start a dev server for the renderer, and start the Electron app.
49+
- `npm run electron:preview`: The command will build the main process, preload scripts and renderer source code, and start the Electron app to preview.
50+
- `npm run electron:prebuild`: The command will build the main process, preload scripts and renderer source code. Usually before packaging the Electron application, you need to execute this command.
51+
- `npm run electron:build`: Prebuilds the Electron application, packages and publishes it through `electron-builder`.
52+
4653
**Docker:**
4754

4855
1. Build: `docker build -t undergroundwires/privacy.sexy:latest .`

‎docs/presentation.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ The presentation layer uses an event-driven architecture for bidirectional react
2424
- [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint.
2525
- [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
2626
- [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
27-
- [**`main.ts`**](./../src/presentation/main.ts): Starts Electron app.
27+
- [`/main/` **`index.ts`**](./../src/presentation/main.ts): Main entry for Electron, managing application windows and lifecycle events.
28+
- [`/preload/` **`index.ts`**](./../src/presentation/main.ts): Script executed before the renderer, securing Node.js features for renderer use.
2829
- [**`/vite.config.ts`**](./../vite.config.ts): Contains Vite configurations for building web application.
30+
- [**`/electron.vite.config.ts`**](./../electron.vite.config.ts): Contains Vite configurations for building desktop applications.
2931
- [**`/postcss.config.cjs`**](./../postcss.config.cjs): Contains PostCSS configurations for Vite.
3032

3133
## Visual design best-practices

‎electron-builder.yml

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# -------
2+
# Windows
3+
# -------
4+
win:
5+
target: nsis
6+
nsis:
7+
artifactName: ${name}-${version}-Setup.${ext}
8+
9+
# -----
10+
# Linux
11+
# -----
12+
linux:
13+
target: AppImage
14+
appImage:
15+
artifactName: ${name}-${version}.${ext}
16+
17+
# -----
18+
# macOS
19+
# -----
20+
mac:
21+
target: dmg
22+
dmg:
23+
artifactName: ${name}-${version}.${ext}
24+
25+
# ----------------
26+
# Publish options
27+
# ----------------
28+
publish:
29+
provider: 'github'
30+
vPrefixedTagName: false # default: true
31+
releaseType: release # default: draft

‎electron.vite.config.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { resolve } from 'path';
2+
import { mergeConfig, UserConfig } from 'vite';
3+
import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
4+
import { getAliasesFromTsConfig, getClientEnvironmentVariables } from './vite-config-helper';
5+
import { createVueConfig } from './vite.config';
6+
7+
const MAIN_ENTRY_FILE = resolvePathFromProjectRoot('src/presentation/electron/main/index.ts');
8+
const PRELOAD_ENTRY_FILE = resolvePathFromProjectRoot('src/presentation/electron/preload/index.ts');
9+
const WEB_INDEX_HTML_PATH = resolvePathFromProjectRoot('src/presentation/index.html');
10+
const DIST_DIR = resolvePathFromProjectRoot('dist_electron/');
11+
12+
export default defineConfig({
13+
main: getSharedElectronConfig({
14+
distDirSubfolder: 'main',
15+
entryFilePath: MAIN_ENTRY_FILE,
16+
}),
17+
preload: getSharedElectronConfig({
18+
distDirSubfolder: 'preload',
19+
entryFilePath: PRELOAD_ENTRY_FILE,
20+
}),
21+
renderer: mergeConfig(
22+
createVueConfig({
23+
supportLegacyBrowsers: false,
24+
}),
25+
{
26+
build: {
27+
outDir: resolve(DIST_DIR, 'renderer'),
28+
rollupOptions: {
29+
input: {
30+
index: WEB_INDEX_HTML_PATH,
31+
},
32+
external: ['os', 'child_process', 'fs', 'path'],
33+
},
34+
},
35+
},
36+
),
37+
});
38+
39+
function getSharedElectronConfig(options: {
40+
readonly distDirSubfolder: string;
41+
readonly entryFilePath: string;
42+
}): UserConfig {
43+
return {
44+
build: {
45+
outDir: resolve(DIST_DIR, options.distDirSubfolder),
46+
lib: {
47+
entry: options.entryFilePath,
48+
},
49+
rollupOptions: {
50+
output: {
51+
entryFileNames: '[name].cjs', // This is needed so `type="module"` works
52+
},
53+
},
54+
},
55+
plugins: [externalizeDepsPlugin()],
56+
define: {
57+
...getClientEnvironmentVariables(),
58+
},
59+
resolve: {
60+
alias: {
61+
...getAliasesFromTsConfig(),
62+
},
63+
},
64+
};
65+
}
66+
67+
function resolvePathFromProjectRoot(pathSegment: string) {
68+
return resolve(__dirname, pathSegment);
69+
}

0 commit comments

Comments
 (0)