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:

1
node 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”