vercel

examples/express-react-vercel/.gitignore

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

examples/express-react-vercel/api/index.js

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

examples/express-react-vercel/package.json

@@ -0,0 +1,19 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "prod": "cross-env 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.6",
+    "vike-react": "^0.4.18",
+    "vite": "^5.3.5",
+    "cross-env": "^7.0.3"
+  },
+  "type": "module"
+}

examples/express-react-vercel/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-vercel/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-vercel/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-vercel/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-vercel/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-vercel/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-vercel/readme.md

@@ -0,0 +1,10 @@
+Minimal example of using `vike-node` and `vike-react`.
+
+```bash
+git clone [email protected]:vikejs/vike-node
+cd vike-node/examples/express-react-vercel/
+npm install
+npm run dev
+```
+
+https://vercel.com/new/clone?repository-url=https://github.com/vikejs/vike-node/tree/main/examples/express-react-vercel&project-name=express-react&repository-name=express-react

examples/express-react-vercel/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-vercel/vercel.json

@@ -0,0 +1,9 @@
+{
+  "outputDirectory": "dist/client",
+  "rewrites": [
+    {
+      "source": "/((?!assets/).*)",
+      "destination": "/api"
+    }
+  ]
+}

examples/express-react-vercel/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')]
+}