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.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.