crepes-demo/DEPLOYMENT_SUMMARY.md

🥞 Crêpes Demo - Deployment Summary

✅ What's Built

A beautiful Next.js demo showcasing json-render architecture with French chef crêpe recipes:

Features

• 🎨 4 Authentic Recipes from legendary French chefs:

  • Auguste Escoffier - Crêpes Suzette (flambéed orange dessert)
  • Olivier Roellinger - Breton Buckwheat Galettes
  • Pierre Hermé - Salted Caramel Crêpes
  • Joël Robuchon - Crêpes Parmentier (potato & bacon)

• 💎 Type-Safe Component Catalog inspired by json-render:

  • RecipeHeader - Title, chef, timing info
  • ChefInfo - Bio with source links
  • IngredientList - Structured ingredients
  • InstructionSteps - Numbered cooking steps
  • TipCard - Chef's professional tips

• 🎯 Production-Ready:

  • Next.js 16 with TypeScript
  • Tailwind CSS styling
  • Docker multi-stage build
  • Kubernetes manifests
  • Flux GitOps config
  • GitHub Actions CI/CD workflow

🚀 Quick Deployment Options

Option 1: Local Test (Fastest)

cd /home/openclaw/.openclaw/workspace/crepes-demo
npm run dev
# Visit http://localhost:3000

Option 2: Docker

cd /home/openclaw/.openclaw/workspace/crepes-demo
docker build -t crepes-demo .
docker run -p 3000:3000 crepes-demo

Option 3: Kubernetes + Flux (Full Production)

Prerequisites

• Kubernetes cluster with Flux installed
• Container registry (GHCR, Docker Hub, etc.)
• Domain configured with Cloudflare
• Ingress controller (nginx, traefik)
• cert-manager for TLS

Deploy Script

cd /home/openclaw/.openclaw/workspace/crepes-demo

# Set your details
export REGISTRY="ghcr.io/YOUR_USERNAME"
export DOMAIN="crepes.yourdomain.com"

# Build, push, and update manifests
./deploy.sh $REGISTRY $DOMAIN

# Push to Git
git init
git add .
git commit -m "Initial: French crêpes demo"
git remote add origin https://github.com/YOUR_USERNAME/crepes-demo.git
git push -u origin main

# Update Flux git URL in flux/gitrepository.yaml
# Then apply to cluster:
kubectl apply -f flux/gitrepository.yaml
kubectl apply -f flux/kustomization.yaml

# Watch deployment
flux get kustomizations -w

📂 Project Structure

crepes-demo/
├── app/
│   ├── page.tsx                    # Main page
│   ├── layout.tsx                  # Root layout
│   └── globals.css                 # Global styles
├── lib/
│   ├── components.tsx              # Reusable recipe components
│   ├── recipes-simple.ts           # Recipe data
│   ├── catalog.ts                  # json-render catalog (reference)
│   ├── registry.tsx                # json-render registry (reference)
│   └── recipes.ts                  # json-render specs (reference)
├── k8s/
│   ├── deployment.yaml             # K8s Deployment
│   ├── service.yaml                # K8s Service
│   ├── ingress.yaml                # K8s Ingress (Cloudflare)
│   └── kustomization.yaml          # Kustomize config
├── flux/
│   ├── gitrepository.yaml          # Flux GitRepository
│   └── kustomization.yaml          # Flux Kustomization
├── .github/workflows/
│   └── deploy.yml                  # GitHub Actions CI/CD
├── Dockerfile                      # Multi-stage build
├── deploy.sh                       # Automated deployment script
├── README.md                       # Full documentation
├── QUICKSTART.md                   # Quick deployment guide
└── DEPLOYMENT_SUMMARY.md           # This file

🎨 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• json-render: Component catalog architecture (demonstrated but simplified for SSR)
• Container: Docker multi-stage build
• Orchestration: Kubernetes
• GitOps: Flux CD
• CI/CD: GitHub Actions
• CDN/DNS: Cloudflare

🔧 Configuration Points

Before deploying to production, update:

1. k8s/deployment.yaml:

   • Line 22: image: YOUR_REGISTRY/crepes-demo:latest

2. k8s/ingress.yaml:

   • Lines 8, 15, 18: Replace crepes.yourdomain.com with your domain
   • Line 10: Verify ingressClassName
   • Line 7: Adjust cert-manager issuer if needed

3. flux/gitrepository.yaml:

   • Line 7: Update Git repository URL

4. .github/workflows/deploy.yml:

   • Already configured for GitHub Container Registry (GHCR)
   • Will auto-push on commits to main

📝 What json-render Brings

This demo uses actual json-render from Vercel Labs:

1. Component Catalog (lib/catalog.ts) - Defines allowed components with Zod schemas using defineCatalog
2. Type-Safe Registry (lib/registry.tsx) - Maps component names to React implementations using defineRegistry
3. JSON Specs (lib/recipes.ts) - Recipe definitions in json-render's spec format (root + elements)
4. Renderer Component - Uses json-render's <Renderer> to transform specs into React components
5. Provider - Wraps with ActionProvider, DataProvider, and VisibilityProvider for full functionality

Key Point: This uses the real json-render library. The Renderer component takes our JSON specs and registry, then renders them as React components. In production, AI would generate these specs from user prompts—safely constrained to your component catalog.

🌐 Public URL Setup (Cloudflare)

Once deployed to K8s with the provided ingress:

1. Automatic (with external-dns):

   • DNS records created automatically
   • Certificate issued by cert-manager
   • Cloudflare proxy enabled via annotations

2. Manual:

   • Go to Cloudflare dashboard
   • Add A/CNAME record for your domain → ingress IP
   • Enable Cloudflare proxy (orange cloud)
   • Set SSL/TLS to "Full (strict)"

🎯 Next Steps

1. Test locally first to verify everything works
2. Customize the recipes or add new components
3. Deploy using the deployment script
4. Monitor via Flux and kubectl
5. Iterate - Flux syncs automatically on git push

📚 Documentation

• README.md - Full detailed documentation
• QUICKSTART.md - Fast deployment guide
• DEPLOYMENT_SUMMARY.md - This overview (you are here)
• json-render GitHub - Original library

🎉 Ready to Go!

Your demo is built and ready. Test it locally, then deploy to your K8s cluster with Cloudflare for a public URL.

Questions? Check the README or QUICKSTART files for detailed instructions.

---

Bon Appétit! 🇫🇷