refactor(www): migrate from Workers to Cloudflare Pages for static deployment

Author: cwandev

.github/workflows/deploy-www.yml

@@ -18,7 +18,7 @@ permissions:
 jobs:
   deploy:
     runs-on: ubuntu-latest
-    name: Publish www (Nuxt SSR) to Cloudflare Workers
+    name: Publish www to Cloudflare Pages
     concurrency:
       group: deploy-www-${{ github.ref }}
       cancel-in-progress: true
@@ -38,10 +38,9 @@ jobs:
           NODE_OPTIONS: --max-old-space-size=6144
         run: pnpm build:www
 
-      - name: Publish to Cloudflare Workers via Wrangler
-        working-directory: apps/www
+      - name: Publish to Cloudflare Pages via Wrangler
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
         run: |
-          npx wrangler@4 deploy --config wrangler.toml
+          pnpm --filter www deploy

apps/www/README.md

@@ -21,14 +21,22 @@ pnpm dev
 
 ## Production
 
-Build the application for production:
+Build a fully static version of the docs (outputs to `.output/public`):
 
 ```bash
 pnpm build
 ```
 
-Locally preview production build:
+Preview the generated site with Cloudflare Pages tooling:
 
 ```bash
+# run after pnpm build
 pnpm preview
 ```
+
+Deploy to Cloudflare Pages (requires `wrangler login` once):
+
+```bash
+# from apps/www
+pnpm run deploy
+```

apps/www/app.config.ts

@@ -31,7 +31,7 @@ export default defineAppConfig({
           target: '_self',
         }, {
           title: 'Examples',
-          to: '/examples',
+          to: '/examples/chatbot',
           description: 'Real-world examples showing how to build applications with AI Elements Vue',
           target: '_self',
         }, {

apps/www/content/3.components/1.chatbot/conversation.md

@@ -184,7 +184,7 @@ export { default as ConversationScrollButton } from './ConversationScrollButton.
 
 ## Usage with AI SDK
 
-Build a simple conversational UI with `Conversation` and [`PromptInput`](/components/prompt-input):
+Build a simple conversational UI with `Conversation` and [`PromptInput`](/components/chatbot/prompt-input):
 
 Add the following component to your frontend:
 

apps/www/content/3.components/3.vibe-coding/_dir.yml

@@ -1,3 +1,3 @@
 title: Vibe Coding
 icon: lucide:code
-navigation.redirect: /components/vibe-coding/
+navigation.redirect: /components/vibe-coding/artifact

apps/www/nuxt.config.ts

@@ -5,9 +5,17 @@ export default defineNuxtConfig({
 
   plugins: ['~/plugins/ai-elements'],
 
+  experimental: {
+    payloadExtraction: false,
+  },
+
   mdc: {
     highlight: {
       shikiEngine: 'javascript',
+      theme: {
+        default: 'github-light',
+        dark: 'github-dark',
+      },
     },
   },
 
@@ -39,10 +47,14 @@ export default defineNuxtConfig({
     transpile: ['@repo/examples'],
   },
 
-  compatibilityDate: '2024-07-06',
+  compatibilityDate: '2024-09-19',
 
   sourcemap: false,
 
+  routeRules: {
+    '/**': { prerender: true },
+  },
+
   vite: {
     build: {
       sourcemap: false,
@@ -64,12 +76,24 @@ export default defineNuxtConfig({
   },
 
   nitro: {
-    preset: 'cloudflare-module',
-  },
-
-  alias: {
-    // Replace Playwright with a mock to bypass Cloudflare build restrictions.
-    'playwright-core': 'unenv/mock/proxy',
-    'playwright': 'unenv/mock/proxy',
+    preset: 'cloudflare_pages',
+    cloudflare: {
+      deployConfig: false,
+      nodeCompat: true,
+      pages: {
+        routes: {
+          include: ['/*'],
+          exclude: ['/api/_mdc/*'],
+        },
+      },
+    },
+    prerender: {
+      crawlLinks: true,
+      autoSubfolderIndex: false,
+      failOnError: true,
+    },
+    storage: {
+      cache: { driver: 'memory' },
+    },
   },
 })

apps/www/package.json

@@ -4,15 +4,17 @@
   "version": "0.14.2",
   "private": true,
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt generate",
     "dev": "nuxt dev --port 3002",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "wrangler pages dev",
+    "deploy": "wrangler pages deploy --project-name ai-elements-vue",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "@repo/elements": "workspace:*",
     "@repo/examples": "workspace:*",
+    "@vueuse/shared": "^14.1.0",
     "highlight.js": "^11.11.1",
     "nuxt": "3.18.0",
     "shadcn-docs-nuxt": "^1.1.4",
@@ -24,6 +26,8 @@
     "@iconify-json/logos": "^1.2.9",
     "@iconify-json/lucide": "^1.2.73",
     "@iconify-json/simple-icons": "^1.2.54",
-    "tailwindcss-animate": "^1.0.7"
+    "baseline-browser-mapping": "^2.9.2",
+    "tailwindcss-animate": "^1.0.7",
+    "wrangler": "^4.52.1"
   }
 }

apps/www/wrangler.toml

@@ -1,6 +1,3 @@
 name = "ai-elements-vue"
-main = ".output/server/index.mjs"
-compatibility_date = "2024-07-06"
-compatibility_flags = [ "nodejs_compat" ]
-routes = [ "www.ai-elements-vue.com/*" ]
-site = { bucket = ".output/public" }
+compatibility_date = "2024-09-19"
+pages_build_output_dir = "dist"