diff --git a/unstable_rsc-vite/README.md b/unstable_rsc-vite/README.md index 457b34b..9b7bbd5 100644 --- a/unstable_rsc-vite/README.md +++ b/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. \ No newline at end of file +Built with ❤️ using React Router. diff --git a/unstable_rsc-vite/package.json b/unstable_rsc-vite/package.json index f5f74f1..0473edb 100644 --- a/unstable_rsc-vite/package.json +++ b/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", diff --git a/unstable_rsc-vite/server.js b/unstable_rsc-vite/server.js index 85e17aa..d02997b 100644 --- a/unstable_rsc-vite/server.js +++ b/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; diff --git a/unstable_rsc-vite/vercel.json b/unstable_rsc-vite/vercel.json new file mode 100644 index 0000000..1def834 --- /dev/null +++ b/unstable_rsc-vite/vercel.json @@ -0,0 +1,15 @@ +{ + "version": 2, + "builds": [ + { + "src": "server.js", + "use": "@vercel/node" + } + ], + "routes": [ + { + "src": "/(.*)", + "dest": "/server.js" + } + ] +}