How to self-host Expo webapp with Apache 2.4

This short howto comes from a github pull request not merged.

1. Build your Expo web app

Use the command provided by expo:
$ expo build:web

2. Provide the web-build/ directory to the server

Several ways are available according to your workflow.

For example:

• copy the web-build/ directory to /path/to/web-build/ on the server with scp or sftp commands. `ssh` server is required on the server. Create distant path (/path/to/) before copying web-build/ directory.
• configure Continuous Integration to build and deploy the web-build/ directory.

3. Configure Apache webserver

Apache will host the generated static files.

Create a file at /etc/apache2/sites-available/expo.conf with:

<VirtualHost ip-server:80>
    ServerAdmin your-email@address.tld
    ServerName domain-for-the-app
    Alias / /path/to/web-build/
    <Directory /path/to/web-build/>
            Require all granted
    </Directory>
</VirtualHost>

You have to change ip-server, your-email@address.tld, domain-for-the-app and /path/to/web-build/ according to your setup.

• ip-server: IP used by the server to receive requests from the clients
• your-email@address.tld: e-mail address shown to the client if a server error occurs
• domain-for-the-app: domain where the files are served to the client. When users go to `http://domain-for-the-app` with a browser, the app will be loaded
• /path/to/web-build/: path where the web-build/ directory is

4. Enable the new VirtualHost


$ sudo a2ensite expo


5. Restart Apache


$ sudo systemctl restart apache2


6. It works!

Check that the webapp is available at domain-for-the-app with a browser.

Configuration(s) grâce à ConfigParser

configparser est un module de la bibliothèque standard Python permettant de lire ou d’écrire une configuration. C’est utile pour séparer code source et paramètres. D’autres solutions sont possibles comme du json (disponible dans la bibliothèque standard) ou, en utilisant des bibliothèques tierces disponibles sur pypi.org, du yaml voire toml (pour ceux qui veulent le dernier truc à la mode).

La classe configparser.ConfigParser() permet de lire différentes sources (une chaîne de caractères, un fichier ou un dictionnaire) mais aussi d’écrire des configurations dans un fichier.

conf = """
[batman]
talent = riche
"""
import configparser
config = configparser.ConfigParser()
config.read_string(conf)
# config["batman"]["talent"] vaut "riche"

with open('superheros.ini', 'w') as f:
    config.write(f)
# le fichier superheros.ini contient les données de Batman

Un aperçu plus large des possibilités est présenté dans l’introduction du module.

Possibilité moins connue, ConfigParser peut lire plusieurs configurations successives. Les données lues écrasent les données précédentes ; les données non modifiées restent.

Supposons une initialisation avec un dictionnaire:

PAR_DEFAUT = {
    "superman": {"talent": "vole avec son slip sur son pantalon"},
    "kleptomane": {"talent": "vole des petites cuillères"},
}

ConfigParser peut charger cette configuration avec la méthode read_dict().

config = configparser.ConfigParser()
config.read_dict(PAR_DEFAUT)
# config['superman']["talent"] vaut "vole avec son slip sur son pantalon"

• le comportement d’une instance de ConfigParser() ressemble à celui d’un dictionnaire
• les données sont obligatoirement dans une section (batman, superman, kleptomane)
• les valeurs sont toujours des chaînes de caractères

Ces valeurs par défaut pourraient être écrasées par un fichier de configuration. Le format de fichier attendu est de type .ini.

Avec un fichier de configuration /etc/heros.ini contenant:

[superman]
talent=vole sans être décoiffé


config.read("/etc/heros.ini")
# config["superman"]["talent"] vaut maintenant "vole sans être décoiffé"
# config["kleptomane"]["talent"] est inchangé

Évidemment, les noms doivent être impérativement identiques aux valeurs par défaut pour qu’elles écrasent la valeur précédente et non qu’elles co-existent et soient ignorées par la suite.

Il est possible de redéfinir à nouveau la configuration avec d’autres fichiers (~/config/superheros.conf par exemple) en faisant de nouveaux appels config.read(). Idem avec config.read_dict() ou config.read_string().

Le comportement d’écrasements successifs des données n’est pas explicite dans la documentation Python mais une amélioration de la documentation est en attente.

Suppression automatique de fichiers

Il est pratique d’automatiser la suppression des fichiers dont on ne se sert plus. Trois astuces complémentaires pour réaliser cela sur un ordinateur de bureau :

Écrire dans /tmp

Étant donné que le répertoire /tmp est vidé au démarrage de la machine, faire ses essais dans ce répertoire évite d’avoir à les supprimer manuellement.

Vider la corbeille de bureau

Sous Debian et dérivées, installer le paquet trash-cli et ajouter la ligne suivante dans sa crontab :

15 13 * * * trash-empty 30

Ainsi, tous les jours, à 13h15, les fichiers placés dans la corbeille depuis plus de 30 jours seront supprimés.
Cela fonctionne avec tout environnement de bureau respectant Freedesktop (Gnome, KDE, etc.).

Supprimer des e-mails automatiquement

Thunderbird permet de supprimer des e-mails en fonction de leur âge. Pratique pour les répertoires comme la corbeille, le spam ou certains répertoires dont le contenu n’a plus d’intérêt avec le temps.
Faire un clic droit sur le répertoire à nettoyer automatiquement et cliquer sur Propriétés :

Cette possibilité n’est pas une exclusivité de Thunderbird, il existe des équivalents dans d’autres clients e-mails.

Voilà, il ne reste plus qu’à automatiser la création des fichiers et recevoir un peu plus de spam ! 😉

