Skip to content

Commit

Permalink
Migrate to electron-vite and electron-builder
Browse files Browse the repository at this point in the history
- 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`.
  • Loading branch information
LarrMarburger authored and undergroundwires committed Aug 24, 2023
1 parent aa94981 commit c34130c
Show file tree
Hide file tree
Showing 43 changed files with 1,014 additions and 2,597 deletions.
16 changes: 8 additions & 8 deletions .github/workflows/checks.build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,15 @@ jobs:
name: Build
run: npm run build -- --mode ${{ matrix.mode }}

# A new job is used due to environments/modes different from Vue CLI, https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1626
build-desktop:
strategy:
matrix:
os: [ macos, ubuntu, windows ]
mode: [ development, production ] # "test" is not supported https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1627
mode: [
# electron-vite modes: https://electron-vite.org/guide/env-and-mode.html#global-env-variables
development, # Used by `dev` command
production, # Used by `build` and `preview` commands
]
fail-fast: false # Allows to see results from other combinations
runs-on: ${{ matrix.os }}-latest
steps:
Expand All @@ -51,14 +54,11 @@ jobs:
name: Install dependencies
run: npm ci
-
name: Install cross-env
# Used to set NODE_ENV due to https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1626
run: npm install --global cross-env
name: Prebuild
run: npm run electron:prebuild -- --mode ${{ matrix.mode }}
-
name: Build
run: |-
cross-env-shell NODE_ENV=${{ matrix.mode }}
npm run electron:build -- --publish never --mode ${{ matrix.mode }}
run: npm run electron:build -- --publish never

create-icons:
strategy:
Expand Down
23 changes: 16 additions & 7 deletions .github/workflows/release.desktop.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,29 @@ jobs:
fail-fast: false # So publish runs for other OSes if one fails
runs-on: ${{ matrix.os }}-latest
steps:
- uses: actions/checkout@v2
-
uses: actions/checkout@v2
with:
ref: master # otherwise it defaults to the version tag missing bump commit
fetch-depth: 0 # fetch all history
- name: Checkout to bump commit
-
name: Checkout to bump commit
run: git checkout "$(git rev-list "${{ github.event.release.tag_name }}"..master | tail -1)"
- name: Setup node
-
name: Setup node
uses: ./.github/actions/setup-node
- name: Install dependencies
-
name: Install dependencies
run: npm ci
- name: Run unit tests
-
name: Run unit tests
run: npm run test:unit
- name: Publish desktop app
run: npm run electron:build -- -p always # https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#upload-release-to-github
-
name: Prebuild
run: npm run electron:prebuild
-
name: Build and publish
run: npm run electron:build -- --publish always
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
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
7 changes: 7 additions & 0 deletions docs/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,13 @@ You could run other types of tests as well, but they may take longer time and ov
- Start a local web server that serves the built solution from `./dist`.
- 💡 Run `npm run build` before `npm run preview`.

**Desktop apps:**

- `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.
- `npm run electron:preview`: The command will build the main process, preload scripts and renderer source code, and start the Electron app to preview.
- `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.
- `npm run electron:build`: Prebuilds the Electron application, packages and publishes it through `electron-builder`.

**Docker:**

1. Build: `docker build -t undergroundwires/privacy.sexy:latest .`
Expand Down
4 changes: 3 additions & 1 deletion docs/presentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ The presentation layer uses an event-driven architecture for bidirectional react
- [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint.
- [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
- [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
- [**`main.ts`**](./../src/presentation/main.ts): Starts Electron app.
- [`/main/` **`index.ts`**](./../src/presentation/main.ts): Main entry for Electron, managing application windows and lifecycle events.
- [`/preload/` **`index.ts`**](./../src/presentation/main.ts): Script executed before the renderer, securing Node.js features for renderer use.
- [**`/vite.config.ts`**](./../vite.config.ts): Contains Vite configurations for building web application.
- [**`/electron.vite.config.ts`**](./../electron.vite.config.ts): Contains Vite configurations for building desktop applications.
- [**`/postcss.config.cjs`**](./../postcss.config.cjs): Contains PostCSS configurations for Vite.

## Visual design best-practices
Expand Down
31 changes: 31 additions & 0 deletions electron-builder.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# -------
# Windows
# -------
win:
target: nsis
nsis:
artifactName: ${name}-${version}-Setup.${ext}

# -----
# Linux
# -----
linux:
target: AppImage
appImage:
artifactName: ${name}-${version}.${ext}

# -----
# macOS
# -----
mac:
target: dmg
dmg:
artifactName: ${name}-${version}.${ext}

# ----------------
# Publish options
# ----------------
publish:
provider: 'github'
vPrefixedTagName: false # default: true
releaseType: release # default: draft
69 changes: 69 additions & 0 deletions electron.vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { resolve } from 'path';
import { mergeConfig, UserConfig } from 'vite';
import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
import { getAliasesFromTsConfig, getClientEnvironmentVariables } from './vite-config-helper';
import { createVueConfig } from './vite.config';

const MAIN_ENTRY_FILE = resolvePathFromProjectRoot('src/presentation/electron/main/index.ts');
const PRELOAD_ENTRY_FILE = resolvePathFromProjectRoot('src/presentation/electron/preload/index.ts');
const WEB_INDEX_HTML_PATH = resolvePathFromProjectRoot('src/presentation/index.html');
const DIST_DIR = resolvePathFromProjectRoot('dist_electron/');

export default defineConfig({
main: getSharedElectronConfig({
distDirSubfolder: 'main',
entryFilePath: MAIN_ENTRY_FILE,
}),
preload: getSharedElectronConfig({
distDirSubfolder: 'preload',
entryFilePath: PRELOAD_ENTRY_FILE,
}),
renderer: mergeConfig(
createVueConfig({
supportLegacyBrowsers: false,
}),
{
build: {
outDir: resolve(DIST_DIR, 'renderer'),
rollupOptions: {
input: {
index: WEB_INDEX_HTML_PATH,
},
external: ['os', 'child_process', 'fs', 'path'],
},
},
},
),
});

function getSharedElectronConfig(options: {
readonly distDirSubfolder: string;
readonly entryFilePath: string;
}): UserConfig {
return {
build: {
outDir: resolve(DIST_DIR, options.distDirSubfolder),
lib: {
entry: options.entryFilePath,
},
rollupOptions: {
output: {
entryFileNames: '[name].cjs', // This is needed so `type="module"` works
},
},
},
plugins: [externalizeDepsPlugin()],
define: {
...getClientEnvironmentVariables(),
},
resolve: {
alias: {
...getAliasesFromTsConfig(),
},
},
};
}

function resolvePathFromProjectRoot(pathSegment: string) {
return resolve(__dirname, pathSegment);
}
Loading

0 comments on commit c34130c

Please sign in to comment.