This repository contains the starter template for using vue-next with the latest electron.
I started to learn electron & vue by the great project electron-vue. This project is also inspired from it.
- Electron 10
- Follow the security guide of electron, make renderer process a browser only environment
- Using electron-builder to build
- Empower vue-next and its eco-system
- Using vite which means develop renderer process can be blazingly fast!
- Using vuex 4.0 with strong type state, getters, and commit
- Using vue-router-next
- Using eslint with Javascript Standard by default
- Built-in TypeScript Support
- Github Action with Github Release is out-of-box
- Auto bump version in package.json and generate CHANGELOG.md if you follow the Conventional Commits
- Detail how this work described in Release Process section
- Integrate VSCode well
- Support debug .ts/.vue files in main/renderer process by vscode debugger
- Detail see Debug section
- Multi-Windows Support
- This need to wait vite support #257
- Currently, all workarounds I can come up with are all ugly and not ideal enough...
- Make tsconfig.json less confusing
- Due to the Vetur limitation (only the root tsconfig.json is used for vetur), the current root tsconfig.json might be confusing
- vue-devtool support
- Currently the devtool is still WIP and not support vuex/router...
- Wait until it has great support for vuex and router to add it
Clone or fork this project to start. Once you have your project, and in the project folder:
# Install dependencies with linter
npm install
# OR install dependencies without eslint
npm install --no-optional# Will start vite server, rollup devserver, and electron to dev!
npm run dev
# OPTIONAL. Will compile the main and renderer process to javascript and display output size
npm run build
# OPTIONAL. Will compile all and output an unpacked electron app. You can directly
npm run build:dir
# Will compile all and build all products and ready to release
npm run build:production
Due to the project is following the security guideline. It does not allow the renderer to access node by default. You should use Service to encapsulate your nodejs operation and use the hook useService('NameOfService') to use in renderer side.
Once you install your project, you should change the package base info in package.json, and also the build information in /scripts/build.base.config.js
The assets is only used by the renderer process (in-browser display), like picture or font. They are bundled by vite/rollup. You can directly import them in .vue/.ts files under renderer directory. The default assets are in /src/renderer/assets
The static resources are the static files which main process wants to access (like read file content) in runtime vie file system. They might be the tray icon file, browser window icon file. The static folder is at /static.
The build resources are used by electron-builder to build the installer. They can be your program icon of installer, or installer script. Default build icons are under /build/icons.
Notice that your program icon can show up in multiple place! Don't mixup them!
- In build icons, of course you want your program has correct icon.
- In static directory, sometime you want your program has tray which require icon in static directory.
- In assets, sometime you want to display your program icon inside a page. You need to place them in the assets!
This is really simple. In vscode debug section, you will see three profiles:
- Electron: Main (attach)
- Electron: Renderer (attach)
- Electron: Main & Renderer (attach)
The name should be clear. The first one attach to main and the second one attach to renderer (required vscode chrome debug extension). The third one is run the 1 and 2 at the same time.
You should first run npm run dev and start debugging by the vscode debug.
If you adding new dependenceis, make sure if it using nodejs module, add it as exclude in the /scripts/vite.config.js. Otherwise, the vite will complain about "I cannot optimize it!".
The raw javascript dependencies are okay for vite.
If you want to use the native dependencies, not only you should adding it to vite exclude, you should also take care about the electron-builder config.
For example, 7zip-min:
Since it using the 7zip-bin which carry binary for multiple platform, we need to correctly include them in config.
Modify the electron-builder build script /scripts/build.base.config.js
files: [
"dist/electron/**/*",
"!**/node_modules/**/*",
"node_modules/7zip-bin/**/*"
],
asarUnpack: [
"node_modules/7zip-bin/**/*"
],Add them to files and asarUnpack to ensure the electron builder correctly pack & unpack them.
To optimize for multi-platform, you should also exclude them from files of each platform config /scripts/build.config.js
mac: {
// ... other mac configs
files: [
"node_modules/7zip-bin/**/*",
"!node_modules/7zip-bin/linux/**",
"!node_modules/7zip-bin/win/**"
]
},
win: {
// ... other win configs
files: [
"node_modules/7zip-bin/**/*",
"!node_modules/7zip-bin/linux/**",
"!node_modules/7zip-bin/mac/**"
]
},
linux: {
// ... other linux configs
files: [
"node_modules/7zip-bin/**/*",
"!node_modules/7zip-bin/win/**",
"!node_modules/7zip-bin/mac/**"
]
},The out-of-box github action will validate each your PR by eslint and run npm run build. It will not trigger electron-builder to build production assets.
For each push in master branch, it will build production assets for win/mac/linux platform and upload it as github action assets. It will also create a pull request to asking you to bump version and update the changelog.
It using the conventional-commit. If you want to auto-generate the changelog, you should follow the conventional commit guideline.
If the bump version PR is approved and merged to master, it will auto build and release to github release.
If you want to disable this github action release process, just remove the /.github/workflows/build.yml file.