Ce matin, je cherchais un moyen simple de tester des webhooks en local sans passer par ce bon vieux Ngrok qui est devenu un peu relou avec ses limites en version gratuite. J'ai d'abord pensé à monter mon propre serveur VPN (coucou Tailscale), mais franchement flemme.

Et puis tout à fait par hasard (aaah les joies de la sérendipité) je suis tombé sur cet outil qui devrait vous plaire, surtout si vous développez des applis qui doivent recevoir des notifications HTTP (GitHub, Stripe, Slack...). Ben oui vous connaissez la galère... votre serveur de dev est sur "localhost", donc inaccessible depuis l'extérieur, du coup, impossible de recevoir ces fameux webhooks sans ouvrir votre routeur ou utiliser un tunnel.

C'est là qu'intervient Webhooks Proxy Tunnel !

Grâce à cet outil, au lieu de multiplier les intermédiaires, vous déployez votre propre tunnel... directement sur l'infrastructure de Cloudflare. Et le meilleur c'est que ça tourne généralement très bien sur leur offre gratuite (dans la limite des quotas Workers évidemment, donc attention si vous bourrinez comme un fifou).

L'outil utilise un Cloudflare Worker couplé à un Durable Object (une sorte de mini-serveur d'état). Le Worker reçoit alors les requêtes publiques sur une URL en HTTPS (genre "truc.workers.dev") et les transmet via une WebSocket à un petit client Node.js qui tourne sur votre machine. Et hop, le trafic arrive sur votre port local.

Perso, je trouve ça brillant car même si le trafic passe techniquement par Cloudflare (puisque c'est leur infra), vous gardez la main sur le code qui s'exécute et vous évitez d'envoyer vos données à un service tiers supplémentaire dont vous ignorez tout.

Pour l'installer, ne plus c'est hyper fastoche. Il vous faut juste un compte Cloudflare et Node.js. J'ai testé l'install en moins de 5 minutes, vous clonez le dépôt, vous installez les dépendances et vous lancez le déploiement (qui vous demandera de vous authentifier) :

git clone https://github.com/peter-leonov/webhooks-proxy-tunnel.git
cd webhooks-proxy-tunnel/worker
npm install
npm run deploy

Si vous avez déjà croisé la route de jq , c'est probablement parce que vous vous la touchez un peu dans le terminal et que vous avez déjà joué avec du format JSON (logs, APIs, config...).

Jq, tout le monde l'adore parce que ça filtre, ça mappe et surtout ça transforme du JSON directement depuis le terminal. Mais la syntaxe de ce truc, aïe aïe aïe, c'est comme faire de la Regex. C'est de l'apprentissage sur le tas surtout. Faut copier coller des trucs en provenance de RIP-StackOverflow ou de ChatGPT-le-sang-de-la-veine. Et le pire c'est que 2 jours après, on a tout oublié !!! Puis lire la doc officielle, m'en parlez pas, c'est comme lire autre chose que mon site... c'est pas le criss de fun ^^.

Heureusement, pour ceux qui veulent vraiment monter en compétence sans s'endormir, il existe jq-quest .

C'est un petit projet sympa hébergé sur Codeberg qui propose une approche "learning by doing" (apprendre en faisant, pour les anglophobes). Au début, je pensais que c'était juste un QCM basique, mais en fait non puisqu'il faut vraiment taper les commandes et se salir les mains.

Pour essayer, suffit de cloner le dépôt, vous lancez le script, et on vous donne un input JSON et l'output attendu. À vous ensuite de trouver la bonne commande jq pour passer de l'un à l'autre.

Il vous faudra juste jq d'installé sur votre machine. Attention par contre, si vous êtes sous Windows, il faudra passer par WSL ou Git Bash, parce que le script .sh ne va pas aimer PowerShell.

Ça s'installe donc en deux secondes comme ceci :

git clone https://codeberg.org/gturri/jq-quest.git

cd jq-quest

Ensuite, vous lancez votre premier exercice :

./jq-quest.sh 1-pretty-print.json

Le script va alors vous afficher l'instruction, le JSON d'entrée et ce qu'il attend en sortie :

INSTRUCTION: Pretty print the json
INPUT: {"k1": "v1", "k2":[1, 3, 7]}
EXPECTED OUTPUT: {
 "k1": "v1",
 "k2": [
 1,
 3,
 7
 ]
}

Vous tapez votre proposition de filtre, et il vous dit si c'est bon ou pas. Pour proposer une solution, suffit de taper :

./jq-quest.sh 1-pretty-print.json 'SOLUTION'

Si vous séchez (et croyez-moi, ça va arriver), vous pouvez demander un indice avec :

./jq-quest.sh 1-pretty-print.json hint

Ou carrément la solution si vous êtes au bout du rouleau :

./jq-quest.sh 1-pretty-print.json solution

Mais rassurez vous, les exercices sont progressifs, ça commence par du "pretty print" basique (le truc qu'on fait tous), puis on attaque les filtres simples, les clés spéciales, les tableaux, et petit à petit on arrive sur des trucs bien plus costauds comme les itérations sur objets, le slicing ou les opérations mathématiques.

Ce genre de tuto interactif c'est top parce que jq, c'est hyper puissant, mais la courbe d'apprentissage est un peu raide au début. Là, en une petite heure, vous pouvez plier les exercices et avoir enfin compris la logique du truc au lieu de tâtonner à chaque fois.

D'ailleurs, si vous aimez ce genre d'outils pour parser de la donnée, je vous rappelle qu'il existe aussi fq pour les fichiers binaires ou encore htmlq pour le HTML . J'aurais pu vous parler d'outils graphiques pour faire ça, mais franchement, rien ne vaut la ligne de commande pour comprendre ce qu'on fait. Et si vous êtes plutôt Python, jetez un oeil à jc qui convertit la sortie des commandes classiques en JSON.

Bref, si vous voulez arrêter de souffrir à chaque fois que vous devez extraire un champ d'un JSON interminable, faites un tour sur jq-quest, ça va vous dérouiller les neurones.

Si vous êtes dev et que ce genre de tuto vous parle, suivez Korben sur LinkedIn pour d'autres découvertes.

Un grand merci à Guillaume pour la découverte.