English | 中文
If you find this project helpful, please consider giving it a ⭐️ Star ⭐️. Your support is greatly appreciated!
🌐 Live Demo • ✨ Features • 🚀 Deployment • 💻 Development • 🔧 Tech Stack
📺 The complete video tutorial covers:
- Project introduction and feature demonstration
- Detailed steps for frontend deployment to Cloudflare Pages
- Detailed steps for backend deployment to Cloudflare Workers
- Configuring Cloudflare Email routing
- Setting up environment variables and database
ZMAIL consists of two parts that need to be deployed separately, deploy the backend first, then the frontend:
- Click the "Deploy to Cloudflare Workers" button
- Connect your GitHub account and select this repository
- Configure build settings:
- Deploy command:
yarn deploy - Advanced settings -> Root directory:
/worker
- Deploy command:
- Configure D1 database:
- Create a D1 database (e.g.,
mail_db) - Bind it to your Worker (binding name:
DB)
- Create a D1 database (e.g.,
- Configure Email routing:
- Set up Email routing in the Cloudflare dashboard to forward emails to your Worker
- If you want to configure multiple domain emails, set up email forwarding for each domain to the worker in the CloudFlare dashboard
- Click "Deploy"
- Click the "Deploy to Cloudflare Pages" button
- Connect your GitHub account and select this repository
- Configure build settings:
- Build command:
yarn build - Build output directory:
dist - Root directory (Advanced) -> Path:
frontend
- Build command:
- Configure environment variables:
VITE_API_BASE_URL: Your Worker API base URL (e.g.,https://api.mdzz.uk)VITE_EMAIL_DOMAIN: Your domain list, separated by ',' (e.g.,mdzz.uk,zaunist.com)
- Click "Save and Deploy"
# Navigate to frontend directory
cd frontend
# Install dependencies
yarn install
# Start development server
yarn dev# Navigate to worker directory
cd worker
# Install dependencies
yarn install
# Build preview
yarn build
# Deploy to Cloudflare
yarn deploy- React - UI library
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Vite - Modern frontend build tool
Contributions via Pull Requests or Issues are welcome!