Vite + React + Firebase + Cloudflare Workers Template

This template provides a starting point for building a full-stack application using:

• Vite + React for the frontend
• Firebase for authentication and database
• Cloudflare Workers for API and static asset serving
• TypeScript throughout
• Docker development environment

Quick Start

1. Clone this template
2. Copy .env.example to .env and fill in your credentials
3. Install dependencies:

npm install

4. Start development servers:

# Start both frontend and API
npm run dev:all

# Or start individually:
npm run dev    # Frontend on port 5173
npm run api    # API on port 8787

Development

• Frontend runs on http://localhost:5173
• API runs on http://localhost:8787
• Frontend automatically proxies /api requests to the API server

Environment Variables

Create a .env file with:

# Firebase Configuration
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_PRIVATE_KEY="your-private-key"
VITE_FIREBASE_CLIENT_EMAIL=your-client-email
VITE_FIREBASE_PRIVATE_KEY_ID=your-private-key-id

# AI Service Configuration (if needed)
VITE_DEVIN_API_KEY=your-devin-api-key
VITE_CODEBUFF_API_KEY=your-codebuff-api-key
VITE_CLAUDE_API_KEY=your-claude-api-key
VITE_INFERABLE_API_KEY=your-inferable-api-key

Docker

Development:

docker compose up app

Production preview:

docker compose up production

Deployment

1. Build the frontend:

npm run build

2. Deploy to Cloudflare:

npm run deploy

This deploys both the API worker and static frontend assets.

Testing

npm run test        # Run tests
npm run test:watch  # Run tests in watch mode

Project Structure

├── src/
│   ├── api/       # API routes and handlers
│   ├── components/# React components
│   ├── hooks/     # Custom React hooks
│   ├── pages/     # Page components
│   ├── services/  # Service integrations
│   ├── styles/    # Global styles
│   ├── types/     # TypeScript types
│   ├── utils/     # Utility functions
│   ├── worker.ts  # Worker entry point
│   └── index.tsx  # Frontend entry point
├── config/        # Configuration files
├── docs/         # Documentation
└── public/       # Static assets

License

MIT