Greffons Firefox pour Python

L’usage quotidien de Python est facilitée par l’ajout de quelques moteurs de recherche à Mozilla Firefox.

Firefox propose deux affichages différents pour les barres d’adresse et de recherche : soit séparée (c’est le mode historique), soit dans le même champ (c’est l’équivalent du comportement de Google Chrome/Chromium).

Selon le mode d’affichage choisi, l’utilisation est différente. Après avoir vu l’usage des extensions avec la barre d’adresse séparée du champ de recherche, la façon d’utiliser les extensions avec la barre unifiée sera abordée.

Extensions

Python Search

Python Search ajoute un moteur de recherche permettant de rechercher directement dans différentes documentations python3 (bibliothèque standard, API C, glossaire, etc).

Les moteurs de recherche ajoutés (ce qui inclut donc Python Search) ne sont pas visibles dans les extensions mais sur la page about:preferences#search.

Python Doc

Python Doc répond au même besoin que Python Search mais utilise un bouton pour faire la recherche plutôt que l’interface de recherche classique de Firefox. Il faut d’abord cliquer sur le bouton pour avoir le champ où saisir sa recherche. Cela peut être utile si on l’utilise peu car la présence du bouton rappelle automatiquement la disponibilité de la recherche.

Python Doc est visible dans la liste des extensions (accessible par about:addons dans la barre d’adresse ou, selon les versions, en cliquant sur Extensions ou Modules supplémentaires).

PyPI

PyPI ajoute un moteur cherchant dans la liste des paquets disponibles sur pypi.org.

Comme Python Search, il sera visible sur la page about:preferences#search une fois installé.

Recherche dans la barre de recherche unifiée

Il est possible d’ajouter un raccourci vers un moteur de recherche dans les Préférences du navigateur. Dans ce cas, il suffit d’utiliser le raccourci avant sa recherche pour sélectionner le moteur de recherche à utiliser.
Par exemple, en saisisant @py datetime, Firefox affichera la page de résultat de la recherche de datetime sur le site de la documentation de python. Cela est donc faisable pour Python Search et Pypi (pas Python Doc).

Raccourcis pour PyPI et Python Search

Bonus : créer d’autres moteurs de recherche

L’ajout de moteur de recherche intégré à Firefox (comme Python Search et PyPI) est simple à développer. La base est la préparation d’un fichier XML décrivant la recherche à faire (format de la requête, méthode, etc.). Le XML est trop court pour être douloureux (tant mieux ou tant pis, selon les goûts).

Outils utilisés

Pour afficher la capture de sélection du moteur à la souris, il n’était pas possible de faire une capture d’écran, car la perte du focus ferme la sélection. Pour cela, un enregistrement vidéo a été fait avec SimpleScreenRecorder, puis l’image adéquate a été extraite avec Kdenlive.

Aucun navigateur n’a été maltraité lors de l’écriture de cet article.

Greffons Firefox pour un affichage sombre

Face à des pages très claires, avec un fond blanc, on peut préférer des thèmes sombres car plus reposant pour les yeux. Certains sites proposent deux thèmes : l’un clair, l’autre sombre. Pour disposer d’une solution plus générique ou pour pallier à l’absence d’un thème sombre, il est possible de personnaliser Firefox pour répondre à ce besoin.

Stylus + thème spécifique

Stylus est un greffon qui permet d’ajouter des styles CSS. https://userstyles.org/ fournit des styles disponibles assez divers : des personnalisations de Youtube, de la page d’accueil de Google, etc. Il existe donc de nombreux thèmes sombres téléchargeables. Par exemple :

• Midnight surfing alternative
• Global dark

La capture d’écran montre un extrait de la page Wikipedia consacrée à Firefox : en haut à gauche, le style par défaut, en bas à droite, le rendu avec Global Dark activé.

C’est une solution intéressante si vous voulez aussi faire d’autres personnalisations d’affichage.

Owl

Owl permet uniquement l’activation/désactivation d’un thème sombre. Par contre, l’effet semble mieux réalisé que certains thème de Stylus : par exemple, certaines images sont aussi modifiées. Il est aussi possible de désactiver Owl spécifiquement pour certaines pages. C’est utile quand elles ont quelques soucis ou qu’elles sont déjà sombres.

La capture d’écran montre la même zone ; en bas à droite, le rendu avec Owl activé.

Dark Reader

Dark Reader est un greffon disponible pour Firefox et Chrome. Ce greffon dispose des fonctionalités d’Owl, tout en étant plus configurable : il est possible de faire varier quatre paramètres dont la luminosité et le contraste. Il dispose aussi de possibilités absentes d’Owl : activer le mode sombre selon une plage horaire, selon l’alternance jour/nuit, selon le thème du système (clair/sombre).

La capture d’écran montre (presque) la même zone de la page, avec plusieurs configurations de Dark Reader. De gauche à droite :

• désactivé (donc le rendu par défaut)
• activé ; rendu des paramètres par défaut
• activé ; rendu avec forte luminosité et fort contraste
• activé ; rendu avec faible luminosité, faible contraste et fort sépia

Le changement de mode sur Dark Reader est un peu moins pratique que sur Owl car Owl est (dés)activable en un seul clic. Il en faut deux pour Dark Reader: un pour ouvrir le menu, un pour (dés)activer. Le raccourci clavier est le même dans les deux greffons : Alt+Maj+D

Les trois greffons sont libres (MIT ou GPL v3+ selon la solution choisie).