Introduction

Electron is a framework to build cross platform apps with JavaScript, HTML, and CSS. To produce an AppImage from an electron project the electron builder tool will be used.

Create AppImage Target

The electron-builder tool extends your existing package.json file to produce Linux, Mac, and Windows builds of your app. The electron appimage template shows the entire package.json for an Electron application using electron-builder to create a Linux AppImage build.

{
  "name": "electron-appimage-template",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ./main.js",
    "dist": "electron-builder build --linux AppImage"
  },
  "devDependencies": {
    "electron": "^6.0.3",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "appId": "org.opencode.${name}",
    "linux": {
      "desktop": {
        "Name": "Electron AppImage Template",
        "Comment": "Simple application for AppImage build demostration purposes",
        "Categories": "Utility"
      }
    }
  }
}

As illustrated above, electron-builder has been added to the devDependencies of this project. You can do the same for your own projects by running:

npm install --save-dev electron-builder

A new script target named dist has been added. This script calls the build command from electron-builder and instructs it to build an AppImage.

  "scripts": {
    "start": "electron ./main.js",
    "dist": "electron-builder build --linux appimage"
  },

Notice the build/linux/desktop entry:

      "desktop": {
        "Name": "Electron AppImage Template",
        "Comment": "Simple application for AppImage build demostration purposes",
        "Categories": "Utility"
      }

It’s used to customize the information of your application. All the available fields can be found in the electron-builde documentation.

You can execute this script by running: npm run dist

Build pipeline

Once the AppImage target is configured you can proceed to setup your build pipeline as follows:

# .gitlab-ci.yml
build:appimage:
  stage: build
  image: electronuserland/builder:wine
  script:
    - npm install
    - npm run dist
  artifacts:
    paths:
      - dist/electron-appimage-template*.AppImage

The electronuserland/builder:wine docker image has all we need to build an AppImage from an electron app and it’s maintained by the electron-builder developers.

Notice in the artifacts section that the output path of the produced AppImage is: dist/<project name>*.AppImage

Results

Once the build is done you can find the resulting file in the jobs artifacts view.

You may also want to get a reference to the latest produced artifact in order to show it in your applications site downloads page or in the pling product page. Use the following snippet to get your own download link address:

"https://www.opencode.net/<user name>/<project name>/-/jobs/artifacts/master/raw/<artifact file path>?job=<job name>"

Be sure to replace the user name, project name, artifact file path, and job name.