The latest articles on Forem by Mohamed Rayen Bouzaabia (@mohamedrayenbouzaabiaaxelites). https://forem.com/mohamedrayenbouzaabiaaxelites https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3515642%2Fd5acbff5-e41e-4d60-9466-5452c6a34295.jpeg https://forem.com/mohamedrayenbouzaabiaaxelites en Mohamed Rayen Bouzaabia Fri, 19 Sep 2025 13:29:56 +0000 https://forem.com/mohamedrayenbouzaabiaaxelites/a-polished-read-only-cloudflare-d1-explorer-express-vanilla-js-55jf https://forem.com/mohamedrayenbouzaabiaaxelites/a-polished-read-only-cloudflare-d1-explorer-express-vanilla-js-55jf <p>If you’ve ever wanted a lightweight UI to explore your Cloudflare D1 data without pulling in a heavy admin tool or writing ad‑hoc scripts every time, this project is for you. It’s an Express + vanilla JS UI that talks to the Cloudflare v4 API and enforces read‑only queries for safety.</p> <p>Why this approach?</p> <ul> <li>No client frameworks or build steps — easy to run and tweak.</li> <li>Read‑only by design — only single <code>SELECT</code>/<code>WITH</code> statements are allowed.</li> <li>Professional UX — responsive layout, sidebar table list, sortable results, and light/dark theme.</li> <li>Shareable state — the UI syncs to URL params so you can refresh or send a link to the exact view.</li> </ul> <p>Highlights</p> <ul> <li>Sidebar table list with search (excludes internal/underscore tables like <code>_cf_*</code>).</li> <li>Browse panel to pick columns, add filters, set sort/limit/offset.</li> <li>Click any header to toggle ASC/DESC sorting.</li> <li>SQL editor for custom single‐statement queries.</li> <li>Settings modal to manage <code>.env</code> credentials from the UI.</li> <li>Light/Dark theme toggle with persistence.</li> </ul> <p>Screenshots<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fknaunfjdovmrtd7ytmae.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fknaunfjdovmrtd7ytmae.png" alt="dark mode" width="800" height="376"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxyyr2hhx40xwkitvhell.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxyyr2hhx40xwkitvhell.png" alt="bright mode" width="800" height="377"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6lgcoeqnpq4rrcy0r6uf.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6lgcoeqnpq4rrcy0r6uf.png" alt="SQL" width="800" height="363"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fca9ckuidarzu6qtv8491.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fca9ckuidarzu6qtv8491.png" alt="Settings" width="800" height="380"></a></p> <p>Getting started<br> 1) Clone the repo and install deps<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>git clone https://github.com/mohamedrayenbouzaabia-axelites/cloudflare_d1_interface.git npm install </code></pre> </div> <p>2) Run it<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm run dev # nodemon # or npm start </code></pre> </div> <p>3) Open <a href="http://localhost:3000" rel="noopener noreferrer">http://localhost:3000</a> and set your Cloudflare credentials in the Settings panel (it writes <code>.env</code> for you).</p> <p>Configuration<br> <code>.env</code> supports:</p> <ul> <li><code>CF_ACCOUNT_ID</code></li> <li><code>CF_D1_DATABASE_ID</code></li> <li> <code>CF_API_TOKEN</code> (D1 Data Access is enough)</li> <li> <code>CF_API_BASE</code> (optional)</li> </ul> <p>Security</p> <ul> <li>The server removes comments, rejects multi‐statement SQL, and only accepts single <code>SELECT</code>/<code>WITH</code> queries.</li> <li>Tokens never leave the server.</li> </ul> <p>Under the hood</p> <ul> <li>Express serves <code>/public</code> and exposes APIs: <ul> <li> <code>POST /api/query</code> (read‑only guard)</li> <li> <code>GET /api/tables</code>, <code>GET /api/columns?table=...</code> </li> <li> <code>GET/POST /api/env-config</code> for <code>.env</code> management</li> </ul> </li> <li>The UI is vanilla JS that syncs most state into URL params.</li> </ul> <p>What’s next?</p> <ul> <li>Export CSV</li> <li>Keyboard navigation and shortcuts</li> <li>Saved views</li> </ul> <p>If you’d like to try it or contribute, grab the repo and let me know what would make it more useful for your team!</p> cloudflare node webdev database