How to create desktop data science apps using Nativefier

There are numerous websites I use for my work that don’t have dedicated desktop applications designed for Ubuntu Linux, such as GitHub, GitHub Gists, GitLab and Jira. However, it’s now quite easy to turn these sites, or any website, into a desktop application using Electron.

Electron is designed for building cross-platform desktop applications using JavaScript, HTML and CSS. However, via Nativefier it’s also possibly to quickly create Electron desktop applications from web pages.

In this quick project, I’ll show you how to create an Electron app for storing and cataloging code snippets using GitHub Gist using Nativefier on Ubuntu 20.04 LTS. The whole process takes just a few minutes!

Install Nativefier

Nativefier is written in Node.js so you’ll need to install the Node Package Manager package npm in order to install the nativefier application. A couple of commands in your Ubuntu terminal will set this up.

sudo apt install npm
npm install -g nativefier

Create an Electron app with Nativefier

To create a desktop application from a web page using Electron, we just need to issue a simple command to the nativefier application. This will create an Electron package that can be executed and run as a desktop application.

You can store and run the Electron apps from anywhere. I’ve put mine in the snap directory in my home folder and then issued a command to Nativefier to create an application called GitHubGists from the website gist.github.com.

cd /home/matt/snap
nativefier --name 'GitHubGists' 'gist.github.com'

Create a desktop entry

To create an icon for your new Electron app you’ll need to create a “Desktop Entry” file. To do this open a terminal and enter the below command to open Gedit with superuser privileges.

sudo gedit /usr/share/applications/githubgist.desktop

To create a desktop entry, paste in the code below. You’ll need to change the paths and names to match the application you’re creating. When Electron creates the application it grabs an icon from the site, if one is present, which you’ll find in resources/app/. You can change that to any icon you fancy.

[Desktop Entry]
Encoding=UTF-8
Name=GitHub Gists
Exec=/home/matt/snap/nativefier/GitHubGists-linux-x64/GitHubGists
Icon=/home/matt/snap/nativefier/GitHubGists-linux-x64/resources/app/icon.png
Type=Application
Categories=Development;

Finally, logout of Gnome and log back in.

gnome-session-quit --no-prompt

If you click the “Show Applications” icon, you should find your new Electron app present. Clicking this will open the site as a desktop application. If you want quick access to it, you can drag the icon to the Ubuntu dock to launch it with a single click.

Matt Clarke, Sunday, March 07, 2021