Mettre son application en ligne avec Fleek
Afin de mettre son application en ligne, nous allons utiliser Fleek qui permet de dépoyer des applications de manière gratuite et décentralisée.
L'application n'est donc pas hébergée sur un serveur centralisé qui peut tomber en panne, être piraté ou être censuré mais sur un réseau d'ordinateurs communiquant de manière décentralisé via un protocole de pair à pair nommé IPFS pour Inter Planetary File System.
Ce tutoriel est similaire à celui qui a été réalisé avec Netlify (voir notre article Déployer son Application Web en ligne gratuitement).
La démo est accessible ici: 👉Démo👈.
Sommaire
- Les prérequis
- Etape 1: se connecter sur Fleek
- Etape 2: sélectionner le fournisseur Git
- Etape 3: sélectionner le répertoire
- Etape 4: options de déploiement
- Etape 5: Déploiement terminé
- Pour aller plus loin
- Communauté & Assistance
Les prérequis
Ce tutoriel a vocation à présenter le déploiement d'Application Web avec le sdk-structure-app ou encore le sdk-bim-viewer mais peut s'appliquer également à toutes librairies javascript utilisées dans le cadre de site statique.
Pour cela, il faut au préalable créer un compte gratuitement sur Github.
Une fois cela fait, vous pouvez créer un compte sur Fleek directement à partir de votre compte Github (voir notre article Versionner avec GitHub)
Etape 1: se connecter sur Fleek
Cliquez Add new site sur la page d'accueil:
Etape 2: sélectionner le fournisseur Git
Choisissez le fournisseur git que vous utilisez. Dans notre cas, il s'agit de Github:
Etape 3: sélectionner le répertoire
Cherchez et sélectionnez le répertoire git que vous souhaitez déployer:
Etape 4: options de déploiement
- Sélectionnez IPFS
- Vous pouvez choisir n'importe quel branche de déploiement au lieu de la branche master
- Sélectionnez le framework, dans notre cas il s'agit de Create React App. Les autres champs seront alors automatiquement remplis
- Indiquez dans les variables d'environnement la Key => CI et la Value => false
- Cliquez sur Deploy site
- Lancement du déploiement:
Etape 5: Déploiement terminé
- Allez en haut de la page pour trouver l'adresse url sur laquelle a été déployé votre site:
- Cliquez sur l'url et votre Application apparaitra à l'adresse indiqué: (cliquez sur le dossier pour charger une maquette IFC)
Pour aller plus loin
Sur le déploiement décentralisé
Vous pouvez cliquer sur Verify on IPFS qui va vous rediriger sur un gateway IPFS utilisant le hash IPFS qui a été généré.
Cela signifie que votre Application a été déployé sur le réseau IPFS de manière décentralisée.
Pour l'afficher directement dans le navigateur et utilisant une url en ipfs://HASH, consultez l'article:
https://docs.ipfs.io/install/ipfs-companion/#install
Le navigateur Brave permet d'utiliser IPFS de manière native.
Sur les problèmes de routage
L'Application déployé est simple et ne contient pas de route. Dans les Applications plus complexes, ces dernières contiennent souvent un router tels que react-router-dom par exemple.
Le problème qui va se produire est lorsque vous voudrez aller sur les routes en utilisant le hash https://ipfs.io/ipfs/HASH.
La solution recommandée est d'intégrer le hash dans le routing: https://ipfs.io/ipfs/HASH/#/YOUR_ROUTE.
Communauté & Assistance
Afin de pouvoir échanger sur le sujet et répondre à vos questions, vous pouvez rejoindre notre serveur Discord et suivre nos développements sur notre Github.
Vous pouvez également nous contacter par email: contact@tridyme.com.
A bientôt sur TriDyme!! 🚀