Créer et publier une application web sur Linux grâce aux snaps

Les stores d'application (App Store, Google Play) facilitent la distribution et la mise à jour des applications mobiles. Les OS desktop leur ont emboité le pas, et même Ubuntu propose aujourd'hui son store. Y publier son application web, c'est aussi permettre à un plus grand nombre possible d'utilisateurs d'y accéder.

Aujourd'hui, il existe les dépôts APT pour développer et mettre en avant son projet. Je me suis aperçu que cela n'est pas simple à concrétiser, mais grâce à l'annonce du projet Snappy par Canonical en 2016, la publication de cette application peut être facilement réalisée.

J'ai choisi d'illustrer ce tutoriel en utilisant le jeu du Morpion, que j'ai développé il y a quelque temps avec React. Vous pouvez retrouver le code source sur github.com/zyhou/morpion-snap ainsi que le projet sur le store snapcraft.io/morpion.

En exécutant la commande snap install morpion, vous pouvez dès à présent installer le jeu du morpion et y jouer. Comment ça marche, et comment vous pouvez-vous publier vos propres applications web sur le snap store?

Snappy et les paquets snap

Snappy est un gestionnaire de paquets qui permet de distribuer les .snap. Un snap inclut l'application ainsi que les librairies qui lui permettent de fonctionner. Snap vient ainsi unifier l'installation des applications sur l'écosystème linux. Snap fonctionne de la même manière sur toutes les distributions.

Canonical n'a pas oublié les développeurs. Ils ont créé snapcraft, un outil pour créer et publier des snaps. Fin 2018, ils ont sorti la version 3.0 qui simplifie le fichier snapcraft.yaml et annonce le support de MacOS à travers homebrew.

Vous pouvez obtenir plus d'informations sur l'installation et la définition d'un snap sur la documentation d'Ubuntu et sur le site de snapcraft.

Créer un fichier snap

Snapcraft propose plusieurs langages pour créer votre premier snap. Dans le cas présent, j'ai une application web que j'ai voulu convertir en .snap. Pour faire cela, j'ai utilisé Electron, qui embarque l'application, et electron-builder, qui permet de compiler un exécutable pour différentes platformes comme macOS, Windows et Linux (apk, deb, snap).

Architecture du projet

Voici l'arborescence de l'application web de départ. Le dossier src contient les sources compilées du Morpion que j'ai crée.

├── assets
│   └── icon.png
├── src
│   ├── main.js
│   └── index.html
├── index.js
└── package.json

L'étape suivante est l'installation d'Electron : il faut renseigner les différentes informations de l'application. Pour ce faire, il est nécessaire de modifier package.json.

{
  "name": "morpion",
  "version": "0.0.1",
  "description": "Jeu du Morpion",
  "main": "index.js",
+ "scripts": {
+   "start": "electron .",
+   "build": "build --linux snap"
+ },
+ "devDependencies": {
+   "electron": "4.0.7",
+   "electron-builder": "20.38.5"
+ },
+ "build": {
+   "directories": {
+     "buildResources": "assets/"
+   },
+   "linux": {
+     "category": "Game",
+     "target": ["dir"]
+   }
+ }
}

On peut y voir deux commandes:

• start lance le fichier index.js qui crée une application Electron
• build génère le snap à partir de l'application Electron.

On y voit aussi une partie build qui sert pour la customisation du snap. Il permet d'ajouter une icône et de définir la catégorie sur le store.

Création de l'application Electron

Dans le fichier index.js, il faut créer une fenêtre d'application grâce à Electron, et charger le Morpion qui se trouve dans src/index.html.

const { app, BrowserWindow } = require("electron");

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  });

  mainWindow.setMenuBarVisibility(false);
  mainWindow.loadFile("src/index.html");

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
};

app.on("ready", createWindow);

A partir de cette étape du tutoriel, vous pouvez lancer l'application Electron et générer le fichier snap.

npm run start

npm run build

Vous pouvez retrouver le .snap dans le dossier /dist.

Tester avant publication

Comme tout développeur qui se respecte, j'ai du tester mon snap en local avant de l'envoyer sur le store. Rien de plus simple, il suffit de l'installer avec l'option --dangerous qui permet de passer la vérification de la signature.

snap install ./dist/morpion_0.0.1_amd64.snap --dangerous

## Vous devez voir l'application dans la liste des applications installés
snap list

## Permet de lancer le jeu
morpion

Publier son snap

Tout d'abord, il faut créer un compte sur snapcraft.io et enregistrer l'application à l'aide du bouton "Register a snap name" qui se trouve sur la page d'accueil.

## Installer snapcraft
snap install --classic snapcraft

## S'identifier avec son compte snapcraft
snapcraft login

## Publier notre snap sur le store
snapcraft push ./dist/morpion_0.0.1_amd64.snap

Le snap a bien été envoyé sur le store mais il n'est pas encore disponible. Il faut créer une release sur Snapcraft.

Vous pouvez retrouver l'application du Morpion sur le store snapcraft.io, nous remarquons qu'il existe plusieurs versions.

Conclusion

Comme je l'ai expliqué dans ce tutoriel, on peut aisément convertir une application web en application Electron et ensuite générer un snap. La publication se fait facilement grâce à l'utilisation de snapcraft.

Snapcraft n'est pas encore au niveau de Google Play ou d'Apple, cependant il permet tout aussi bien d'avoir des métriques d'utilisations de l'application et de créer des badges pour mettre en avant son application.

Les dépôts snap sont très récents, contrairement à apt-get. De ce fait, il y encore peu de snap sur ce store. Lancez vous!