update

examples/hono-react-cf-pages/.gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+/dist/
+.vercel

examples/hono-react-cf-pages/package.json

@@ -0,0 +1,26 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "prod": "cross-env NODE_ENV=production node dist/server/index.mjs",
+    "preview": "vite build && wrangler pages dev",
+    "deploy": "vite build && wrangler pages deploy"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.12.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "cross-env": "^7.0.3",
+    "hono": "^4.5.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vike": "^0.4.181",
+    "vike-node": "0.1.9-commit-022aa1c",
+    "vike-react": "^0.4.18",
+    "vite": "^5.3.5"
+  },
+  "type": "module",
+  "devDependencies": {
+    "vike-cloudflare": "^0.0.5",
+    "wrangler": "^3.70.0"
+  }
+}

examples/hono-react-cf-pages/pages/+Layout.jsx

@@ -0,0 +1,70 @@
+export { Layout }
+
+import React from 'react'
+import './Layout.css'
+
+function Layout({ children }) {
+  return (
+    <PageLayout>
+      <Sidebar>
+        <a className="navitem" href="/">
+          Pre-rendered
+        </a>
+        <a className="navitem" href="/dynamic">
+          Dynamic
+        </a>
+        <a className="navitem" href="/static">
+          Static
+        </a>
+      </Sidebar>
+      <Content>{children}</Content>
+    </PageLayout>
+  )
+}
+
+function PageLayout({ children }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Sidebar({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingTop: 42,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        lineHeight: '1.8em'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingBottom: 50,
+        borderLeft: '2px solid #eee',
+        minHeight: '100vh'
+      }}
+    >
+      {children}
+    </div>
+  )
+}

examples/hono-react-cf-pages/pages/+config.js

@@ -0,0 +1,9 @@
+export { config }
+
+import vikeReact from 'vike-react/config'
+
+const config = {
+  // https://vike.dev/extends
+  extends: vikeReact,
+  prerender: false
+}

examples/hono-react-cf-pages/pages/Layout.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+
+.navitem {
+  padding: 3px;
+}

examples/hono-react-cf-pages/pages/dynamic/+Page.jsx

@@ -0,0 +1,27 @@
+export default Page
+
+import React, { useState } from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Dynamic</li>
+        <li>No static html generated</li>
+        <li>Interactive</li>
+      </ul>
+      <Counter />
+    </>
+  )
+}
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

examples/hono-react-cf-pages/pages/index/+Page.jsx

@@ -0,0 +1,27 @@
+export default Page
+
+import React, { useState } from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Pre-rendered</li>
+        <li>Static html generated</li>
+        <li>Interactive</li>
+      </ul>
+      <Counter />
+    </>
+  )
+}
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

examples/hono-react-cf-pages/pages/index/+config.js

@@ -0,0 +1,3 @@
+export default {
+  prerender: true
+}

examples/hono-react-cf-pages/pages/static/+Page.jsx

@@ -0,0 +1,27 @@
+export default Page
+
+import React, { useState } from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Pre-rendered</li>
+        <li>Static html generated</li>
+        <li>Not interactive (no javascript is downloaded for this page)</li>
+      </ul>
+      <Counter />
+    </>
+  )
+}
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

examples/hono-react-cf-pages/pages/static/+config.js

@@ -0,0 +1,10 @@
+// https://vike.dev/render-modes#html-only
+
+export default {
+  prerender: true,
+  meta: {
+    Page: {
+      env: { server: true, client: false }
+    }
+  }
+}

examples/hono-react-cf-pages/readme.md

@@ -0,0 +1,14 @@
+Minimal example of using `vike-node` and `vike-react`.
+
+```bash
+git clone [email protected]:vikejs/vike-node
+cd vike-node/examples/hono-react-vercel-edge/
+npm install
+npm run dev
+```
+
+## One-Click Deploy
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vikejs/vike-node/tree/vercel-edge/examples/hono-react-vercel-edge&project-name=hono-react&repository-name=hono-react)

examples/hono-react-cf-pages/server/hono-entry.js

@@ -0,0 +1,6 @@
+import { Hono } from 'hono'
+import vike from 'vike-node/hono'
+
+const app = new Hono()
+app.use(vike())
+export default app

examples/hono-react-cf-pages/server/node-entry.js

@@ -0,0 +1,17 @@
+import { serve } from '@hono/node-server'
+import app from './hono-entry.js'
+
+startServer()
+
+function startServer() {
+  const port = process.env.PORT || 3000
+  serve(
+    {
+      fetch: app.fetch,
+      port: +port,
+      // Needed for Bun
+      overrideGlobalObjects: false
+    },
+    () => console.log(`Server running at http://localhost:${port}`)
+  )
+}

examples/hono-react-cf-pages/vite.config.js

