feat(unstable_rsc-vite): add deployment config for Vercel

unstable_rsc-vite/README.md

@@ -52,6 +52,20 @@ Run the production server:
 npm start
 ```
 
+# Deploy to Vercel
+
+Init vercel project
+
+```bash
+npm run vc
+```
+
+Release deployment
+
+```bash
+npm run vc-release
+```
+
 ## Understanding React Server Components
 
 This template includes three entry points:
@@ -68,4 +82,4 @@ This template comes with [Tailwind CSS](https://tailwindcss.com/) already config
 
 ---
 
-Built with ❤️ using React Router. 
+Built with ❤️ using React Router. 

unstable_rsc-vite/package.json

@@ -5,7 +5,9 @@
     "build": "vite build",
     "dev": "cross-env NODE_ENV=development vite",
     "start": "cross-env NODE_ENV=production node server.js",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "vc-init": "vercel",
+    "vc-release": "vercel --prod"
   },
   "dependencies": {
     "@mjackson/node-fetch-server": "0.7.0",

unstable_rsc-vite/server.js

@@ -1,29 +1,54 @@
+/*
+ * Example deployment configuration to serverless environment e.g Vercel
+ *
+ */
+
 import { createRequestListener } from "@mjackson/node-fetch-server";
 import compression from "compression";
 import express from "express";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 
-import build from "./dist/rsc/index.js";
+// Get directory path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
+// Create Express app
 const app = express();
 
+// Dynamic import for the RSC build
+let build;
+try {
+  // Import the built RSC app
+  const buildModule = await import("./dist/rsc/index.js");
+  build = buildModule.default || buildModule;
+} catch (error) {
+  console.error("Failed to load RSC build:", error);
+  throw error;
+}
+
+// Middleware
+app.use(compression());
+
+// Serve static assets with caching
 app.use(
   "/assets",
-  compression(),
-  express.static("dist/client/assets", {
+  express.static(join(__dirname, "./dist/client/assets"), {
     immutable: true,
     maxAge: "1y",
-  })
+  }),
 );
-app.use(compression(), express.static("dist/client"));
 
+// Serve other static files
+app.use(express.static(join(__dirname, "./dist/client")));
+
+// Handle Chrome DevTools route
 app.get("/.well-known/appspecific/com.chrome.devtools.json", (_, res) => {
-  res.status(404);
-  res.end();
+  res.status(404).end();
 });
 
+// Use the RSC request listener for all other routes
 app.use(createRequestListener(build));
 
-const PORT = Number.parseInt(process.env.PORT || "3000");
-app.listen(PORT, () => {
-  console.log(`Server listening on port ${PORT} (http://localhost:${PORT})`);
-});
+// Let's Vercel serve this
+export default app;

unstable_rsc-vite/vercel.json

@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "server.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "/server.js"
+    }
+  ]
+}