Electron desktop application development
Electron is a Node.js and Chromium-based desktop application development framework that enables developers to build cross-platform desktop applications using web technologies (HTML, CSS, and JavaScript). It is already used by many well-known companies such as GitHub, Slack, Microsoft, and many more. This article will introduce how to use Electron to develop desktop applications.
Install Electron
Before getting started, Electron needs to be installed. It can be installed using npm:
npm install electron --save-dev
After the installation is complete, add the following script to the project's package.json file:
"scripts": { "start": "electron ." }
Then, run the npm start command on the command line to start the Electron application.
Create an Electron application
Creating an Electron application is very simple. Create a file called main.js in the project root directory and add the following code:
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } })
This code creates a function called createWindow that creates a window and loads an HTML file called index.html into the window. In the app.whenReady() method, call the createWindow function to create the window. When the user closes all windows, the application exits.
Create a file named index.html in the project root directory and add the following code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
This code creates a simple HTML file that contains a page titled "Hello World!".
Packaging an Electron application
After the development is complete, the application needs to be packaged into an executable file. You can use electron-builder for packaging. Run the following command at the command line to install:
css
npm install electron-builder --save-dev
After the installation is complete, you can add the following script to your project's package.json file:
"scripts": { "start": "electron .", "build": "electron-builder" }
Then, run the npm run build command on the command line to package the Electron application.
After you have completed the introductory study of Electron, you may want to go a step further and learn how to do advanced development, debugging, deployment and hot update of Electron. This article will help you gain a deeper understanding of Electron's advanced knowledge.
to develop
Use main process and render process
Electron applications have two types of processes: the main process and the renderer process. The main process is responsible for managing the lifecycle of the application and all windows, while the renderer process is responsible for displaying window content. Usually, the main process and the rendering process communicate through the ipcMain and ipcRenderer modules.
Using the main process and renderer process, you can better manage the application and windows, and can handle different tasks in different processes. For example, you can use the main process to manage the window, and use the renderer process to handle the interaction and rendering of the window.
use modules
Electron provides a number of modules that can help you get things done more easily. Here are some commonly used modules:
- app : manages the lifecycle of the application
- BrowserWindow : create and manage windows
- ipcMain and ipcRenderer : communicate between the main process and the renderer process
- dialog : open dialog (such as open file dialog, save file dialog, etc.)
- Menu and MenuItem : create menus and menu items
- nativeImage : processing images
- shell : open files, folders and URLs
Use development tools
When developing an Electron application, using dev tools can help you better debug and manage your application. Here are some commonly used development tools:
- Visual Studio Code: A popular code editor with many plugins to help you develop Electron applications more easily.
- Electron DevTools: The development tools that come with Electron can help you debug applications, including network debugging, DOM and CSS debugging, JavaScript debugging, etc.
debugging
Use development tools
During development, using development tools can help you better debug your application. You can use Chrome DevTools to debug the renderer process and Electron DevTools to debug the main process.
Electron DevTools can be opened with the following command when launching the application:
electron --inspect-brk=9229 .
This command will start a debugger on port 9229 and set a breakpoint in the index.html file.
Using VS Code
If you use the VS Code editor, you can use the following steps to debug Electron applications:
1. Open VS Code and select the "Debug" view.
2. Click "Create"
3. Add the following configuration in the opened launch.json file:
json
{ "name": "Electron: Main", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args": ["."] }, { "name": "Electron: Renderer", "type": "chrome", "request": "attach", "port": 9222, "webRoot": "${workspaceFolder}" }
The above configuration will create two debugger configurations, Electron: Main and Electron: Renderer .
4. Click the "Start Debugging" button and select Electron: Main or Electron: Renderer to debug.
5. Debug the rendering process
To debug the rendering process, you need to open the application's developer tools first. You can use the shortcut Ctrl+Shift+I (Windows and Linux) or Cmd+Shift+I (macOS) to open the developer tools. You can then debug the rendering process using the Debug tab of the developer tools.
6. Dealing with cross-platform issues
Cross-platform issues are an important issue to consider when developing Electron applications. Since different platforms have different UIs and APIs, different codes are required to handle cross-platform issues. Here are some common cross-platform issues and workarounds:
- File path: On different operating systems, the format of the file path may be different. To solve this problem, you can use the path module provided by Node.js to handle file paths.
- Window size and position: On different operating systems, the size and position of windows may vary. To solve this problem, you can use the screen module provided by Electron to get the screen size and resolution, and use the relative position to set the size and position of the window.
- Shortcut keys: On different operating systems, the combination of shortcut keys may be different. To solve this problem, you can use the globalShortcut module provided by Electron to register shortcut keys, which can automatically adapt to different operating systems.
deploy
packaged application
Before an application can be deployed to production, it needs to be packaged as an executable. Here are some common tools that can help you package your Electron application as an executable:
- electron-builder : An Electron-based bundler that supports packaging applications into various formats, such as Windows, macOS, and Linux.
- electron-packager : Another popular packager that also supports multiple formats.
The following focuses on the usage steps and precautions of Electron Builder:
1. Install Electron Builder
First, you need to install Electron Builder using npm:
npm install electron-builder --save-dev
2. Configure the package.json file
In the package.json file, you need to add some fields to configure the packaging and distribution of the application.
- build field: Used to configure the build options for the application.
- directories field: Used to configure the application's source code and build output directories.
- repository field: the address of the source code repository used to configure the application.
The following is an example of a package.json file:
{ "name": "my-electron-app", "version": "1.0.0", "description": "My Electron App", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-builder" }, "repository": { "type": "git", "url": "https://github.com/username/my-electron-app.git" }, "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "dist" } } }
3. Configure build options
In the build field, you need to add some build options to specify the behavior of the application. Here are some commonly used build options:
- appId : The ID of the application.
- productName : The name of the application.
- files : The files and folders to pack.
- directories : Source code and build output directories.
- asar : Whether to package the application into an ASAR file.
- mac , win , linux : build options to configure each platform.
- dmg , nsis , deb : Used to configure the installation package options for each platform.
Here is an example of a common build field:
"build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "dist" }, "files": [ "main.js", "package.json", "index.html", "assets/**/*" ], "asar": true, "mac": { "target": "dmg", "icon": "assets/icon.icns" }, "win": { "target": "nsis", "icon": "assets/icon.ico" }, "linux": { "target": "deb", "icon": "assets/icon.png" } }
4. Package the application
In the package.json file, you can use the following command to package the application:
npm run build
After executing this command, Electron Builder will build the application using the options you configured in the build field and save the build output file to the directory specified in directories.output .
5. Dealing with cross-platform issues
When developing Electron applications, developers need to pay attention to the differences between different platforms. For example, different platforms may have different file systems, network protocols, and UI design issues. To solve these problems, some cross-platform libraries and tools are available.
One of the commonly used tools is electron-packager, which can package applications into local installation packages for various platforms. In addition, developers can also use some cross-platform UI frameworks, such as React Native, Flutter, etc., to build cross-platform applications. In addition, when using Electron to develop cross-platform applications, you need to pay special attention to some platform-related details, such as file path separators, case sensitivity of the file system, and so on.
In short, dealing with cross-platform issues is an inevitable problem in Electron application development. Developers need to pay special attention to the differences between different platforms, and choose appropriate tools and libraries to solve these problems according to their needs.
publish the application
After packaging the application into an executable file, you can publish it to the application store of each platform or your own website. Here are some common tools that can help you publish Electron applications:
- electron-updater : A tool for automating the release of applications.
- electron-release-server : An Electron-based application that can be used for automatic updates of your own applications.
hot update
Hot updates are one of the best ways to deploy updates to production, allowing you to update your application without affecting your users. The following are some commonly used tools that can help you implement hot updates:
- electron-updater : A tool for automating the release of applications, supporting hot updates.
- electron-hot-loader : A tool for enabling hot updates during development.
- electron-winstaller : Used to create installers on Windows and supports incremental updates.
Summarize
This article introduces some advanced knowledge of Electron, including using the main process and rendering process, using modules, using development tools, debugging, deployment and hot update. By mastering this knowledge, you can better manage and develop Electron applications, improve development efficiency, and provide users with a better experience.
at last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free