Electron is a powerful framework that allows us to create desktop applications using web technologies (HTML, CSS, and JavaScript) by employing Node.js at its core. This gives us access to an immense ecosystem and tools we already know. Unlike a traditional web, Electron allows us to interact with the operating system, giving us the ability to create complex and feature-rich applications.
The Electron team frequently publishes new versions, incorporating security improvements, new features, and updates to underlying technologies like Chromium and Node.js. Keeping your application updated is crucial for security and performance. In this guide, we will see in detail how to update Electron to its latest version safely.
Remember that we are coming from events in Electron.
Why is it important to update Electron.js?
Before we get into the details, it's important to understand the benefits of keeping Electron up to date:
- Security: New versions usually include patches for discovered vulnerabilities. An outdated version can pose a security risk to your application and your users.
- New features: The Electron team and community are constantly adding new APIs and functionalities that can enrich your application.
- Performance improvements and bug fixes: Each new version comes with optimizations that can make your application faster, more stable, and more resource-efficient.
- Compatibility: Staying up to date ensures better integration with the latest versions of Node.js and Chromium, which are the core of Electron.
1. Verify Your Current Electron Version
Before updating, it is fundamental to know which version you are using. This information is found in your project's package.json file. Electron is generally installed as a development dependency (devDependencies).
Look for a section similar to this in your package.json:
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"devDependencies": {
"electron": "^41.0.0"
}
}In this example, the Electron version is 25.2.0.
2. The Update Process
Updating the package is simple, but it is important to use the correct command to ensure it is saved as a development dependency.
Using NPM
To update to the latest stable version of Electron, run the following command in your terminal. The --save-dev flag (or its shortcut -D) is crucial.
$ npm install electron@latest --save-devUsing Yarn
If your project uses Yarn, the equivalent command is:
$ yarn add electron@latest --devUsing PNPM
For projects with PNPM, the command is:
$ pnpm add electron@latest --save-devThis command will do the following:
- It will search the NPM registry for the latest stable version of Electron.
- It will download and install it in your project.
- It will update the version in your package.json file using the --save-dev flag.
3. Verify the Update
Once the command finishes, you can check your package.json file again. You will see that the Electron version number has changed.
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"devDependencies": {
"electron": "^29.1.5" // <-- Updated version!
}
}Additionally, it is good practice to delete the node_modules folder and the package-lock.json (or yarn.lock) file and reinstall all dependencies from scratch to avoid conflicts.
$ rm -rf node_modules package-lock.json
$ npm install4. Important Considerations and Possible Issues
Updating a dependency as critical as Electron can have side effects. Here are some things to keep in mind:
Beware of Breaking Changes!
When jumping between major versions (for example, from 25.x.x to 28.x.x), you're very likely to encounter breaking changes. This means that some of your code might stop working as expected.
It's highly recommended to read the Electron release notes to understand what has changed and how to adapt your code.
Updating isn't just about changing a version number. Especially with major version jumps (for example, from 25.x.x to 26.x.x), you might encounter breaking changes.
Updating is not just about changing a version number. Especially in major version jumps (for example, from 25.x.x to 26.x.x), you may encounter "breaking changes" or changes that break compatibility.
Read the Release Notes
This is the most important step. Before updating, visit the Electron releases page on GitHub. Review the notes for all major versions between your current version and the latest. They will inform you about:
- Deprecated APIs: Functions that will be removed in the future.
- Removed APIs: Functions that no longer exist and will break your application if you use them.
- Behavior changes: Modifications in how certain parts of the framework function.
Relationship with Node.js and Chromium
Each version of Electron comes packaged with a specific version of Node.js and Chromium. By updating Electron, you are also updating these two technologies. This can be a great advantage (access to new JavaScript and browser APIs), but it can also cause problems if you have native Node dependencies that need to be recompiled for the new version.
Common Refactoring Example
A common change in past versions was the modification of how security is handled in the rendering process (your application window). For example, the default value of contextIsolation changed to true. If your code relied on the previous behavior, you will need to refactor it to use a preload script and communicate the main process with the renderer process securely.
// main.js - Window configuration example
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// It is crucial to define a preload script to expose Node APIs
// securely to the renderer process.
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true, // Recommended and default value
nodeIntegration: false // Recommended and default value
}
});Conclusion
Keeping Electron updated is a good practice that improves the security and performance of your application. While the process is simple, it requires attention to detail, especially regarding potential breaking changes. By following a methodical approach (verify, update, verify again and, above all, read the release notes), you will ensure a smooth and successful transition to the latest version.
Next step, generate your amazing Electron.js application for Production.