@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react'
+import vike from 'vike/plugin'
+import vikeNode from 'vike-node/plugin'
+import { pages } from 'vike-cloudflare'
+
+export default {
+  plugins: [
+    react(),
+    vike({ prerender: true }),
+    vikeNode({ entry: 'server/node-entry.js', external: ['vike-node/__handler'] }),
+    pages({
+      server: {
+        kind: 'hono',
+        entry: 'server/hono-entry.js'
+      }
+    })
+  ]
+}

examples/hono-react-cf-pages/wrangler.toml

@@ -0,0 +1,4 @@
+name = "vike-cloudflare-hono-demo"
+compatibility_date = "2024-06-24"
+pages_build_output_dir = "./dist/cloudflare"
+compatibility_flags = [ "nodejs_compat" ]

examples/hono-react-vercel-edge/.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
 /dist/
+.vercel

examples/hono-react-vercel-edge/api/index.js

@@ -1,4 +1,4 @@
-export const runtime = 'edge'
+export const edge = true
 
 // Import the built server entry from dist, so import.meta.env and other Vite features
 // are available in the server entry (Vite already processed this file)

examples/hono-react-vercel-edge/server/index.js

@@ -1,4 +1,4 @@
-import { serve } from '@hono/node-server'
+// import { serve } from '@hono/node-server'
 import { Hono } from 'hono'
 import vike from 'vike-node/hono'
 
@@ -7,15 +7,15 @@ export default startServer()
 function startServer() {
   const app = new Hono()
   app.use(vike())
-  const port = process.env.PORT || 3000
-  serve(
-    {
-      fetch: app.fetch,
-      port: +port,
-      // Needed for Bun
-      overrideGlobalObjects: false
-    },
-    () => console.log(`Server running at http://localhost:${port}`)
-  )
+  // const port = process.env.PORT || 3000
+  // serve(
+  //   {
+  //     fetch: app.fetch,
+  //     port: +port,
+  //     // Needed for Bun
+  //     overrideGlobalObjects: false
+  //   },
+  //   () => console.log(`Server running at http://localhost:${port}`)
+  // )
   return app.fetch
 }

examples/hono-react-vercel-edge/vite.config.js

@@ -3,5 +3,9 @@ import vike from 'vike/plugin'
 import vikeNode from 'vike-node/plugin'
 
 export default {
-  plugins: [react(), vike({ prerender: true }), vikeNode('server/index.js')]
+  plugins: [
+    react(),
+    vike({ prerender: false }),
+    vikeNode({ entry: 'server/index.js', external: ['vike-node/__handler'] })
+  ]
 }

packages/vike-node/package.json

@@ -11,7 +11,15 @@
     "./hono": "./dist/hono.js",
     "./elysia": "./dist/elysia.js",
     "./plugin": "./dist/plugin/index.js",
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./__handler": {
+      "worker": "./dist/runtime/handler-web-only.js",
+      "workerd": "./dist/runtime/handler-web-only.js",
+      "deno": "./dist/runtime/handler-web-only.js",
+      "browser": "./dist/runtime/handler-web-only.js",
+      "import": "./dist/runtime/handler-web-and-node.js",
+      "types": "./dist/runtime/handler-web-only.d.ts"
+    }
   },
   "scripts": {
     "dev": "tsc --watch",

packages/vike-node/src/plugin/plugins/standalonePlugin.ts

@@ -66,7 +66,7 @@ export function standalonePlugin(): Plugin {
       platform: 'node',
       format: 'esm',
       bundle: true,
-      external: configResolvedVike.server.external,
+      external: configResolvedVike.server.external.filter((id) => id !== 'vike-node/__handler'),
       entryPoints: rollupEntryFilePaths,
       sourcemap: configResolved.build.sourcemap === 'hidden' ? true : configResolved.build.sourcemap,
       outExtension: { '.js': '.mjs' },

packages/vike-node/src/plugin/utils/resolveConfig.ts

@@ -4,7 +4,7 @@ import { unique } from './unique.js'
 
 export { resolveConfig }
 
-export const nativeDependecies = ['sharp', '@prisma/client', '@node-rs/*']
+export const nativeDependecies = ['sharp', '@prisma/client', '@node-rs/*', 'vike-node/*']
 
 function resolveConfig(configVike: ConfigVikeNode): ConfigVikeNodeResolved {
   if (typeof configVike.server === 'object') {

packages/vike-node/src/runtime/frameworks/connect.ts

@@ -1,7 +1,7 @@
 export { vike }
 
 import type { IncomingMessage, ServerResponse } from 'http'
-import { createHandler } from '../handler.js'
+import { createHandler } from '../handler-node-only.js'
 import type { NextFunction, VikeOptions } from '../types.js'
 import { globalStore } from '../globalStore.js'