In this video, we'll learn how to save and open a file using native dialogs in Electron. First, we'll use
dialog.showSaveDialog to display a native save dialog and use
dialog.showErrorBox to display an error message if the save failed. Then, we'll open the file we saved using
dialog.showOpenDialog. Finally, we'll look at how these dialogs look on Windows vs Mac.
Code signing ensures that your app was created and distributed by you or your company and has not been modified since it was built. It is done via a special code signing certificate issued by a trusted authority. While you can distribute your Electron app without signing it; code signing is a security best practice and is a prerequisite to implementing auto-updates in your app. We’ll walkthrough how to integrate code signing into your electron-builder build process, what happens when you don't sign your application, and how to verify it's been signed correctly.
This lesson assumes that you have already purchased code signing certificates from Apple and one of Microsoft's trusted vendors and have exported the certificate as a
In this lesson we'll learn about
dialog.showMessageBox . This is the most basic Electron dialog but it offers lots of customization options, such as
buttons. Some of these options vary by platform, so we'll also look at how things differ between Windows and Mac.
We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a
.exe file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called electron-builder to handle the details. electron-builder will automatically grab our
.icns file and use that as our app's icon.
We’ll go over creating a menu template using
Menu.buildFromTemplate and then setting it as the main application menu via
remote allows you to seamlessly interact with main process modules as if they were in the renderer process. It’s a super useful abstraction over IPC. We’ll learn how to use it and how to avoid some potential gotchas it has.
Devtron is a devtools extension that the Electron team has made. We’ll be using it to view all of the IPC that happens in our application. In this lesson we’ll learn how to include and use it in our code.
Once users are using your app, you need a way to ship new features and fixes to them. In this lesson, we’ll learn how to implement auto-updates in your app, which allows you to distribute updates to your application seamlessly. We'll go over how to integrate with Electron's
autoUpdater module to check for an update and display a prompt to update once it's been downloaded. For our server side implementation we'll just use a plain file server to keep things simple.
In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new
browserWindow open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the
Take the first step in learning how to create native desktop applications with Electron. We'll set up a package.json, create an npm start script to launch our app in development, and create a browser window and load a local HTML file into it.
An important concept to understand about Electron is it's multi-process architecture. The main process creates web pages by creating
BrowserWindow instances, manages application lifecycle events, and more. Each
BrowserWindow instance runs the web page in its own renderer process.