Utiliser la forge pour héberger une application web HTML

(actualisé le )

Vous réalisez des applications web HTML seul ou à l’aide d’une IA (vibescoding) comme je le décris dans l’article "Arrêtez de demander à l’IA de rédiger vos documents, demandez-lui de créer vos outils !". Vous souhaitez que ces fichiers soient accessibles facilement à vos collègues ou à vos élèves ? La forge est l’outil idéal !

La forge, pour quoi faire ?

Le problème du partage par téléchargement

Vous mettez déjà à la disposition de vos collègues vos applications web HTML sous forme de téléchargement, sur un drive ! C’est une TRÈS mauvaise idée.
Si vous avez déjà réalisé ou utilisé des applications web, vous savez qu’elles contiennent forcément des bugs (plus ou moins importants) et des adaptations/améliorations à réaliser au fil du temps. Une application web n’est jamais parfaite et doit forcément évoluer. Si vous proposez le fichier en téléchargement, vous privez vos utilisateurs des futures mises à jour, parfois indispensables à son bon fonctionnement. Si vos utilisateurs se partagent votre application web par mail, il est possible qu’un ordinateur infecté y ajoute un cheval de Troie ou un virus. Si vous n’avez pas pensé à mettre vos coordonnées dans l’application, ses utilisateurs ne pourront pas vous contacter.

La solution : héberger en ligne

💡La bonne solution est donc d’héberger votre application web HTML en ligne. Vous pouvez souscrire un hébergement pour quelques euros, dizaines ou centaines d’euros par mois en fonction de vos besoins. Vous pouvez aussi utiliser l’outil mis à disposition par notre employeur : la forge des communs numériques.

Cette forge s’appuie sur l’outil GitLab qui peut faire peur lors du premier accès, l’outil est mal traduit et pas vraiment ergonomique. Il est fait pour permettre une collaboration autour de documents textuels (code informatique, documents MarkDown, etc). Mais la forge permet aussi d’héberger des fichiers HTML. Vous ne l’utiliserez que pour 2% de ses fonctionnalités, il faudra faire abstraction des autres fonctionnalités qui ne vous serviront pas.

Sécurité et confidentialité des données

On parle bien ici de fichiers HTML qui font travailler le navigateur : aucune donnée ne peut être traitée ou stockée par le serveur, et aucune base de données n’est proposée. C’est un gage de confiance IMPORTANT pour les utilisateurs : l’application est hébergée par notre employeur et aucune donnée n’est stockée ou hébergée en ligne, c’est le navigateur qui fait tout le travail.

Tout dépend cependant de la conception de l’application web HTML : si elle est conçue pour envoyer des données vers un autre serveur, celles-ci peuvent sortir. Cela n’est normalement pas possible en raison des règles de sécurité CORS en place sur la forge, mais il reste important de préciser dans l’application quels traitements sont appliqués aux données.

Je vous propose ci-dessous un tutoriel qui explique comment mettre en ligne un projet. Cela semble compliqué, mais cela ne vous prendra pas plus de quelques minutes.

Étape 1 : créer le projet

Cette opération est à réaliser à chaque fois que vous voudrez mettre en ligne une nouvelle application web HTML. Vous disposerez ensuite d’adresses distinctes et personnalisables pour chaque application, comme par exemple : https://juliendelmas.forge.apps.education.fr/monapplication1, https://juliendelmas.forge.apps.education.fr/monapplication2, etc.

Voici les opérations à réaliser :

  • 2. Créer un projet : cliquer à gauche sur « Projets » puis en haut à droite sur « Nouveau projet » puis « Créer un projet vide ».
  • 3. Vous devez définir votre projet
    • Choisir un nom qui correspond au nom de votre application web HTML,
    • choisir une URL de projet : cette URL n’a pas grand intérêt, ce n’est PAS l’URL de votre page hébergée, c’est l’URL de votre projet où se trouve votre code permettant à d’autres collègues d’y contribuer si vous le rendez public, ce qui n’est pas utile dans un premier temps. Cette URL est composée de votre nom d’utilisateur ou d’un nom de groupe (que vous pouvez créer dans le menu "Groupe") et d’un identifiant qui correspond à la fin de l’URL.
    • choisir la Visibilité, je vous conseille de choisir "Privé" si vous ne prévoyez pas d’ouvrir votre code au reste du monde. Vous pourrez toujours modifier cette valeur ultérieurement si vous changez d’avis.
    • décocher la case « Initialiser le dépôt avec un README ».
  • 4. Créer l’arborescence et déposer les fichiers
    Pour manipuler et modifier les fichiers, nous allons utiliser « Web IDE » ou « EDI » (les traductions de la forge sont très approximatives).
    Une fois le projet créé, cliquez sur le menu « Code » à droite et choisissez dans le menu « Web IDE ».

    Il est très important de respecter scrupuleusement l’arborescence et le nommage des fichiers, comme dans l’image ci-dessous. Vous pouvez utiliser le clic droit ou les icônes en haut à droite.

    • 4.1 Créer à la racine un fichier qui s’appelle .gitlab-ci.yml (attention au point au début du nom de fichier et pas d’espace dans le nom) : obligatoire, définit le dossier dans lequel se trouvent les pages web (public). Ce document doit avoir exactement le contenu suivant :
      pages:
        script:
          - echo "Rien à faire…"
        artifacts:
          paths:
            - public
        rules:
              - if: '$CI_COMMIT_BRANCH == "main"'
    • 4.2 Créer un dossier public dans lequel vous placez toutes les pages et ressources qui doivent être accessibles depuis internet (fichiers HTML, CSS, images, etc). Deux précisions :
    • 4.3 A l’intérieur du dossier « public », créez un fichier index.html : et ajoutez comme contenu ce que vous voulez, par exemple « bonjour ». Vous le modifierez ensuite.
  • 5. Publier les fichiers en ligne pour la première fois
    A la première mise en ligne et à chaque modification de ces fichiers, vous devrez cliquer sur la troisième icône à gauche (qui indique en violet le nombre de fichiers modifiés) pour publier la dernière version de votre page, en précisant de quelle version il s’agit ou quelles sont les principales modifications.

    Ajouter un commentaire pour indiquer qu’il s’agit de la première publication et cliquer sur « Commit and push to ‘main’ ».

    Confirmer que vous publiez bien dans la branche par défaut à la question « You’re committing your changes to the default branch. Do you want to continue ? ».

    Cliquer ensuite en bas à droite sur « Go to project » ou réouvrir la page de la forge qui contient votre projet. »

  • 6. Vérifier la bonne publication
    En accédant au projet, vous voyez apparaître un petit rond qui se remplit de bleu pour indiquer l’avancement. Après quelques secondes, il devient tout vert, c’est que tout est OK.
  • 7. Accès à votre application web HTML
    Accéder au menu « Déploiement » puis « Pages » : vous découvrez l’URL proposée pour votre page. C’est cette URL que vous devez conserver et que vous pourrez communiquer.

