Congratulations! You’ve now built a functional desktop app using Electron that communicates between the frontend and backend. It’s working beautifully on your machine, but how do you get it into the hands of others? In this tutorial, we’ll guide you through packaging your Electron app and making it available for users across platforms—whether they’re on Windows, Mac, or Linux.

The exciting part? You don’t need to build separate versions for each operating system! Electron allows you to package your app into a cross-platform desktop application, so users on different systems can download and install it with ease. We’ll cover everything from preparing your app for distribution to using Electron Builder for creating distributable files.

Let’s dive in!

What You’ll Learn

• How to prepare your Electron app for distribution.
• Packaging your app using Electron Builder.
• Creating platform-specific builds (Windows, Mac, and Linux).
• Best practices for distributing your app.

Preparing Your App for Packaging

Before we start packaging your app, there are a few things you need to set up. Let’s get your app production-ready!

1. Optimizing Your Code

Take a moment to review your app. Before shipping, it’s a good idea to ensure your code is optimized. This could mean:

• Minifying JavaScript and CSS to reduce file sizes.
• Removing any console logs or debugging code.
• Ensuring error handling is solid, especially for anything related to the file system or external APIs.

Even though this might not be the “fun” part of development, it’ll make sure your users don’t run into unnecessary issues, and it will help your app run smoother.

2. Updating package.json

Your package.json is the heart of your app’s configuration. Before we package the app, make sure the name, version, and description fields are filled out correctly. This information will show up in your distributable app.

Here’s an example of a basic package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "A cross-platform Electron desktop app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "build": {
    "appId": "com.myapp.desktop",
    "productName": "My Electron App",
    "files": [
      "dist/**/*",
      "main.js",
      "preload.js"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "devDependencies": {
    "electron": "^24.0.0",
    "electron-builder": "^23.0.0"
  }
}

Notice the "build" section? This is key for the packaging process. We’ll use Electron Builder to package the app and create installable files, so having a clear product name and appId is important.

Installing Electron Builder

Electron Builder is a fantastic tool for packaging your Electron app for different platforms. It simplifies the entire process by providing one command to package your app for Windows, Mac, and Linux. Let’s get it installed.

1. Open your terminal and navigate to your app’s directory.
2. Install Electron Builder by running:

npm install electron-builder --save-dev

This will add Electron Builder to your project’s devDependencies and make it available for the packaging process.

Step 1: Building the App for Distribution

To build your app for distribution, we’ll use Electron Builder. Before you run the build command, make sure your app is ready to be bundled (e.g., your assets are in the right places, your code is optimized, etc.).

Here’s how to create a build:

1. Open your terminal.
2. Run the following command to package your app for the current platform:

npm run build

If you want to build the app for all platforms (Windows, Mac, and Linux), you can run:

npm run build -- --all

This command will create executable files for each platform, which you’ll find in a newly created dist/ directory. For example, on Windows, it will create a .exe file; on Mac, a .dmg file; and on Linux, various package types like .deb or .AppImage.

Step 2: Building for Specific Platforms

Electron Builder makes it easy to create builds for specific platforms even if you’re on a different OS. So, if you’re on a Mac but want to create a Windows build, you can still do it!

Building for Windows

To build a Windows installer (.exe), use:

npm run build -- --win

This command will generate a .exe file in the dist folder that Windows users can download and install.

Building for Mac

For a Mac build (.dmg), run:

npm run build -- --mac

This creates a .dmg installer that Mac users can download and install with a simple drag-and-drop.

Building for Linux

To build for Linux (e.g., .deb, .AppImage), run:

npm run build -- --linux

This generates various Linux package formats, like .deb for Debian-based systems or .AppImage, which works across many Linux distributions.

Step 3: Customizing Your Build

Now that you know how to create basic builds, let’s take it a step further. With Electron Builder, you can customize your build with icons, splash screens, and more.

Adding Icons

Users love a good icon! To add your app’s icon to the build, you need to place the icon files in the right place and reference them in the package.json.

1. Add your app’s icons to the assets directory. For example, you might have:

   • icon.ico for Windows
   • icon.icns for Mac
   • icon.png for Linux

2. Update your package.json to point to the correct icon files:

"build": {
  "appId": "com.myapp.desktop",
  "productName": "My Electron App",
  "directories": {
    "buildResources": "assets"
  },
  "win": {
    "icon": "assets/icon.ico"
  },
  "mac": {
    "icon": "assets/icon.icns"
  },
  "linux": {
    "icon": "assets/icon.png"
  }
}

When you run the build command again, your app will include the specified icons for each platform.

Customizing the Installer

You can also customize the installer with a welcome screen, license agreement, and other features. These customizations are done through the Electron Builder config in the package.json file. For example:

"win": {
  "icon": "assets/icon.ico",
  "target": [
    {
      "target": "nsis",
      "arch": [
        "x64",
        "ia32"
      ]
    }
  ]
}

Here, we’re specifying that the Windows installer should use NSIS (a popular installer framework for Windows) and should build for both 32-bit and 64-bit architectures.

Step 4: Testing Your Build

Once your app is built, it’s important to test it on the platform you built it for. This might sound obvious, but it’s crucial to ensure that the installer works as expected and that the app runs smoothly after installation.

Testing on Windows

If you’ve built a Windows .exe file, try running it on a Windows machine to see if the installation process is smooth and your app runs without issues.

Testing on Mac

For Mac, test the .dmg file by dragging the app to the Applications folder and running it. Make sure everything works as expected.

Testing on Linux

For Linux, you can test the .deb package on a Debian-based system (like Ubuntu), or try the AppImage on any Linux distribution. Simply make the file executable (chmod +x), then run it.

Step 5: Distributing Your App (continued)

