example

examples/express-react/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/express-react/package.json

@@ -0,0 +1,18 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "prod": "NODE_ENV=production node dist/server/index.mjs"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "express": "^4.19.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vike": "^0.4.181",
+    "vike-node": "^0.1.0",
+    "vike-react": "^0.4.18",
+    "vite": "^5.3.5"
+  },
+  "type": "module"
+}

examples/express-react/pages/+config.js

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

examples/express-react/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/express-react/pages/Layout.jsx

@@ -0,0 +1,67 @@
+export { Layout }
+
+import React from 'react'
+import './Layout.css'
+
+function Layout({ children }) {
+  return (
+    <PageLayout>
+      <Sidebar>
+        <a className="navitem" href="/">
+          Home
+        </a>
+        <a className="navitem" href="/about">
+          About
+        </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/express-react/pages/about/+Page.jsx

@@ -0,0 +1,12 @@
+export default Page
+
+import React from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>Example of using Vike.</p>
+    </>
+  )
+}

examples/express-react/pages/index/+Page.jsx

@@ -0,0 +1,19 @@
+export default Page
+
+import React from 'react'
+import { Counter } from './Counter'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive. <Counter />
+        </li>
+      </ul>
+    </>
+  )
+}

examples/express-react/pages/index/Counter.jsx

@@ -0,0 +1,12 @@
+export { Counter }
+
+import React, { useState } from 'react'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}

examples/express-react/readme.md

@@ -0,0 +1,8 @@
+Minimal example of using `vike-node` and `vike-react`.
+
+```bash
+git clone [email protected]:vikejs/vike-node
+cd vike-node/examples/vike-react/
+npm install
+npm run dev
+```

examples/express-react/server/index.js

@@ -0,0 +1,11 @@
+import express from 'express'
+import vike from 'vike-node/connect'
+
+startServer()
+
+function startServer() {
+  const app = express()
+  app.use(vike())
+  const port = process.env.PORT || 3000
+  app.listen(port, () => console.log(`Server running at http://localhost:${port}`))
+}

examples/express-react/vite.config.js

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import vike from 'vike/plugin'
+import vikeNode from 'vike-node/plugin'
+
+export default {
+  plugins: [react(), vike(), vikeNode('server/index.js')]
+}

package.json

@@ -21,8 +21,8 @@
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
     "@brillout/test-e2e": "^0.5.33",
-    "@brillout/test-types": "^0.1.13",
-    "playwright": "^1.45.0",
+    "@brillout/test-types": "^0.1.15",
+    "playwright": "^1.45.3",
     "prettier": "^3.3.3"
   },
   "pnpm": {

packages/vike-node/package.json

@@ -16,24 +16,24 @@
     "release:commit": "release-me commit"
   },
   "dependencies": {
-    "@brillout/picocolors": "^1.0.10",
+    "@brillout/picocolors": "^1.0.14",
     "@nitedani/shrink-ray-current": "^4.2.0",
-    "@vercel/nft": "^0.26.4",
-    "esbuild": "^0.19.0",
-    "sirv": "^2.0.0"
+    "@vercel/nft": "^0.26.5",
+    "esbuild": "^0.19.12",
+    "sirv": "^2.0.4"
   },
   "peerDependencies": {
     "vike": "^0.4.181",
     "vite": "^5.0.10"
   },
   "devDependencies": {
     "@brillout/release-me": "^0.4.0",
-    "@types/node": "^20.11.19",
-    "fastify": "^4.26.1",
+    "@types/node": "^20.14.12",
+    "fastify": "^4.28.1",
     "hono": "^4.5.1",
     "typescript": "^5.5.4",
-    "vike": "^0.4.162",
-    "vite": "^5.0.10"
+    "vike": "^0.4.181",
+    "vite": "^5.3.5"
   },
   "typesVersions": {
     "*": {