A modern, full-stack web application template built with Astro and Cloudflare Workers. Features authentication, e-commerce capabilities, content management, and lightning-fast performance at the edge.
- Modern SSR Framework - Built with Astro 5+ for optimal performance
- Edge Computing - Deployed on Cloudflare Workers for global performance
- Full-Stack Ready - Complete backend with database and authentication
- E-commerce Integration - Stripe payments and shopping cart functionality
- Content Management - Admin panel for managing blog, portfolio, and products
- SEO Optimized - Built-in sitemap, structured data, and meta tags
- Better Auth - Modern authentication with session management
- Protected Routes - Admin dashboard with role-based access
- Secure Database - Cloudflare D1 with Drizzle ORM
- Environment Isolation - Separate configs for dev, staging, and production
- Stripe Integration - Complete payment processing
- Shopping Cart - Client-side cart with React Context
- Product Management - Admin interface for product CRUD
- Order Tracking - Order management and webhook handling
- Responsive Design - Mobile-first e-commerce interface
- Blog System - Markdown-based blog with admin interface
- Portfolio Showcase - Project galleries and case studies
- Dynamic Content - Easy content creation and management
- Image Optimization - Automatic image processing and optimization
- TypeScript - Full type safety across the stack
- React Components - Interactive components with TypeScript
- Database Migrations - Version-controlled schema changes
- Hot Module Reload - Fast development with instant updates
- CSS Modules - Scoped styling for components
AstroFlare/
├── src/
│ ├── components/ # React components
│ │ ├── cart/ # Shopping cart components
│ │ ├── ContactForm.tsx # Contact form component
│ │ └── Gallery.tsx # Image gallery component
│ ├── content/ # Content collections
│ │ ├── blog/ # Blog posts (Markdown)
│ │ ├── portfolio/ # Portfolio items
│ │ ├── products/ # Product catalog
│ │ └── config.ts # Content configuration
│ ├── contexts/ # React contexts
│ │ └── CartContext.tsx # Shopping cart state
│ ├── db/ # Database configuration
│ │ ├── schema.ts # Drizzle schema definitions
│ │ └── index.ts # Database connection
│ ├── layouts/ # Astro layouts
│ │ ├── BaseLayout.astro
│ │ ├── AuthLayout.astro
│ │ └── AdminLayout.astro
│ ├── lib/ # Utility libraries
│ │ ├── auth.ts # Authentication configuration
│ │ └── auth-utils.ts # Auth helper functions
│ ├── pages/ # Page routes
│ │ ├── api/ # API endpoints
│ │ ├── admin/ # Admin panel pages
│ │ ├── blog/ # Blog pages
│ │ ├── portfolio/ # Portfolio pages
│ │ ├── products/ # Product pages
│ │ └── index.astro # Homepage
│ ├── types/ # TypeScript definitions
│ └── utils/ # Utility functions
├── public/ # Static assets
├── drizzle/ # Database migrations
├── scripts/ # Build and setup scripts
├── astro.config.mjs # Astro configuration
├── drizzle.config.ts # Database configuration
├── wrangler.toml # Cloudflare Workers config
└── package.json
- Node.js 18+
- pnpm (recommended) or npm
- Cloudflare account (for deployment)
# Clone the repository
git clone https://github.com/yourusername/AstroFlare.git
cd AstroFlare
# Install dependencies
pnpm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration
# Set up authentication
pnpm run auth:setup
# Start development server
pnpm run devVisit http://localhost:4321 to see your site!
Create a .env.local file with the following variables:
# Database
DATABASE_URL="path/to/local.db"
# Authentication
BETTER_AUTH_SECRET="your-secret-key-here"
BETTER_AUTH_URL="http://localhost:4321"
# Stripe (for e-commerce)
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
# Email (Resend)
RESEND_API_KEY="re_..."# Development
pnpm run dev # Start dev server
pnpm run build # Build for production
pnpm run preview # Preview production build
# Database
pnpm run db:generate # Generate migrations
pnpm run db:push # Push schema to database
pnpm run db:studio # Open database studio
pnpm run db:migrate # Run migrations in production
# Authentication
pnpm run auth:setup # Configure authenticationThis template uses Drizzle ORM with Cloudflare D1 for the database:
# Create a new migration
pnpm run db:generate
# Apply migrations locally
pnpm run db:push
# View your data in Drizzle Studio
pnpm run db:studioCreate new blog posts in src/content/blog/:
---
title: "Your Blog Post Title"
description: "Post description"
publishDate: 2024-01-01
author: "Author Name"
image: "/images/blog/post-image.jpg"
tags: ["tag1", "tag2"]
---
Your blog content here...Add new products in src/content/products/:
---
title: "Product Name"
description: "Product description"
price: 99.99
image: "/images/products/product-image.jpg"
category: "Category"
featured: true
---
Product details and specifications...Access the admin panel at /admin/dashboard (requires authentication):
- Content Management - Create and edit blog posts, portfolio items, and products
- Order Management - View and process customer orders
- User Management - Manage user accounts and permissions
- Connect your repository to Cloudflare Pages
- Configure build settings:
- Build command:
pnpm run build - Build output directory:
dist
- Build command:
- Set environment variables in Cloudflare dashboard
- Create D1 database and run migrations:
wrangler d1 create astro-auth pnpm run db:migrate
Set these in your Cloudflare Pages dashboard:
DATABASE_URL=your-d1-database-url
BETTER_AUTH_SECRET=your-production-secret
BETTER_AUTH_URL=https://yourdomain.com
STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
RESEND_API_KEY=re_...
Update astro.config.mjs with your domain:
const getSiteUrl = () => {
if (process.env.CF_PAGES_BRANCH === 'main') {
return 'https://yourdomain.com'; // Your production domain
}
// ... other configurations
};# Run type checking
pnpm run astro check
# Build and test locally
pnpm run build
pnpm run preview- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Astro Documentation
- Cloudflare Workers Documentation
- Better Auth Documentation
- Drizzle ORM Documentation
- Stripe API Documentation
- All authentication is handled securely with Better Auth
- Environment variables are properly isolated
- Database queries use parameterized statements
- CORS and security headers are configured
- Regular dependency updates via automated tools
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for excellent user experience
- Edge Computing: Global CDN with <50ms response times
- Image Optimization: Automatic image processing and lazy loading
- Bundle Analysis: Tree-shaken and optimized builds
- Modify global styles in
src/styles/ - Component-specific styles use CSS Modules
- Tailwind CSS can be easily integrated
- All React components are in
src/components/ - Astro components for layouts and static content
- TypeScript interfaces in
src/types/
- Modify
src/db/schema.tsfor database changes - Generate and apply migrations with Drizzle
MIT License - see LICENSE for details.
- Astro - The web framework for content-driven websites
- Cloudflare - Edge computing and global infrastructure
- Better Auth - Modern authentication for the web
- Drizzle ORM - TypeScript ORM for SQL databases
- Stripe - Payment processing platform
Built with ❤️ using Astro and Cloudflare Workers