How to Package an Electron App as AppImage Executable

Hello all! I ah happy to report that I have successfully packaged my electronjs desktop application into an AppImage executable. AppImage executable is very cool. Since the time I knew AppImage existed, I wanted to learn how to package my application into such an executable. It wasn't easy. At first, I have to have an application to package. It took me several months, on and off, to get my electronjs application ready. I was able to package the application as a DEB file. Today, I decided to packaging it to an AppImage executable. After some research, I was able to do it. I am very happy to share what I have learned.

The first thing I have to do is to verify my DEB file can be installed to my PC. This can be done with the following command:

sudo apt install ./<my deb file>.deb

If the packaging of the application is done correctly. The deb file can be installed without any issue. I can access the application from the Start menu. Once this is confirmed, I can uninstall the application using the following command:

sudo apt remove <my application name>

Electronjs has done a fantastic job of providing a full framework that allows a developer to develop, build and package a desktop application for distribution. For my application, I use some really wild stuff. And the application can be built and executed from the output folder. The deb file that was generated, can also be installed and run in my desktop OS.

Next, I want to package my application as AppImage executable. I want it and I want it bad! Anyways, the open source community provided a tool that can structure the already packaged deb file into a hierarchy of folders and files that can be packaged as an AppImage executable. It is called pkg2appimage.AppImage. is amazing what you can do with open source technology these days. What I need to do first is to create a yml file that tells pkg2appimage.AppImage how to copy all the needed files and structure them into a hierarchical folders structure. This is the yml file I created:

app: <my application name>

ingredients:
  dist: noble
  sources:
    - deb http://us.archive.ubuntu.com/ubuntu noble InRelease
  debs:
    - /home/<my user name>/Projects/<my electron project name>/out/make/deb/x64/<my application name>_1.0.0_amd64.deb

Let me explain how this file content can be used. The first line defines the name of the application. The next one is a section called "ingredients". In it, there were three sub-sections. The first one, it is called "dist", the value is called "noble". This is the version name of the Ubuntu distro I have. The second one, it is called "sources", it contains one or more deb repositories that we can pull libraries into our packaging hierarchy. I used the main Ubuntu deb repository because the application is so simple, it does not need more than one repositories. The last one, it is called "debs", it points to my deb file, full path to my deb file. I put this yml file at the same location as the deb file. All set! I will run the next command to create the folder structure for the final AppImage file packing:

./pkg2appimage--x86_64.AppImage ./<app packing config>.yml

In the same folder where my *.deb file and my *.yml file is, a new folder will be created and all the dependency needed for the AppImage will be copied in it. I need to do one more thing. There is a file <App Name>.Desktop for launching the application. In it, there is the command that executes the application. By default electronjs executes the application in chrome-sandbox. In the latest Ubuntu (v. 24.X.X), execution of chrome-sandbox requires the application be own by root and have the permission bits set as 4755. I can do this manually (changing the owner and the permission bits), but once the AppImage is created, the manual change loses its effect and AppImage cannot be launched. This is a dead end. So I need to change the <App Name>.Desktop to get get around this issue. Here is the new *.Desktop file content:

#!/usr/bin/env xdg-open
[Desktop Entry]
Name=<App Name>
Comment=<A short description of my application>
GenericName=<App Name>
Exec=<App Command> %U --no-sandbox
Icon=<Icon file name no extension>
Type=Application
StartupNotify=true
Categories=GNOME;GTK;Utility;

I added --no-sandbox at the end of the line starts with "Exec". Then I saved it. Now we are ready to package the whole thing as an AppImage executable. I need to execution another AppImage exe file called "appimagetool-x86_64.AppImage". Here is the command I executed:

ARCH=x86_64 ./appimagetool-x86_64.AppImage <prepackaged AppImage folder>/<App Name>.AppDir/

There are three parts to this command. The first specifies the CPU architecture of the output AppImage file -- ARCH=x86_64. The second is the command executable I ran. The third part is a folder path that specify the AppDir folder in my prepackaged folder.

If I did everything correctly, the command will execute successfully, and at the current folder, I will see my application created as <App Name>-x86_64.AppImage. And it has a size of 101 MB. By double clicking it, I can display my app in a GUI window. Awesome! Isn't it?

References

To research, I have used the following sites as references:

• pkg2appimage: https://docs.appimage.org/packaging-guide/converting-binary-packages/pkg2appimage.html
• appimagetools: https://github.com/AppImage/appimagetool. See the very beginning of the page to find the command that runs this tool.