Contents
Electron
Desktop apps with HTML, CSS and JavaScript: windows, the main process, IPC and packaging.
1.Getting started
- What Electron isDesktop apps with HTML, CSS and JavaScript: what Electron is made of, who uses it and what you need for the course.
- Main and renderer processesWhich processes an Electron app consists of, what each of them does and why they are separate.
- A first app by handCreating an Electron project from scratch: package.json, main.js and index.html, and running a window.
- A project with Electron ForgeCreating a project with one Electron Forge command: folder structure, commands and differences from a hand-made project.
- The BrowserWindowHow to create an app window, set its size, title and behaviour, and control it from the main process.
- The app lifecycleEvents of the app object: ready, all windows closed, reactivation and quit, plus the differences between Windows, Linux and macOS.
2.The page and IPC
- Page HTML, CSS and JavaScriptHow to attach styles and a script to a window, where the page files live and how an Electron page differs from a website.
- The preload script and contextBridgeHow a preload script hands the page selected functions through contextBridge, and why the page never gets the whole of Node.js.
- Security defaultsContext isolation, disabled Node.js, the sandbox and Content-Security-Policy: what they protect and why you should keep them on.
- IPC: from the page to the main processHow a page calls main process code and gets a result: ipcMain.handle, ipcRenderer.invoke and the bridge in preload.
- IPC: from the main process to the pageHow the main process sends a message to a window with webContents.send and how the page subscribes to it through preload.
3.Desktop features
- Reading and writing filesSaving notes to a file: the fs module in the main process, the app data folder app.getPath('userData') and calling it over IPC.
- Native dialogsOpen and save file dialogs and a question box: the dialog module in the main process and calling it from the page.
- The application menuYour own app menu: a template, Menu.buildFromTemplate, built-in roles, shortcuts and sending a command to the page.
- Context menusA right-click menu: Menu.popup, a menu for input fields and a menu for a specific note over IPC.
- The tray iconAn app icon in the notification area: the Tray class, a tooltip, a menu and hiding the window to the tray.
- NotificationsSystem notifications from the main process and from the page: the Notification class, clicks on a notification and Windows specifics.
- Multiple windowsA second window for a note, passing data through the page address, child and modal windows and keeping track of open windows.
- Keyboard shortcutsThree kinds of shortcuts in Electron: menu accelerators, global shortcuts with globalShortcut and key handling on the page.
4.Development and release
- Vite and ReactAn app interface in React or Vue: the Electron Forge Vite template, adding React and connecting components to preload.
- DebuggingHow to find bugs in Electron: DevTools for the page, output and a debugger for the main process, debugging in VS Code and renderer crashes.
- Packaging and installersHow to turn a project into an app and an installer with Electron Forge: importing into a hand-made project, the package and make commands, makers and the icon.
- Auto-updatesHow an Electron app gets new versions on its own: publishing releases, the update-electron-app module and the built-in autoUpdater.
- Code signingWhy to sign an app, what signing needs on macOS and Windows, and how to give certificates to Electron Forge.