Once your app is packaged and tested for different platforms, it’s time to distribute it. You’ve got several options to get your app in front of users, and it can depend on the type of audience you want to reach. Let’s look at some popular methods:

1. Direct Downloads

The simplest and most straightforward method is hosting your application on a website or using cloud storage services like Google Drive, Dropbox, or AWS S3. Upload the installable files (like .exe for Windows, .dmg for Mac, and .AppImage for Linux), and then provide users with direct download links.

Pros:

• Full control: You decide where and how your app is hosted.
• No extra approval: No need to go through an app store submission process.

Cons:

• Trust issues: Users may hesitate to download files from an unknown website.
• Manual updates: You’ll need to notify users to download and install new versions manually.

2. GitHub Releases

If you’re hosting your app’s code on GitHub, it’s super easy to distribute packaged versions of your app using GitHub Releases. Here’s how it works:

1. Tag a release version in your GitHub repo.
2. Upload your packaged app files (.exe, .dmg, .deb, etc.).
3. Users can download the appropriate version for their platform directly from the release page.

Using GitHub Releases has the added benefit of versioning, meaning users can go back and download older versions if needed.

Pros:

• Version management: GitHub makes it easy to keep track of different releases.
• Automatic updates: If you implement GitHub’s API, you can notify users of new releases.

Cons:

• Requires GitHub knowledge: Not every user may be familiar with navigating GitHub.

3. Platform-Specific App Stores

If you want to reach a broader audience or target a specific platform, consider submitting your app to an app store. Each platform has its own store with specific submission requirements, but they all share some benefits—especially in terms of user trust and distribution reach.

Here are the top app stores to consider:

• Windows Store (Microsoft Store): If your app targets Windows users, submitting it to the Microsoft Store can make your app more discoverable and easier to install. Here’s how:

  1. Package your app using MSIX (a packaging format used by Microsoft).
  2. Submit it to the Microsoft Store Developer Dashboard.
  3. Your app will go through a review process before being published.

  Pros:

  • Easy access for Windows users through the store.
  • Built-in update management.

  Cons:

  • Store submission can take time, and updates may need re-approval.

• Mac App Store: If you’re building for Mac, consider distributing your app through the Mac App Store.

  1. You’ll need a Developer ID from Apple.
  2. Follow Apple’s guidelines for app packaging and security (e.g., sandboxing).
  3. Submit the app for review in App Store Connect.

  Pros:

  • Mac users trust the App Store, making them more likely to download.
  • Built-in update notifications and management.

  Cons:

  • Apple’s strict guidelines, especially around security and sandboxing.
  • Requires a $99/year Developer ID membership.

• Snap Store (Linux): For Linux apps, consider using the Snap Store, which allows users to install and run your app with minimal hassle.

  1. Convert your app into a Snap package.
  2. Submit it to the Snap Store.

  Pros:

  • Snap packages are easy to install across different Linux distributions.
  • Automatic updates via the Snap Store.

  Cons:

  • Snap packages are relatively new and not yet used by every Linux user.

Step 6: Implementing Automatic Updates

Your app’s first release is just the beginning! Keeping it updated is crucial, and thankfully, Electron makes it easy to implement automatic updates.

Electron Builder has built-in support for automatic updates using electron-updater. Here’s how you can set it up:

1. Install electron-updater

First, you need to install electron-updater in your app:

npm install electron-updater --save

2. Configure Your Update Server

Next, configure your package.json file to point to an update server. This server will host the new versions of your app, and Electron will check it periodically for updates.

Here’s an example configuration:

"build": {
  "publish": [
    {
      "provider": "github",
      "owner": "your-github-username",
      "repo": "your-repo-name"
    }
  ]
}

In this case, the updates are hosted on GitHub Releases, but you can also use other services like S3, DigitalOcean, or any other server where you can host files.

3. Implement Update Logic in Your Main Process

In your main.js file, add the logic for checking for updates:

const { autoUpdater } = require('electron-updater');

app.on('ready', () => {
  autoUpdater.checkForUpdatesAndNotify();
});

This code checks for updates whenever the app starts and notifies the user if a new version is available. You can also add more advanced logic to prompt the user to restart the app to install the update.

4. Testing Updates

Before rolling out updates to users, it’s a good idea to test the process yourself. To do this, you can:

• Manually upload a new version of your app to GitHub Releases (or your chosen server).
• Run the app, and check if the auto-update feature works as expected.

Step 7: Managing User Feedback and Issues

Finally, once your app is live and in the hands of users, you’ll want to keep a close eye on feedback and any issues that arise. Here are a few tips to help you manage this process effectively:

• Crash Reporting: Use services like Sentry or Rollbar to automatically collect and report crashes and errors from your app.
• In-App Feedback: Implement a simple in-app feedback form to let users report issues or suggest new features directly from the app.
• Versioning: Clearly display the app version in a Help or About section so users can easily report which version they’re using when submitting feedback.

Wrapping Up

Packaging and distributing your Electron app is a rewarding experience because it means your work is ready to be shared with the world. Whether you’re aiming for direct downloads, GitHub Releases, or platform-specific app stores, Electron’s cross-platform capabilities make the whole process straightforward.

With Electron Builder, you can quickly package your app for Windows, Mac, and Linux, and even set up automatic updates to keep your users on the latest version. Now, it’s up to you to choose how you want to distribute your app and get it into the hands of eager users.

In the next and final lesson, we’ll talk about deploying your app’s backend if it relies on server-side functionality and how to handle app updates on the backend.

That’s it for packaging and distributing your Electron app! You’re just one step away from completing your journey into the world of cross-platform desktop apps. Keep building, keep improving, and most importantly—keep shipping!