🚀 I Built x: An Ultra-Fast, Full-Stack React Framework Native to Bun!

Hey Hack Club! 👋

I just shipped x (@thexjs) — an open-source, single-process React framework designed from scratch to run natively on top of the Bun runtime.

Check out the project on StarDance ⭐

💡 The Idea

Modern frameworks like Next.js bring heavy bundlers, complex dev servers, and dozens of abstractions. Since Bun is already a transpiler, bundler, package manager, and native HTTP engine with built-in SQLite & Postgres support, I asked a simple question:

Why wrap React around Webpack/Vite when Bun can do it all natively in a single process?

🔑 Key Features

• 📁 File-Based Routing: Drop .tsx files in src/pages/ to create routes.
• ⚡ Hybrid Rendering: Choose SSR or static prerendering per route (export const mode = "static").
• 🔌 Built-in API Routes: Write REST endpoints in src/api/ sharing the same memory and DB context.
• 🛠️ Server Functions: Call type-safe server logic directly from your React components.
• 🛡️ Zero-Trust Security: AST build-time leak detection (prevents secret key exposure), native CSRF protection, and rate limiting.
• 📊 Production Observability: Built-in /healthz & /readyz probes, JSON logging, and OpenTelemetry/Sentry support.
• 🚀 Deploy Anywhere: Run on any VPS/Docker, or deploy to Vercel via @thexjs/adapter-vercel.

⏱️ Quickstart

Bootstrap a production-grade app in 30 seconds:

bun create thexjs-app@latest my-app
cd my-app
bun run dev

🔗 Links & Resources

• 🌟 StarDance: stardance.hackclub.com/home
• ⭐ GitHub Repository: github.com/abdelkabirouadoukou/x
• 📖 Documentation: thexjs.vercel.app

Feedback and GitHub stars are super appreciated! Let me know what you think! 🙌

Enterprise Security, Observability & Zero-Config Vercel Deployments 🚀

Massive milestone for x (@thexjs)! Over the past few days, I’ve shipped major core upgrades focused on turning @thexjs from a fast Bun React engine into an Enterprise-Grade Full-Stack Framework.

Here is a breakdown of everything added in the latest updates! 👇

1. ⚡ Vercel Build Output API v3 Adapter (@thexjs/adapter-vercel)

Deploying to Vercel is now zero-config. Instead of relying on legacy runtime hacks or manual vercel.json overrides, @thexjs/adapter-vercel hooks directly into the build pipeline to generate a clean .vercel/output/ directory:

• Edge Static Assets: Client-side hydration bundles & media served straight from Vercel’s global CDN (.vercel/output/static/).

• Standalone SSR Serverless Bundle: SSR routes and Server Actions inlined into a standalone Node.js-compatible ESM bundle (.vercel/output/functions/render.func/).

• Automated Routing Manifest: Generates config.json rules routing static files first, with SSR fallbacks.

1. 🛡️ Hardened Security Core

Security in production isn’t optional. @thexjs/core now comes pre-configured with essential security guardrails out of the box:

• 🔒 Build-Time Env Isolation (EnvLeakageError): The bundler strictly checks client bundles. If any server-only env variable (e.g., STRIPE_SECRET_KEY, DATABASE_URL) without the THEXJS_PUBLIC_ prefix leaks into client code, the build instantly halts.

• 🛑 Server Action CSRF Protection: All requests hitting /__x/actions/* are automatically verified for Origin and Referer headers, with support for double-submit cookie tokens.

• 🛡️ Native Security Headers & Rate Limiting: Built-in helpers for CSP, HSTS, X-Frame-Options, and a configurable in-memory rate limiter to protect endpoints against brute-force/DDoS attacks.

1. 📊 Enterprise Observability

Production servers shouldn’t be black boxes. I added production-ready tracing & monitoring:

• 📝 Structured JSON Logging: Replaced raw console.log output with structured JSON logs (timestamp, requestId, status, durationMs) ready for ingestion by Datadog, Loki, or Grafana.

• 🩺 Kubernetes / Container Probes (/healthz & /readyz): Native endpoints served ahead of all route matching so orchestrators can test process liveness and DB readiness.

• 🚨 APM Error Tracing (Sentry & OpenTelemetry): Added createSentryReporter & createOtelReporter hooks to automatically capture uncaught SSR or action errors in production.

🛠️ Updated @thexjs/core Config Example

Here’s how clean configuring security and observability looks now:

import { createApp, createSentryReporter } from "@thexjs/core";

const app = createApp({
  pagesDir: "./src/pages",
  actionsDir: "./src/actions",
  security: {
    csrf: { allowedOrigins: ["https://app.example.com"] },
    headers: { contentSecurityPolicy: "default-src 'self'" },
    rateLimit: { limit: 100, windowMs: 60_000 },
  },
  observability: {
    logging: true,
    errorReporter: createSentryReporter(Sentry),
    health: { checks: { database: () => db.ping() } },
  },
});

🚀 Devlog: SSR Optimizations, Bun Integration & DX Refactoring

Over the past couple of days, I’ve been focusing heavily on refining the core architecture, improving developer experience (DX), and ensuring maximum performance on top of the native Bun runtime.

🌟 What’s New in this Update:

⚡ Server-Side Rendering (SSR) Enhancements: Optimized the initial payload and component hydration, reducing response latency on native Bun HTTP servers.

🛠️ Developer Experience (DX) Improvements: Refactored project startup CLI tools and improved hot module reloading stability so file changes reflect instantly.

🐛 Edge Case Bug Fixes: Resolved routing edge cases related to query parameter parsing and static asset serving.

📦 Cleaner Codebase: Streamlined module imports and cleaned up internal state handling during request lifecycles.

🧠 Challenges & Learnings: Handling concurrent request cycles during hot-reloads on Bun brought up a few tricky state-handling bugs. Fine-tuning low-level logging helped isolate memory leaks and ensure the server runs clean without manual restarts.

Building from scratch: Launching x (TheXJS) on NPM! 📦⚡️Over the past weeks, I’ve been working on a full-stack React framework designed to leverage the raw speed and efficiency of the Bun runtime.

Today, I’m happy to ship the first stable version to the official NPM Registry under @thexjs!

Key Milestones:

• Monorepo Architecture: Clean separation between core engine and CLI toolchain.

• Scaffolding Tool: Spin up new projects instantly with bun create thexjs-app.

• Documentation Hub: Live docs platform for guide-throughs and API references.

🌐 Live Demo & Docs: https://thexjs.vercel.app/
📦 NPM Registry: https://www.npmjs.com/~abdelkabirouadoukou
https://www.npmjs.com/package/create-thexjs-app
https://www.npmjs.com/package/@thexjs/core
https://www.npmjs.com/package/@thexjs/env
https://www.npmjs.com/package/@thexjs/cli
💻 GitHub Repository: https://github.com/abdelkabirouadoukou/x

Open source is all about learning by building. I’d love to hear your thoughts, feedback, or suggestions!

#softwareengineering #bunjs #react #frontend #opensource #developer #webdevelopment