test: simplify playground/ssr-react (#397)

Author: hi-ogawa

playground/ssr-react/__tests__/serve.ts

@@ -1,17 +1,15 @@
 import fetch from 'node-fetch'
 import { expect, test } from 'vitest'
-import { port } from './serve'
 import {
   browserLogs,
   editFile,
   isBuild,
   page,
   untilBrowserLogAfter,
   untilUpdated,
+  viteTestUrl as url,
 } from '~utils'
 
-const url = `http://localhost:${port}`
-
 test('/env', async () => {
   await untilBrowserLogAfter(() => page.goto(url + '/env'), 'hydrated')
 

playground/ssr-react/__tests__/ssr-react.spec.ts

@@ -3,22 +3,15 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "node server",
-    "build": "npm run build:client && npm run build:server",
-    "build:client": "vite build --outDir dist/client",
-    "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
-    "generate": "vite build --outDir dist/static && npm run build:server && node prerender",
-    "serve": "NODE_ENV=production node server",
-    "debug": "node --inspect-brk server"
+    "dev": "vite dev",
+    "build": "vite build --app",
+    "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "workspace:*",
-    "compression": "^1.7.5",
-    "express": "^4.21.1",
-    "serve-static": "^1.16.2"
+    "@vitejs/plugin-react": "workspace:*"
   }
 }

playground/ssr-react/package.json

@@ -1,10 +1,78 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'
+
 export default defineConfig({
-  server: { port: 8907 /* Should be unique */ },
-  plugins: [react()],
+  appType: 'custom',
   build: {
     minify: false,
   },
+  environments: {
+    client: {
+      build: {
+        outDir: 'dist/client',
+      },
+    },
+    ssr: {
+      build: {
+        outDir: 'dist/server',
+        rollupOptions: {
+          input: 'src/entry-server.jsx',
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    {
+      name: 'ssr-middleware',
+      configureServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            const url = req.originalUrl ?? '/'
+            try {
+              const { render } = await server.ssrLoadModule(
+                '/src/entry-server.jsx',
+              )
+              const appHtml = render(url)
+              const template = await server.transformIndexHtml(
+                url,
+                fs.readFileSync(path.resolve('index.html'), 'utf-8'),
+              )
+              const html = template.replace(`<!--app-html-->`, appHtml)
+              res.setHeader('content-type', 'text/html').end(html)
+            } catch (e) {
+              next(e)
+            }
+          })
+        }
+      },
+      async configurePreviewServer(server) {
+        const template = fs.readFileSync(
+          path.resolve('dist/client/index.html'),
+          'utf-8',
+        )
+        const { render } = await import(
+          new URL('./dist/server/entry-server.js', import.meta.url).href
+        )
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            const url = req.originalUrl ?? '/'
+            try {
+              const appHtml = render(url)
+              const html = template.replace(`<!--app-html-->`, appHtml)
+              res.setHeader('content-type', 'text/html').end(html)
+            } catch (e) {
+              next(e)
+            }
+          })
+        }
+      },
+    },
+  ],
+  // tell vitestSetup.ts to use buildApp API
+  builder: {},
 })

playground/ssr-react/prerender.js

@@ -14,6 +14,7 @@ import type {
 } from 'vite'
 import {
   build,
+  createBuilder,
   createServer,
   loadConfigFromFile,
   mergeConfig,
@@ -253,6 +254,7 @@ export async function startDefaultServe(): Promise<void> {
     viteTestUrl = `http://localhost:${server.config.server.port}${
       devBase === '/' ? '' : devBase
     }`
+    setViteUrl(viteTestUrl)
     await page.goto(viteTestUrl)
   } else {
     process.env.VITE_INLINE = 'inline-build'
@@ -267,12 +269,17 @@ export async function startDefaultServe(): Promise<void> {
     const testConfig = mergeConfig(options, config || {})
     viteConfig = testConfig
     process.chdir(rootDir)
-    const rollupOutput = await build(testConfig)
-    const isWatch = !!resolvedConfig!.build.watch
-    // in build watch,call startStaticServer after the build is complete
-    if (isWatch) {
-      watcher = rollupOutput as Rollup.RollupWatcher
-      await notifyRebuildComplete(watcher)
+    if (testConfig.builder) {
+      const builder = await createBuilder(testConfig)
+      await builder.buildApp()
+    } else {
+      const rollupOutput = await build(testConfig)
+      const isWatch = !!resolvedConfig!.build.watch
+      // in build watch,call startStaticServer after the build is complete
+      if (isWatch) {
+        watcher = rollupOutput as Rollup.RollupWatcher
+        await notifyRebuildComplete(watcher)
+      }
     }
     // @ts-ignore
     if (config && config.__test__) {
@@ -284,6 +291,8 @@ export async function startDefaultServe(): Promise<void> {
     // prevent preview change NODE_ENV
     process.env.NODE_ENV = _nodeEnv
     viteTestUrl = previewServer.resolvedUrls.local[0]
+    viteTestUrl = viteTestUrl.replace(/\/+$/, '')
+    setViteUrl(viteTestUrl)
     await page.goto(viteTestUrl)
   }
 }