Vous pouvez changer le format d’URL :

  • Changer « juliendelmas » : accéder à la Page d’accueil > Groupes > Créer un groupe. Revenir sur le projet puis Paramètres > Général > Paramètres avancés > Transférer le projet > Sélectionner dans la liste un nouvel espace de nommage.
  • Changer « test » : Paramètres > Général > Paramètres avancés > Changer le chemin > Chemin : indiquer un nouveau chemin et valider

⚠️ Si votre identifiant Apps contient un point (exemple julien.delmas) qui se retrouve dans l’URL, cela ne fonctionnera pas. Vous devez créer un groupe (par exemple julien-delmas) et modifier l’URL comme ci-dessus.

Étape 2 : Mettre en ligne/actualiser les fichiers

Les étapes suivantes sont à réaliser à chaque fois que vous publierez une nouvelle version de votre application web HTML. Cela semble compliqué la première fois mais cela ne prendra pas plus de 30 secondes par la suite, en faisant un copier-coller du contenu de votre page index.html.

  • 1. Modifier les fichiers
    Cliquez sur le menu « Code » puis « Depot » à droite de nouveau sur « Code » et choisissez dans le menu « Web IDE ».

Après avoir modifié les fichiers du dossier public, vous devrez cliquer sur la troisième icône à gauche (qui indique en violet le nombre de fichiers modifiés) pour publier la dernière version de votre page, en précisant de quelle version il s’agit ou quelles sont les principales modifications.

  • 2. Lancer la publication
    Cliquer sur « Commit and push to ‘main’ »
  • 3. Confirmer la branche de publication
    Confirmer que vous publiez bien dans la branche par défaut à la question « You’re committing your changes to the default branch. Do you want to continue ? ».
  • 4. Accéder au projet
    Cliquer ensuite en bas à droite sur « Go to project » ou réouvrir la page de la forge qui contient votre projet. »
  • 5. Vérifier la bonne publication
    En accédant au projet, vous voyez apparaître un petit rond qui se remplit de bleu pour indiquer l’avancement. Après quelques secondes, il devient tout vert, c’est que tout est OK.
  • 6. Accès à votre application web HTML
    Accéder à votre application web et vérifier la bonne prise en compte des modifications. Cela peut prendre parfois quelques minutes. Pour contourner le cache de votre navigateur, vous pouvez afficher votre application web dans une fenêtre de navigation privée.

Étape 3 (facultative) : alléger l’interface indigeste de la forge

Il est possible de simplifier l’interface de la Forge (GitLab) en désactivant certaines fonctionnalités (que vous pourrez réactiver par la suite si vous en avez besoin).
Vous passerez de 10 à 5 entrées dans le menu.

Pour simplifier l’interface, cliquer dans le menu de gauche sur « Paramètres », puis « Général » et ouvrez le menu « Visibilité, fonctionnalités du projet, autorisations ».

Ensuite, désactivez les fonctionnalités. Attention de bien activer « Dépôt », « CI/CD » et « Pages » pour « Tout le monde ».

Étape 4 (obligatoire) : n’oubliez pas les mentions légales, c’est OBLIGATOIRE !

Tout site publié sur internet dont l’éditeur est établi en France doit disposer de Mentions légales accessibles depuis toutes les pages. C’est une obligation qui existe depuis la loi n° 2004-575 du 21 juin 2004.

Voici un exemple du minimum requis dans des mentions légales pour une application web HTML sans base de données

Éditeur du site
Ce site est édité à titre personnel et non professionnel [cela signifie gratuitement, sans recherche de profit] par [Prénom NOM ou pseudonyme], joignable à l’adresse [email de contact].

Hébergeur
La Forge des communs numériques éducatifs — ministère de l’Éducation nationale et de la Jeunesse, Direction du numérique pour l’éducation (DNE), 110 rue de Grenelle, 75007 Paris.
forge.apps.education.fr

Données personnelles
Ce site ne dispose d’aucune base de données ni d’aucun serveur de traitement. Les informations éventuellement saisies sont traitées uniquement par le navigateur de l’utilisateur et ne sont ni collectées, ni transmises, ni conservées par l’éditeur.