Introduction

Web applications can be pretty useful at times when a native application is not available. In today’s tutorial, we will make an AppImage file of a web application using a tool called nativefier-appimage. nativefier-appimage makes it very easy to create AppImages of your favorite web applications and share them. It leverages the web application creation process by using nativefier. It packages the resulting web application in an AppImage for portability using appimagetool (which is included by default in Nitrux).

Note: We might change the name at some point if more features are added to the code (if needed).

Difficulty: ★☆☆☆☆


Getting started

To make our AppImage for this tutorial, we will need to install npm.

  • By default, in Nitrux, npm binaries are installed in the Home directory.
sudo apt install npm --no-install-recommends

Now we need to download nativefier-appimage. After downloading the program, give it execution permissions.

  • Optionally move it to your $PATH, i.e., /usr/bin for system-wide access.
wget https://raw.githubusercontent.com/Nitrux/nativefier-appimage/main/nativefier-appimage
chmod +x nativefier-appimage
sudo mv nativefier-appimage /usr/bin

That’s all we need.

Making a web application

Now let’s create a web application. For this tutorial, we’ll create an AppImage of a WebGL game called HexGL. All we need to do is run nativefier-appimage, appending the name of the application and the URL.

nativefier-appimage HexGL http://hexgl.bkcore.com/play

Our AppImage will be created, and now we can move it to ~/Applications so that it’s integrated into the desktop.

To test it, we launch it from the menu.

And it works!.

We even have support to use the global menu or the HUD.

Troubleshooting

  • By default, nativefier-appimage will add a generic icon taken from the website’s favicon; depending on the website, this might mean a low-res icon, the wrong icon is downloaded, or the icon is not displayed in the application menu. To work around this issue, you can add a custom icon to the web application AppDir.
    • In the image below, for example, I took a screenshot of the logo from the game using Spectacle; the capture area is 256×256 (it must be a standard size). The image must be saved to the AppDir; in this case, it’s HexGl.AppDir as icon.png (this is the default name) to the AppDir’s root (HexGL.AppDir/icon.png) and the resources folder (HexGL.AppDir/resources/app/icon.png). Then you can repackage the AppDir using appimagetool.
      appimagetool HexGL.AppDir


That’s it; this concludes today’s tutorial.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

© 2017-2020 Some Rights Reserved. Made with ♥ by Nitrux Latinoamericana S.C.