0Pricing
Electron Desktop App Development · Lekcja

Pakowanie aplikacji Electron

Dowiedz się, jak pakować aplikację Electron do dystrybucji w różnych systemach operacyjnych (Windows, macOS, Linux) za pomocą narzędzi takich jak `electron-builder`.

Pakowanie aplikacji Electron to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Why Package Your App?

When you develop an Electron app, it runs using Node.js and Chromium. However, your users won't have Node.js installed or know how to run your development files.

Packaging your application means bundling all its necessary files—your code, Electron runtime, and any assets—into a single, easy-to-distribute executable file or installer, like a .exe for Windows or a .dmg for macOS.

Meet Electron Builder

electron-builder is the most popular and robust solution for packaging and distributing Electron applications. It simplifies the complex process of preparing your app for various operating systems.

  • Cross-Platform: Build for Windows, macOS, and Linux from a single codebase.
  • Installers: Generate platform-specific installers (e.g., NSIS for Windows, DMG for macOS).
  • Auto-Updates: Integrates seamlessly with auto-update mechanisms.
  • Customization: Offers extensive options for icons, product names, and more.

Installing Electron Builder

First, you need to add electron-builder as a development dependency to your project. Open your terminal in your project's root directory and run:

npm install --save-dev electron-builder

Basic Project Setup

Before packaging, ensure your package.json is correctly set up. It defines your application's basic information and entry point. Here's a minimal example:

  • name: Your app's unique identifier.
  • version: Current version.
  • main: Path to your main Electron script.
  • scripts.start: Command to run your app in development.
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Configure package.json for Build

Now, let's add the build configuration to your package.json. This block tells electron-builder how to package your app.

  • appId: A unique identifier for your app (e.g., com.yourcompany.yourapp).
  • productName: The name users will see for your app.
  • directories.output: Where the packaged files will be saved (commonly dist).
  • scripts.build: The command to trigger the build.
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "My Awesome App",
    "directories": {
      "output": "dist"
    }
  }
}

Building for Windows

For Windows, electron-builder can create various targets. The most common are nsis (Nullsoft Scriptable Install System) for a standard installer, or portable for a single executable that doesn't require installation.

You can specify the target when running the build command:

npm run build -- --win nsis

Building for macOS

On macOS, typical distribution formats include dmg (Disk Image) for a guided installation, or zip for a direct archive of the .app bundle.

It's also good practice to specify a category for macOS apps.

npm run build -- --mac dmg

Building for Linux

Linux offers several packaging formats to cater to different distributions:

  • deb: For Debian-based systems (like Ubuntu).
  • rpm: For Red Hat-based systems (like Fedora).
  • AppImage: A universal format that runs on most Linux distributions.

Here's how to build an AppImage:

npm run build -- --linux AppImage

Customizing with Icons

A custom application icon is essential for brand recognition. You can specify a single icon path in your package.json's build section. electron-builder will automatically generate different sizes for various platforms.

It's recommended to place your main icon (e.g., a .png) in a build directory in your project root.

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "My Awesome App",
    "directories": {
      "output": "dist"
    },
    "icon": "build/icon.png"
  }
}

Run Your Build!

With your package.json configured, executing the build command is straightforward. This command will start the packaging process, which might take a few minutes depending on your project size and internet speed (to download Electron binaries).

Once complete, you'll find your packaged application files in the dist directory.

npm run build

Packaging Features Quiz

Which of these are valid reasons to use electron-builder for packaging your Electron app?

Recap: Ready for Distribution

You've learned the essentials of packaging your Electron application!

  • Packaging bundles your app into a distributable format.
  • electron-builder is the go-to tool for cross-platform packaging.
  • Configuration happens in package.json, defining app metadata and build targets.
  • You can create installers for Windows (nsis), macOS (dmg), and various Linux formats (AppImage, deb, rpm).

Now your app is ready to be shared with the world!

Często zadawane pytania

Czy lekcja „Pakowanie aplikacji Electron” jest bezpłatna?

Tak — pełny tekst „Pakowanie aplikacji Electron” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Pakowanie aplikacji Electron”?

Dowiedz się, jak pakować aplikację Electron do dystrybucji w różnych systemach operacyjnych (Windows, macOS, Linux) za pomocą narzędzi takich jak `electron-builder`. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?

Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Pakowanie aplikacji Electron”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?

Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Proces główny a proces renderera
  2. Komunikacja międzyprocesowa (IPC)
  3. Pakowanie aplikacji Electron
  4. Zarządzanie wieloma oknami
← Powrót do Electron Desktop App Development