Comment développer un front-end quand le back-end n’est pas accessible ou pas écrit? NodeBackFake est là pour ça!
Introduction
Je développe un side-project dont la partie back-end est plus ou moins gourmande et mon vaillant petit laptop est incapable de la faire fonctionner. Du coup, je développe uniquement le front-end et avancer sans pouvoir effectuer d’appel back-end est rapidement handicapant.
Recours à node.js
Vu les performances de mon laptop, j’ai opté pour faire tourner le front-end avec node.js. Ça donne le double avantage de ne pas être gourmand en processeur et d’éviter de compiler la webapp. Après avoir lu cet article sur DevCommunity, je me suis dit que l’idée de retourner des fichiers JSON en guise de réponse aux appels back-end était plutôt bonne. Du coup, je me suis lancé dans l’écriture d’une version pour node.js.
Concept de base
Le principe est d’intercepter tous les appels HTTP (GET, POST, PUT, DELETE) puis de vérifier la présence d’un fichier JSON qui pourrait servir de réponse “back-end” à l’appel. Si ce fichier n’existe pas, le programme recherchera la ressource correspondante. Si la ressource n’existe pas, le serveur retourne une erreur 404. Rien de très complexe donc.
Utilisation
Il faut bien sûr avoir installé node.js, puis dans un terminal lancer NodeBackFake:
1node nbfake.js --host=computer.lan --port=4500 --fake-dir=/home/project/fakes --fake-prefix=fake_ --fake-suffix=.json --web-dir=/home/project/
A partir de là, le serveur node est lancé et attend les requêtes. Pour chaque appel, NodeBackFake va rechercher un fichier “fake” nommé selon la règle:
- dossier “fake-dir”
- préfixe “fake-prefix”
- méthode HTTP (get, post, put, delete)
- url (en remplaçant les /, &, = et ? par _)
- suffixe “fake-suffix”
Exemple: un GET de l’url “/crud/test?id=1&active=yes” donnera le nom /home/projects/fakes/fake_get_crud_test_id_1_active_yes.json
Paramètres
Les paramètres sont les suivants, ils sont tous optionnels (par utilisation d’une valeur par défaut).
| Paramètre | Description | Défaut |
|---|---|---|
| --host | adresse IP ou hostname sur lequel NodeBackFake écoutera les requêtes | localhost |
| --port | port sur lequel NodeBackFake écoutera les requêtes | 3000 |
| --fake-dir | dossier dans lequel sont stockés les fichiers “fake” | ./ |
| --fake-prefix | préfixe des noms des fichiers “fake” | _fake_ |
| --fake-suffix | suffixe des noms des fichiers “fake” | .json |
| --web-dir | dossier dans lequel sont stockés les fichiers du front-end | ./ |
Paramètres de NodeBackFake
Format du fichier JSON “fake”
Pour que NodeBackFake puisse répondre un contenu JSON “fake” à la requête, le fichier doit être structuré comme ceci:
1{"contentType":"text/json","status":200,"content":{}}
Explications
- contentType: le type mime à retourner au navigateur
- status: le code d’erreur HTTP de la réponse (donc on peut simuler des erreurs 404, 500, 418, etc)
- content: il s’agit du contenu à retourner en guise de réponse.
Exemple
1{"contentType":"text/json","status":200,"content":{"username":"gobothegeek","password":null,"logged":true}}
Ici, on simule un service de login en retournant une réponse positive (logged = true)
Code source
Le code source est disponible dans un []fichier zip](/downloads/NodeBackFake.zip).
Conclusion
Même si le programme peut être amélioré (recherche du mime type par exemple), son utilisation permet d’avancer un développement front-end sans trop se soucier du back-end.
Référence
NodeBackFake est inspiré de l’idée de Alexander “Xnbox”