Skip to content

README.md

Latest commit

 

History

History
131 lines (84 loc) · 2.8 KB

README.md

File metadata and controls

131 lines (84 loc) · 2.8 KB

react-router for cloudflare boilerplate

A modern, production-ready template for building full-stack React applications using React Router - published to cloudflare

Features

  • 🚀 Server-side rendering
  • 🗄️ Convex real-time database
  • 🪟 ShadCN components
  • 🔑 Authentication with Clerk
  • ⚡️ Hot Module Replacement (HMR)
  • 📦 Asset bundling and optimization
  • 🔄 Data loading and mutations
  • 🔒 TypeScript by default
  • 🎉 TailwindCSS for styling
  • 🔍 Biome for linting
  • 📖 React Router docs

Getting Started

Template application

This is a template project representing a simple Todo app.

To convert it into your own app, use claude-code and run the /transform-to-app command (see .claude/commands/transform-to-app.md).

example:

/transform-to-app confirm worktracking-app

This will remove all the Todo-App specifics and renmae it to Worktracking-App.

Clerk

  1. First, copy .env.example to .env

  2. To use the authentication setup, to go https://clerk.com and create an accound.

  3. Then, within the Clerk dashboard, create an application, Configure > API Keys > React Router And copy:

  • VITE_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY
  • CLERK_SECRET_KEY=sk_test_YOUR_KEY and add then to you .env.

  1. Then copy the Frontend API URL (right hand side in the clerk dashboard) and att CLERK_JWT_ISSUER_DOMAIN=URL to .env

  2. Go to JWT templates > Add new template and select Convex

Convex

For development, you can run convex locally.

  1. Run bun run convex:dev
  2. Create a new project
  3. create a local deployment
  4. Convex will complain about a environment variable not being set - that's ok
  5. in a new shell/terminal, run ./setup_convex_env.sh - this will set the missing environment variable from .env

Now you're ready run roll!

Installation

Install the dependencies:

bun install

Development

Start the development server with HMR:

bun dev

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

Check and lint:

bun check

Previewing the Production Build

Preview the production build locally:

bun run preview

Building for Production

Create a production build:

bun run build

Deployment

Deployment is done using the Wrangler CLI.

To build and deploy directly to production:

bun run deploy

To deploy a preview URL:

bunx wrangler versions upload

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

bunx wrangler versions deploy

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

Built with ❤️ using React Router.