fix: preserve rsc output for local production

Author: tannerlinsley

package.json

@@ -9,8 +9,9 @@
     "dev": "pnpm run with-env vite dev",
     "with-env": "dotenv -e .env -e .env.local",
     "dev:frontend": "pnpm run with-env vite dev",
-    "build": "vite build && cp src/instrument.server.mjs dist/server",
+    "build": "vite build && node scripts/finalize-build.mjs",
     "start": "vite start",
+    "start:prod": "pnpm run with-env node scripts/run-built-server.mjs",
     "lint": "oxlint --type-aware",
     "format": "oxfmt --write",
     "db:generate": "drizzle-kit generate",

scripts/finalize-build.mjs

@@ -0,0 +1,19 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import url from 'node:url'
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+const distServerDir = path.join(rootDir, 'dist/server')
+const rscTempDir = path.join(rootDir, 'node_modules/.vite-rsc-temp/rsc')
+const rscDistDir = path.join(distServerDir, 'rsc')
+const instrumentSource = path.join(rootDir, 'src/instrument.server.mjs')
+const instrumentDest = path.join(distServerDir, 'instrument.server.mjs')
+
+if (!fs.existsSync(rscTempDir)) {
+  throw new Error(`Missing RSC temp output: ${rscTempDir}`)
+}
+
+fs.rmSync(rscDistDir, { force: true, recursive: true })
+fs.cpSync(rscTempDir, rscDistDir, { recursive: true })
+fs.copyFileSync(instrumentSource, instrumentDest)

scripts/run-built-server.mjs

@@ -0,0 +1,55 @@
+import http from 'node:http'
+import { Buffer } from 'node:buffer'
+import path from 'node:path'
+import url from 'node:url'
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+const serverModuleUrl = url.pathToFileURL(
+  path.join(rootDir, 'dist/server/server.js'),
+).href
+
+const mod = await import(serverModuleUrl)
+const app = mod.default || mod.app || mod
+const port = Number(process.env.PORT || 3000)
+
+const server = http.createServer(async (req, res) => {
+  try {
+    const requestUrl = new URL(req.url || '/', `http://localhost:${port}`)
+    const chunks = []
+
+    for await (const chunk of req) {
+      chunks.push(chunk)
+    }
+
+    const request = new Request(requestUrl, {
+      method: req.method,
+      headers: req.headers,
+      body:
+        req.method === 'GET' || req.method === 'HEAD'
+          ? undefined
+          : Buffer.concat(chunks),
+    })
+    const response = await app.fetch(request)
+
+    res.statusCode = response.status
+    response.headers.forEach((value, key) => {
+      res.setHeader(key, value)
+    })
+
+    if (!response.body || req.method === 'HEAD') {
+      res.end()
+      return
+    }
+
+    res.end(Buffer.from(await response.arrayBuffer()))
+  } catch (error) {
+    console.error(error)
+    res.statusCode = 500
+    res.end(String(error?.stack || error))
+  }
+})
+
+server.listen(port, () => {
+  console.log(`Production server listening on http://localhost:${port}`)
+})

src/components/ThemeProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createClientOnlyFn, createIsomorphicFn } from '@tanstack/react-start'
 import * as React from 'react'
 import { createContext, ReactNode, useEffect, useState } from 'react'

src/components/ToastProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import * as Toast from '@radix-ui/react-toast'
 

src/contexts/LoginModalContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { LoginModal } from '~/components/LoginModal'

src/contexts/SearchContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 interface SearchContextType {