Cloudflare React Router SSR DB Boilerplate

A modern, production-ready template for building full-stack React applications using React Router.

Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS for styling
• 📖 React router
• Resend for sending email

Getting Started

Installation

Install the dependencies:

npm install

First time for new project

npx wrangler kv namespace create TO_DO_LIST
npx wrangler@latest d1 create DATABASE
npm run typecheck
npx wrangler d1 migrations create DATABASE todo
npx wrangler d1 migrations apply DATABASE --remote
npx wrangler secret put RESEND_API_KEY
npx wrangler secret put RESEND_FROM
npx wrangler secret put RESEND_TO
npm run typecheck

Development

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Previewing the Production Build

Preview the production build locally:

npm run preview

Building for Production

Create a production build:

npm run build

Deployment

Deployment is done using the Wrangler CLI.

To build and deploy directly to production:

npm run deploy

To deploy a preview URL:

npx wrangler versions upload

You can then promote a version to production after verification or roll it out progressively.

npx wrangler versions deploy