A Vutron application is divided into code into a Main process and a Renderer process.
"Main" is the code of src/main and is mainly the process code handled by Electron. "Renderer" is the code of src/renderer, mainly for front-end rendering process like Vue.
In general, Node.js scripts cannot be run in the renderer process. Examples include modules that contain APIs used by Node.js, or native modules of Node.js such as path or net, os or crypto.
Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of Node.js scripts in the renderer area separate and isolated for security reasons.
For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via IPC communication.
For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
If you want to skip the security issues and use Node.js scripts in your renderer, you need to set nodeIntegration to true in your vite.config.ts file.
rendererPlugin({
+ nodeIntegration: true
+})For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const g=r(n,[["render",a]]);export{u as __pageData,g as default}; diff --git a/assets/electron-how-to_main-and-renderer-process.md.D0T1mt-A.lean.js b/assets/electron-how-to_main-and-renderer-process.md.D0T1mt-A.lean.js new file mode 100644 index 00000000..e6676a02 --- /dev/null +++ b/assets/electron-how-to_main-and-renderer-process.md.D0T1mt-A.lean.js @@ -0,0 +1,3 @@ +import{_ as r,c as s,a2 as o,o as t}from"./chunks/framework.D-pJd8bG.js";const u=JSON.parse('{"title":"Main vs Renderer Process","description":"","frontmatter":{},"headers":[],"relativePath":"electron-how-to/main-and-renderer-process.md","filePath":"en/electron-how-to/main-and-renderer-process.md","lastUpdated":1725496835000}'),n={name:"electron-how-to/main-and-renderer-process.md"};function a(i,e,d,c,p,l){return t(),s("div",null,e[0]||(e[0]=[o(`A Vutron application is divided into code into a Main process and a Renderer process.
"Main" is the code of src/main and is mainly the process code handled by Electron. "Renderer" is the code of src/renderer, mainly for front-end rendering process like Vue.
In general, Node.js scripts cannot be run in the renderer process. Examples include modules that contain APIs used by Node.js, or native modules of Node.js such as path or net, os or crypto.
Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of Node.js scripts in the renderer area separate and isolated for security reasons.
For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via IPC communication.
For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
If you want to skip the security issues and use Node.js scripts in your renderer, you need to set nodeIntegration to true in your vite.config.ts file.
rendererPlugin({
+ nodeIntegration: true
+})For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer
`,11)]))}const g=r(n,[["render",a]]);export{u as __pageData,g as default}; diff --git a/assets/electron-how-to_preload-script.md.C8boEbvV.js b/assets/electron-how-to_preload-script.md.C8boEbvV.js new file mode 100644 index 00000000..36615f6a --- /dev/null +++ b/assets/electron-how-to_preload-script.md.C8boEbvV.js @@ -0,0 +1 @@ +import{_ as o,c as t,a2 as n,o as r}from"./chunks/framework.D-pJd8bG.js";const h=JSON.parse('{"title":"Preload Script","description":"","frontmatter":{},"headers":[],"relativePath":"electron-how-to/preload-script.md","filePath":"en/electron-how-to/preload-script.md","lastUpdated":1725496835000}'),a={name:"electron-how-to/preload-script.md"};function i(d,e,c,l,s,p){return r(),t("div",null,e[0]||(e[0]=[n('The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for IPC communication.
For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
For compatibility and security with the latest version of Electron, we do not recommend using the old electron/remote module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
Vutron's preload script is located in the src/preload folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
mainAvailChannels: Send an event from main to renderer. (window.mainApi.send('channelName'))rendererAvailChannels: Send an event from renderer to main. (mainWindow.webContents.send('channelName'))When sending events from renderer to main, you access the window.mainApi object instead of ipcRenderer.send. The mainApi is the name you set in your Vutron template and can be changed.
Here are the supported functions for mainApi:
send: Send an event to main.on: A listener to receive events sent by main.once: A listener to receive events sent by main. (Handle only one call)off: Remove an event listenerinvoke: Functions that can send events to main and receive data asynchronously.To change and modify this, you need to modify exposeInMainWorld in src/preload/index.ts.
The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for IPC communication.
For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
For compatibility and security with the latest version of Electron, we do not recommend using the old electron/remote module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
Vutron's preload script is located in the src/preload folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
mainAvailChannels: Send an event from main to renderer. (window.mainApi.send('channelName'))rendererAvailChannels: Send an event from renderer to main. (mainWindow.webContents.send('channelName'))When sending events from renderer to main, you access the window.mainApi object instead of ipcRenderer.send. The mainApi is the name you set in your Vutron template and can be changed.
Here are the supported functions for mainApi:
send: Send an event to main.on: A listener to receive events sent by main.once: A listener to receive events sent by main. (Handle only one call)off: Remove an event listenerinvoke: Functions that can send events to main and receive data asynchronously.To change and modify this, you need to modify exposeInMainWorld in src/preload/index.ts.
Vutron includes automated testing. The testing framework uses Microsoft's Playwright.
Playwright is optimized for web application testing and has full support for the Electron framework. It is simple to install, requires no configuration to start testing immediately, and is cross-platform. You can learn more about Playwright here: https://github.com/microsoft/playwright
Only very simple launch and behavioral tests for the template main screen have been implemented in this template. Advanced testing will depend on the scope of your application.
Currently, the test specification file is located in the tests directory and the test results file is located in tests/results. (The built-in test specification file does not generate a separate results file.)
The Playwright configuration is playwright.config.ts in the project root, see the following documentation for more information on this: https://playwright.dev/docs/test-configuration
Once everything is configured, you can run a test with the following command.
$ npm run testBefore running the test, empty the build directory (dist) and compile the package for the test.
Vutron includes automated testing. The testing framework uses Microsoft's Playwright.
Playwright is optimized for web application testing and has full support for the Electron framework. It is simple to install, requires no configuration to start testing immediately, and is cross-platform. You can learn more about Playwright here: https://github.com/microsoft/playwright
Only very simple launch and behavioral tests for the template main screen have been implemented in this template. Advanced testing will depend on the scope of your application.
Currently, the test specification file is located in the tests directory and the test results file is located in tests/results. (The built-in test specification file does not generate a separate results file.)
The Playwright configuration is playwright.config.ts in the project root, see the following documentation for more information on this: https://playwright.dev/docs/test-configuration
Once everything is configured, you can run a test with the following command.
$ npm run testBefore running the test, empty the build directory (dist) and compile the package for the test.
Once the module installation is complete, you can simply build the platform package with the command below.
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:allThe built packages can be found in release/{version} location.
For more information, please refer to the following article: https://webpack.electron.build/dependency-management#installing-native-node-modules
To create a package for each OS, you must build it on the same OS. For example, a package for macOS must be built on a macOS machine.
However, you can build packages for Windows, macOS, and Linux all at once on one OS. However, this might require some preparation.
macOS is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
$ npm run build:allMultipass configuration may be required for Linux builds. Learn more about Multipass through the following link: https://multipass.run
To learn more about multiplatform builds, see the following articles: https://electron.build/multi-platform-build
You can exclude files you don't need at build time by adding a file pattern to the files property of buildAssets/builder/config.ts. This will save bundle capacity.
Below is an unnecessary node_modules file pattern that can further save bundles. Depending on the project, using the rules below may cause problems, so please review it before using.
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]For projects that use the Native Node Module, add the following script to your package.json: When installing dependencies, electron-builder will take care of any modules that require rebuilding.
{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}Once the module installation is complete, you can simply build the platform package with the command below.
# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:allThe built packages can be found in release/{version} location.
For more information, please refer to the following article: https://webpack.electron.build/dependency-management#installing-native-node-modules
To create a package for each OS, you must build it on the same OS. For example, a package for macOS must be built on a macOS machine.
However, you can build packages for Windows, macOS, and Linux all at once on one OS. However, this might require some preparation.
macOS is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
$ npm run build:allMultipass configuration may be required for Linux builds. Learn more about Multipass through the following link: https://multipass.run
To learn more about multiplatform builds, see the following articles: https://electron.build/multi-platform-build
You can exclude files you don't need at build time by adding a file pattern to the files property of buildAssets/builder/config.ts. This will save bundle capacity.
Below is an unnecessary node_modules file pattern that can further save bundles. Depending on the project, using the rules below may cause problems, so please review it before using.
[
+ "!**/.*",
+ "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+ "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+ "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+ "!**/node_modules/**/node-v*-x64{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/bluebird/js/browser{,/**/*}",
+ "!**/node_modules/source-map/dist{,/**/*}",
+ "!**/node_modules/lodash/fp{,/**/*}",
+ "!**/node_modules/async/!(dist|package.json)",
+ "!**/node_modules/async/internal{,/**/*}",
+ "!**/node_modules/ajv/dist{,/**/*}",
+ "!**/node_modules/ajv/scripts{,/**/*}",
+ "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+ "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+ "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+ "!**/node_modules/source-map-support/browser-source-map-support.js",
+ "!**/node_modules/json-schema/!(package.json|lib)"
+]For projects that use the Native Node Module, add the following script to your package.json: When installing dependencies, electron-builder will take care of any modules that require rebuilding.
{
+ "scripts": {
+ "postinstall": "electron-builder install-app-deps"
+ }
+}npm init (Recommend) You can easily clone a repository with just the npm command.
$ npm init vutronThe above method will not create unnecessary documentation and .github related files for your project.
Click Use this template to instantly create your own project.
This method creates a repository on GitHub immediately, but you will need to clone the project locally before you can use it.
Clone this repo using below command. This method is suitable for direct contributions to the Vutron repository.
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>After cloning the project, run the following command in the terminal:
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iApplications in the development environment run through Vite.
$ npm run devIf your application doesn't appear after running command line commands, you may need to review if the default port is being used by another app.
Vite uses port 5173 by default.
npm init (Recommend) You can easily clone a repository with just the npm command.
$ npm init vutronThe above method will not create unnecessary documentation and .github related files for your project.
Click Use this template to instantly create your own project.
This method creates a repository on GitHub immediately, but you will need to clone the project locally before you can use it.
Clone this repo using below command. This method is suitable for direct contributions to the Vutron repository.
$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>After cloning the project, run the following command in the terminal:
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iApplications in the development environment run through Vite.
$ npm run devIf your application doesn't appear after running command line commands, you may need to review if the default port is being used by another app.
Vite uses port 5173 by default.
Documents from Vutron can be viewed in the local environment through the VitePress viewer.
This function works only when the entire project is cloned. If you created the project with npm init vutron, the docs folder is not included.
Everything in the instructions below should be done in the docs folder.
$ cd docsInstall the relevant packages using the following commands:
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iYou can run the local server where the documents are hosted via the command below.
$ npm run devDocuments from Vutron can be viewed in the local environment through the VitePress viewer.
This function works only when the entire project is cloned. If you created the project with npm init vutron, the docs folder is not included.
Everything in the instructions below should be done in the docs folder.
$ cd docsInstall the relevant packages using the following commands:
# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm iYou can run the local server where the documents are hosted via the command below.
$ npm run dev$ npm run %SCRIPT_NAME%
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
Used only for contributing to project documentation. Must be run from the docs directory location.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |
$ npm run %SCRIPT_NAME%
| Script Name | Description |
|---|---|
dev | Start Electron as a development environment |
dev:debug | Start Electron as a development environment (with vite debug) |
dev:debug:force | Start Electron as a development environment (with vite debug + clean vite cache) |
build:pre | Commands commonly run at build time. This script does not need to be run separately. |
build | Build the package for the current operating system. |
build:all | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
build:dir | electron-builder directory build |
build:mac | Build preconfigured packages for macOS |
build:linux | Build preconfigured packages for Linux |
build:win | Build preconfigured packages for Windows |
lint | ESLint code inspection. It does not modify the code. |
lint:fix | ESLint code inspection. Use auto-fix to fix your code. |
format | Prettier code inspection. It does not modify the code. |
format:fix | Prettier code inspection. Use auto-fix to fix your code. |
test | Build a package for testing and run tests against the test specification file. |
test:linux | Build a package for testing and run tests against the test specification file. (for linux ci only) |
Used only for contributing to project documentation. Must be run from the docs directory location.
| Script Name | Description |
|---|---|
dev | Start the local document server. (For development) |
build | Build a local document server. Used only for GitHub page builders. |
serve | Start the local document server. |