jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pwf-website-new/MIGRATION_SUMMARY.md

4.8 KiB
Raw Blame History

Migration to Cloudflare Pages - Summary

What Was Changed

1. Architecture Migration

  • From: Express.js server with session-based authentication
  • To: Static React app with Cloudflare Functions and JWT authentication

2. Backend Changes

  • API Routes: Converted from Express routes to Cloudflare Functions
    • /api/classes → functions/api/classes.ts
    • /api/newsletter → functions/api/newsletter.ts
    • /api/contact → functions/api/contact.ts
    • /api/auth/* → functions/api/auth.ts
    • /api/bookings → functions/api/bookings.ts

3. Authentication System

  • From: Session-based authentication with Passport.js
  • To: JWT token-based authentication
  • Changes:
    • Removed session middleware
    • Implemented JWT signing/verification
    • Updated client-side auth to use localStorage for token storage
    • Modified API requests to include Authorization headers

4. Data Storage

  • From: In-memory storage (lost on restart)
  • To: Cloudflare KV storage (persistent)
  • Benefits: Data persists across deployments and function invocations

5. Build Configuration

  • Frontend: Remains Vite-based React app
  • Backend: Now uses Cloudflare Functions instead of Express server
  • Deployment: Single command deployment to Cloudflare Pages

New File Structure

├── functions/                    # Cloudflare Functions
│   ├── _middleware.ts           # CORS middleware
│   └── api/
│       ├── auth.ts             # Authentication endpoints
│       ├── bookings.ts         # Booking management
│       ├── classes.ts          # Class data
│       ├── contact.ts          # Contact form
│       └── newsletter.ts       # Newsletter signup
├── client/                      # React frontend (unchanged)
├── wrangler.toml               # Cloudflare configuration
├── DEPLOYMENT.md               # Deployment instructions
└── test-deployment.js          # Deployment testing script

Key Benefits

1. Performance

  • Global CDN: Static assets served from Cloudflare's global network
  • Edge Computing: API functions run at the edge for low latency
  • Automatic Scaling: Functions scale automatically with traffic

2. Cost

  • Free Tier: Generous free tier for most use cases
  • No Server Management: No need to manage servers or infrastructure
  • Pay-per-use: Only pay for what you use

3. Reliability

  • 99.9% Uptime: Cloudflare's global infrastructure
  • Automatic Failover: Built-in redundancy and failover
  • DDoS Protection: Included DDoS protection

4. Developer Experience

  • Simple Deployment: Single command deployment
  • Preview Deployments: Automatic preview deployments for PRs
  • Built-in Analytics: Traffic and performance analytics

Migration Checklist

  • Convert Express API routes to Cloudflare Functions
  • Replace session auth with JWT tokens
  • Update client-side authentication
  • Migrate from in-memory to KV storage
  • Update build configuration
  • Create deployment configuration
  • Add CORS middleware
  • Create deployment documentation
  • Add testing script

Next Steps

  1. Set up Cloudflare account and install Wrangler CLI
  2. Create KV namespaces for data storage
  3. Configure environment variables in Cloudflare dashboard
  4. Deploy the application using npm run deploy
  5. Test the deployment using npm run test:deployment
  6. Configure custom domain (optional)

Environment Variables Required

  • JWT_SECRET: Secure random string for JWT signing
  • MAILCHIMP_API_KEY: Your Mailchimp API key
  • MAILCHIMP_SERVER_PREFIX: Your Mailchimp server prefix
  • MAILCHIMP_LIST_ID: Your Mailchimp list ID

API Endpoints

All endpoints maintain the same interface as before:

  • GET /api/classes - Get all classes
  • GET /api/classes/:id - Get specific class
  • POST /api/newsletter - Subscribe to newsletter
  • POST /api/contact - Send contact message
  • POST /api/auth/register - User registration
  • POST /api/auth/login - User login
  • GET /api/auth/me - Get current user (requires JWT)
  • GET /api/bookings - Get user bookings (requires JWT)
  • POST /api/bookings - Create booking (requires JWT)

Breaking Changes

  1. Authentication: Users will need to log in again after deployment
  2. Data: All existing data (users, bookings, etc.) will be lost (this is expected for the migration)
  3. Sessions: No more session-based authentication

Support

If you encounter any issues during deployment:

  1. Check the deployment logs in Cloudflare Pages dashboard
  2. Verify environment variables are set correctly
  3. Ensure KV namespaces are created and configured
  4. Run the test script to verify functionality
  5. Check the DEPLOYMENT.md file for detailed instructions