Getting Started with Electron: Building Desktop Apps for Web Developers

Packaging and Distributing Your App (A Sneak Peek)

Section 5

Chapter 1: Welcome to the Desktop: Your First Electron App

You've built your first Electron app! That's fantastic. But how do you get it into the hands of your users? For now, we'll just get a glimpse into the world of packaging and distribution. This section is a sneak peek to show you what's possible and to plant the seed for future exploration.

Electron applications are typically distributed as installable packages. This means users can download a file and run an installer, just like any other desktop application they might be familiar with. These packages bundle your application code, the Electron runtime, and all its dependencies into a single, ready-to-install unit.

The most common tool for packaging Electron apps is called 'electron-builder'. It's a powerful and flexible utility that can generate installers for various operating systems, including Windows (.exe, .msi), macOS (.dmg, .app), and Linux (.deb, .rpm, .AppImage). It handles a lot of the complexities for you, making the process significantly smoother.

npm install electron-builder --save-dev

After installing electron-builder, you'll typically configure it in your package.json file. This configuration tells electron-builder how to build your app, what icons to use, what the application name should be, and much more.

"build": {
  "appId": "com.yourcompany.yourappname",
  "productName": "My Awesome App",
  "directories": {
    "output": "dist"
  },
  "win": {
    "target": "portable"
  },
  "mac": {
    "target": "dmg"
  }
}

Once configured, you can run a command to initiate the build process. electron-builder will then do its magic, creating the distributable files in a designated output directory.

npm run build

This command, assuming you've added a build script to your package.json that calls electron-builder, will generate the installer files. The exact output will depend on your configuration and target operating systems.

graph TD
  A[Your App Code + Electron Runtime] --> B{electron-builder}
  B --> C[Windows Installer (.exe, .msi)]
  B --> D[macOS Installer (.dmg)]
  B --> E[Linux Packages (.deb, .rpm)]

This is just a taste of what packaging involves. Later in the book, we'll dive deeper into electron-builder, explore different configuration options, and even touch upon code signing and auto-updates. For now, know that getting your app ready for distribution is a well-supported and straightforward process with the right tools.

チャプターへ戻る