Getting Started with Electron: Building Desktop Apps for Web Developers

Continuous Integration and Continuous Deployment (CI/CD) for Electron

Section 10

Chapter 7: Advanced Topics and Best Practices

Getting Started with Electron: Building Desktop Apps for Web DevelopersChapter 7: Advanced Topics and Best Practices

As your Electron application grows and your team expands, automating your build, test, and deployment processes becomes crucial. This is where Continuous Integration (CI) and Continuous Deployment (CD) come into play. CI/CD pipelines help ensure code quality, reduce manual errors, and accelerate the release cycle of your desktop applications.

At its core, CI/CD involves a series of automated steps triggered by code changes. For an Electron app, these steps typically include: checking out the code, installing dependencies, running linters and formatters, executing unit and integration tests, building the application for different platforms (Windows, macOS, Linux), and finally, deploying the built artifacts.

graph TD
    A[Code Commit] --> B(CI Server Triggered)
    B --> C{Checkout Code}
    C --> D{Install Dependencies}
    D --> E{Run Linters/Formatters}
    E --> F{Run Tests}
    F -- Success --> G{Build Application}
    G --> H{Package for Platforms}
    H -- Success --> I(CD Pipeline)
    I --> J{Deploy Artifacts}
    F -- Failure --> K[Notify Team]
    G -- Failure --> K
    H -- Failure --> K

When choosing a CI/CD platform, several options are available. Popular choices for open-source and commercial projects include GitHub Actions, GitLab CI/CD, Travis CI, CircleCI, and Jenkins. Many of these integrate directly with your version control system, making setup relatively straightforward.

Let's consider an example using GitHub Actions. We'll set up a workflow that triggers on every push to the main branch. This workflow will install Node.js, set up the Electron build environment, run tests, and then build the application for Windows, macOS, and Linux. Note that building for multiple platforms can be resource-intensive and may require separate jobs or dedicated build agents.

name: Electron CI

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
    - name: Install Dependencies
      run: npm install
    - name: Run Tests
      run: npm test
    - name: Build Electron App (Windows)
      run: npm run build:win
    - name: Build Electron App (macOS)
      run: npm run build:mac
    - name: Build Electron App (Linux)
      run: npm run build:linux

To implement the npm run build:win, npm run build:mac, and npm run build:linux commands, you'll typically leverage tools like electron-builder or electron-packager within your package.json scripts. These tools handle the complexities of packaging your Electron app into native installers and binaries for different operating systems. Ensure your electron-builder.yml (or similar configuration file) is correctly set up for cross-platform builds.

"scripts": {
  "build:win": "electron-builder --win",
  "build:mac": "electron-builder --mac",
  "build:linux": "electron-builder --linux"
}
チャプターへ戻る