rondevu-demo/DEPLOYMENT.md

Deploying Rondevu Demo to Cloudflare Pages

This guide covers deploying the Rondevu demo to Cloudflare Pages.

Prerequisites

• Cloudflare account (free tier works)
• Node.js 18+ installed locally
• Git repository (for automatic deployments)

Option 1: Deploy via Git Integration (Recommended)

This is the easiest method with automatic deployments on every push.

Step 1: Push to Git

If you haven't already, initialize a git repository:

cd demo
git init
git add .
git commit -m "Initial commit: Rondevu demo"
git remote add origin https://github.com/YOUR_USERNAME/rondevu-demo.git
git push -u origin main

Step 2: Connect to Cloudflare Pages

1. Go to Cloudflare Dashboard
2. Navigate to Pages in the sidebar
3. Click Create a project
4. Click Connect to Git
5. Authorize Cloudflare to access your GitHub/GitLab account
6. Select your rondevu-demo repository

Step 3: Configure Build Settings

Use these settings:

• Project name: rondevu-demo (or your preferred name)
• Production branch: main
• Framework preset: Vite
• Build command: npm run build
• Build output directory: dist
• Root directory: / (or leave empty)
• Node version: 18 (or higher)

Step 4: Deploy

1. Click Save and Deploy
2. Cloudflare will build and deploy your site
3. You'll get a URL like: https://rondevu-demo.pages.dev

Automatic Deployments

Every push to main will trigger a new deployment automatically!

---

Option 2: Deploy via Wrangler CLI

Deploy directly from your local machine using Wrangler.

Step 1: Install Wrangler

npm install -g wrangler

Or use without installing:

npx wrangler

Step 2: Login to Cloudflare

wrangler login

This will open your browser to authenticate.

Step 3: Build Your Project

npm run build

This creates the dist/ directory with your static files.

Step 4: Deploy to Cloudflare Pages

wrangler pages deploy dist --project-name=rondevu-demo

Or if you prefer, use the simpler command:

npx wrangler pages deploy dist

Wrangler will:

• Create the Pages project if it doesn't exist
• Upload all files from dist/
• Deploy to production

Step 5: Access Your Site

After deployment, you'll see output like:

✨ Deployment complete! Take a peek over at https://rondevu-demo.pages.dev

---

Option 3: Deploy via Dashboard Upload

For quick testing without Git or CLI.

Step 1: Build Locally

npm run build

Step 2: Create a ZIP

cd dist
zip -r ../demo.zip .
cd ..

Step 3: Upload to Cloudflare

1. Go to Cloudflare Pages
2. Click Create a project
3. Click Direct Upload
4. Drag and drop your demo.zip file
5. Wait for deployment

---

Custom Domain (Optional)

Add a Custom Domain

1. Go to your Pages project in the Cloudflare dashboard
2. Click Custom domains
3. Click Set up a custom domain
4. Enter your domain (e.g., demo.rondevu.dev)
5. Follow the DNS instructions
6. Cloudflare will automatically provision an SSL certificate

---

Environment Variables

The demo doesn't require any environment variables since the server URL is hardcoded. However, if you want to make it configurable:

Step 1: Update vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'import.meta.env.VITE_RONDEVU_URL': JSON.stringify(
      process.env.VITE_RONDEVU_URL || 'https://rondevu.xtrdev.workers.dev'
    )
  },
  // ... rest of config
});

Step 2: Update src/main.js

const client = new RondevuClient({
  baseUrl: import.meta.env.VITE_RONDEVU_URL || 'https://rondevu.xtrdev.workers.dev'
});

Step 3: Set Environment Variables in Cloudflare

In your Pages project settings:

1. Go to Settings → Environment variables
2. Add: VITE_RONDEVU_URL = https://your-server.workers.dev
3. Redeploy

---

Troubleshooting

Build Fails

Issue: Build command fails with module errors

Solution: Ensure package.json and package-lock.json are committed to your repository.

Wrong Node Version

Issue: Build uses wrong Node.js version

Solution: Add .node-version file (already created) or set in Pages settings.

404 Errors

Issue: Page shows 404 when deployed

Solution: Ensure build output directory is set to dist in Pages settings.

CORS Errors

Issue: API requests fail with CORS errors

Solution: Ensure your Rondevu server has CORS properly configured (already fixed in latest version).

---

Updating Your Deployment

Git Integration Method

git add .
git commit -m "Update demo"
git push

Cloudflare Pages will automatically deploy the update.

Wrangler CLI Method

npm run build
wrangler pages deploy dist --project-name=rondevu-demo

---

Monitoring and Analytics

Cloudflare Pages provides:

• Analytics: View page views and requests
• Real-time logs: Monitor deployments
• Build history: View all deployments and rollback if needed

Access these in your Pages project dashboard.

---

Cost

Cloudflare Pages is free for:

• Unlimited static requests
• Unlimited bandwidth
• 500 builds per month
• 1 concurrent build

Perfect for this demo! 🎉

---

Advanced: Branch Previews

Cloudflare automatically creates preview deployments for all branches:

1. Create a new branch: git checkout -b new-feature
2. Make changes and push: git push origin new-feature
3. Cloudflare creates a preview URL: https://new-feature.rondevu-demo.pages.dev
4. Test your changes before merging to main

---

Next Steps

After deploying:

1. Test the demo at your Pages URL
2. Share the link with others to test P2P connections
3. Add a custom domain for a professional look
4. Monitor usage in the Cloudflare dashboard

Happy deploying! 🚀