Localflare : Un tableau de bord local pratique pour Cloudflare Workers

Êtes‑vous fatigué de déboguer vos Cloudflare Workers sans interface visuelle ? Localflare résout ce problème en vous offrant un tableau de bord en temps réel, sans configuration pour tout ce qui tourne à l’intérieur de vos Workers — des bases de données D1 aux namespaces KV en passant par les seaux R2 — tout en gardant votre code inchangé.

Qu’est‑ce que Localflare ?

Localflare est un outil CLI qui lance un worker local en tandem avec un worker API léger. L’API sert un tableau de bord React intuitif hébergé sur studio.localflare.dev. Lorsque votre worker s’exécute à http://localhost:8787, le tableau de bord découvre automatiquement votre wrangler.toml, crée des APIs sur __localflare/* et vous propose une interface tout‑en‑un pour :

• D1 Database Studio – éditeur SQL complet, édition en ligne, opérations en masse, génération de données fictives.
• KV Browser – afficher, modifier, supprimer des paires clé‑valeur.
• R2 File Manager – télécharger, télécharger et gérer des objets.
• Queue Inspector – envoyer des messages de test et afficher l’état de la file.
• Durable Objects – inspecter l’état d’une instance et envoyer des requêtes.
• Service Bindings – proxy automatique.

Pas de SDK, pas de modifications de code : il suffit de lancer localflare dans le dossier de votre projet.

Guide de démarrage rapide

1. Allez dans votre projet Workers :

   cd /path/to/your-worker
   

2. Installez Localflare globalement (vous pouvez aussi utiliser npx) :

   npm i -g localflare
   # ou
   pnpm add -g localflare
   

3. Exécutez Localflare :

   localflare
   

   Localflare fait :
4. Lire votre wrangler.toml
5. Démarrer votre worker à http://localhost:8787
6. Ouvrir le tableau de bord à https://studio.localflare.dev

Si vous préférez uniquement la ligne de commande (sans ouverture automatique du navigateur), utilisez :

localflare --no-open

Personnalisation du port

localflare --port 9000

Passer les options de Wrangler directement

Vous voulez exécuter un environnement spécifique ou définir des variables d’environnement ? Utilisez -- pour transmettre les arguments :

localflare -- --env staging
localflare -- --var API_KEY:secret

localflare --port 9000 -- --env production --remote

Mode d’attachement – idéal pour Next.js, Remix ou d’autres frameworks

Lorsque votre pile de développement lance un serveur séparé (ex : pnpm dev), Localflare peut s’attacher au processus existant, tout en partageant vos liaisons.

1. Terminal 1 – lancez votre serveur de développement

   pnpm dev   # ou opennext dev, nuxt dev, etc.
   

2. Terminal 2 – lancez l’API Localflare

   localflare attach
   

L’API écoutera sur http://localhost:8788. Vous pouvez également modifier le port de l’API :

localflare attach --port 9000

Résolution de problèmes du navigateur

Les navigateurs modernes bloquent parfois les connexions de studio.localflare.dev vers localhost:8787. Voici comment les débloquer :

Chrome / Chromium – Activez Local network access dans la boîte de dialogue d’informations du site et actualisez. Safari / Brave – Installez mkcert, générez une CA locale et redémarrez votre navigateur. Alternative Brave – Désactivez les Shield pour studio.localflare.dev.

Liaisons prises en charge en un coup d’œil

Toutes les fonctionnalités énumérées ci‑dessus sont disponibles « out‑of‑the‑box » sans configuration supplémentaire.

Pourquoi Localflare ?

• Zero‑config : lecture automatique de wrangler.toml.
• Bindings réels : pas de simulation ; les données proviennent de votre environnement de développement en direct.
• Multi-framework : fonctionne avec Next.js, Remix, Nuxt, Astro, SvelteKit et Workers vanilla.
• Convient aux développeurs : édition en ligne, génération de données fictives, éditeur SQL, téléchargement par glisser‑déposer.
• Open‑source : licence MIT, piloté par la communauté. Pensez à soutenir le projet pour le maintenir actif.

Obtenir de l’aide et contribuer

• Documentation : https://github.com/rohanprasadofficial/localflare
• Issues GitHub : soumettez des bugs ou des demandes de fonctionnalités.
• Sponsoriser : https://buy.stripe.com/9AQ8e7l6f2aG4g6gII (optionnel mais apprécié)

Résumé

Localflare élimine un point de friction majeur dans le développement Workers : vous pouvez désormais inspecter, modifier et tester chaque ressource liée tout en exécutant votre code localement. C’est une configuration rapide, un ensemble robuste de fonctionnalités et un choix idéal pour quiconque construit sur Cloudflare Workers.

Prêt à y mettre la main ? Clonez le dépôt, installez l’outil CLI et regardez votre tableau de bord local prendre vie en quelques secondes. Amusez‑vous bien !