Modern MERN Stack Replacement

A modern MERN stack replacement designed for ultra-cheap, zero-ops deployment on Cloudflare—powered by ESMate, React, Nitro, Cloudflare Workers, oRPC type-safe APIs, Drizzle ORM, Cloudflare D1, Better Auth, TanStack Router, and elegant shadcn/ui components.

Everything you need to ship production-ready apps.

🚀 Everything You Need

A carefully curated stack of modern technologies that work perfectly together.

🎨 Frontend Excellence

Built with Vite, React, and TanStack Router for a blazing-fast, type-safe single page application experience. Styled with Tailwind CSS and shadcn/ui for modern, accessible interfaces.

🔋 Backend Power

Powered by Nitro for universal deployment and oRPC for end-to-end type safety. Includes Drizzle ORM for database management and Better Auth for a complete authentication solution.

🛠️ Developer Experience

Includes ESMate, a modern task runner and CLI that streamlines project management, automates formatting, and enhances your development workflow.

🎮 Demonstration

Explore fully functional demo apps built with this template to see the stack in action here:

https://cloudflare-react-nitro-orpc.dthvien.workers.dev/

☑️ Todo App

A complete CRUD application demonstrating oRPC mutations, optimistic updates, and real-time state management with TanStack Query.

💬 Real-time Chat

A live chat room showcasing oRPC subscriptions (Server-Sent Events) for real-time updates, message persistence, and multi-user communication.

🛠️ Getting Started

This project is generated by the ESMate React Nitro template, providing a comprehensive and pre-configured foundation for building modern, type-safe full-stack applications with ease.

Installation

1. Create a new project:

   npx create-esmate --template react-nitro

   Change into the new project directory:

   cd [new-project-name]

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create a .env file by copying the sample.env file:

   cp sample.env .env

4. Configure Cloudflare

   npx wrangler login

   Then configure wrangler.json with your worker and database information.

5. Run the development server:

   pnpm run dev

   This will run migrations and start the development server. Open http://localhost:8787 (or the port shown in your terminal) to see the result.

📦 Available Scripts

• pnpm run dev: Runs database migrations and starts the Nitro + Vite development environment.
• pnpm run build: Performs type checking and creates a production build.
• pnpm run start: Previews the production build locally.
• pnpm run deploy: Deploys the production build to the cloud.
• pnpm run fix: Automatically fixes code formatting and linting issues.
• pnpm run check: Checks the codebase for formatting and linting errors.
• pnpm run test: Runs unit tests using Vitest.

🌍 Why Cloudflare?

Deploying on Cloudflare Workers and D1 provides a robust, cost-effective infrastructure for modern applications:

• Zero-Ops Scaling: Automatically scales from zero to global traffic without manual server management.
• Global Edge Performance: Your application runs in 300+ cities worldwide, delivering sub-100ms latency to users globally.
• Cost Efficiency: Leverage a generous free tier and a pay-as-you-go model that is significantly cheaper than traditional cloud providers.
• Integrated Data: Cloudflare D1 offers a native, serverless SQL database designed to work seamlessly with Workers.
• Fast Development Cycle: With wrangler, you can preview and deploy changes to the global network in seconds.