chore: add customize server

Author: axiaoan

README.md

@@ -126,9 +126,63 @@ Compiled with `vite-ssr build`, there are three ways to start the server:
 
 3. Customize server
 
-   // TODO
+    `vite-ssr-vue3/server` export a function `createRender` to allows you create a render function.
+    <details>
+    <summary>Express example</summary>
 
-In the above three ways, we need to strongly depend on the server, although we can use `ssr.noExternal` to package dependencies, but the server cannot be packaged in, you must install server package `npm install express`
+    ```js
+    // ./src/express.js
+    // @ts-check
+    const path = require('path')
+    const express = require('express')
+    const { createRender } = require('vite-ssr-vue3/server')
+
+    async function createServer() {
+      const out = path.join(__dirname, '../dist')
+      const resolve = p => path.resolve(out, p)
+      const app = express()
+      app.use(express.static(resolve('./client'), {
+        index: false,
+        maxAge: '1y',
+      }))
+
+      const render = await createRender({ isProd: true, root: __dirname, outDir: '../dist' })
+      const { createApp } = require(resolve('./server/main.cjs'))
+
+      app.use('*', async(req, res) => {
+        try {
+          const url = req.originalUrl
+
+          if (req.method !== 'GET' || url === '/sw.js' || url === '/favicon.ico')
+            return
+
+          const context = await createApp(false)
+          let html = await render(url, { context })
+
+          html += '\n<!-- From customize server -->'
+
+          res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+        }
+        catch (error) {
+          -console.error(error)
+          res.status(500).end(error.stack)
+        }
+      })
+
+      return { server: app }
+    }
+
+    createServer().then(({ server }) =>
+      server.listen(3000, () => {
+        // eslint-disable-next-line no-console
+        console.info('http://localhost:3000')
+      }),
+    )
+    ```
+
+    </details>
+
+I three ways, we need to strongly depend on the server, although we can use `ssr.noExternal` to package dependencies, but the server cannot be packaged in, you must install server package `npm install express`
 
 we can modify the server building entry file to avoid this, create a new file to wrapper your server instance(*`vite-ssr` will not works*), configure `ssr.noExternal: /./` to package all dependencies. if you want to runing anywhere, this is recommended.
 

examples/README.md

@@ -14,6 +14,7 @@ pnpm basic:dev
 pnpm basic:build
 pnpm basic:serve
 pnpm basic:serve:bin
+pnpm basic:serve:custom
 
 pnpm basic:build:noexternal
 pnpm basic:preview
@@ -23,6 +24,7 @@ pnpm vl-naive:dev
 pnpm vl-naive:build
 pnpm vl-naive:serve
 pnpm vl-naive:serve:bin
+pnpm vl-naive:serve:custom
 
 pnpm vl-naive:build:noexternal
 pnpm vl-naive:preview

examples/basic/package.json

@@ -7,6 +7,7 @@
     "build": "vite-ssr build",
     "serve": "vite-ssr --mode production",
     "serve:bin": "node ./bin/www",
+    "serve:custom": "node ./src/express",
     "build:noexternal": "vite-ssr build --config ./vite.config.noexternal.ts",
     "preview": "node ./dist/server/server.cjs"
   },

examples/basic/src/express.js

@@ -0,0 +1,46 @@
+// @ts-check
+const path = require('path')
+const express = require('express')
+const { createRender } = require('vite-ssr-vue3/server')
+
+async function createServer() {
+  const out = path.join(__dirname, '../dist')
+  const resolve = p => path.resolve(out, p)
+  const app = express()
+  app.use(express.static(resolve('./client'), {
+    index: false,
+    maxAge: '1y',
+  }))
+
+  const render = await createRender({ isProd: true, root: __dirname, outDir: '../dist' })
+  const { createApp } = require(resolve('./server/main.cjs'))
+
+  app.use('*', async(req, res) => {
+    try {
+      const url = req.originalUrl
+
+      if (req.method !== 'GET' || url === '/sw.js' || url === '/favicon.ico')
+        return
+
+      const context = await createApp(false)
+      let html = await render(url, { context })
+
+      html += '\n<!-- From customize server -->'
+
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+    }
+    catch (error) {
+      console.error(error)
+      res.status(500).end(error.stack)
+    }
+  })
+
+  return { server: app }
+}
+
+createServer().then(({ server }) =>
+  server.listen(3000, () => {
+    // eslint-disable-next-line no-console
+    console.info('http://localhost:3000')
+  }),
+)

examples/vitesse-lite-naive-ui/package.json

@@ -12,7 +12,8 @@
     "dev": "vite-ssr --port 3333",
     "build": "vite-ssr build",
     "serve": "vite-ssr --mode production",
-    "serve:bin": "node ./bin/www.js",
+    "serve:bin": "node ./bin/www",
+    "serve:custom": "node ./src/express",
     "build:noexternal": "vite-ssr build --config ./vite.config.noexternal.ts",
     "preview": "node ./dist/server/server.cjs",
     "lint": "eslint .",

examples/vitesse-lite-naive-ui/src/express.js

@@ -0,0 +1,46 @@
+// @ts-check
+const path = require('path')
+const express = require('express')
+const { createRender } = require('vite-ssr-vue3/server')
+
+async function createServer() {
+  const out = path.join(__dirname, '../dist')
+  const resolve = p => path.resolve(out, p)
+  const app = express()
+  app.use(express.static(resolve('./client'), {
+    index: false,
+    maxAge: '1y',
+  }))
+
+  const render = await createRender({ isProd: true, root: __dirname, outDir: '../dist' })
+  const { createApp } = require(resolve('./server/main.cjs'))
+
+  app.use('*', async(req, res) => {
+    try {
+      const url = req.originalUrl
+
+      if (req.method !== 'GET' || url === '/sw.js' || url === '/favicon.ico')
+        return
+
+      const context = await createApp(false)
+      let html = await render(url, { context })
+
+      html += '\n<!-- From customize server -->'
+
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+    }
+    catch (error) {
+      console.error(error)
+      res.status(500).end(error.stack)
+    }
+  })
+
+  return { server: app }
+}
+
+createServer().then(({ server }) =>
+  server.listen(3000, () => {
+    // eslint-disable-next-line no-console
+    console.info('http://localhost:3000')
+  }),
+)

package.json

@@ -47,11 +47,14 @@
     "basic:build": "pnpm build & pnpm -F basic build",
     "basic:serve": "pnpm basic:build & pnpm -F basic serve",
     "basic:serve:bin": "pnpm basic:build & pnpm -F basic serve:bin",
+    "basic:serve:custom": "pnpm basic:build & pnpm -F basic serve:custom",
     "basic:build:noexternal": "pnpm build & pnpm -F basic build:noexternal",
     "basic:preview": "pnpm basic:build:noexternal & pnpm -F basic preview",
     "vl-naive:dev": "pnpm dev \"pnpm -F vitesse-lite-naive-ui dev\"",
     "vl-naive:build": "pnpm build & pnpm -F vitesse-lite-naive-ui build",
     "vl-naive:serve": "pnpm vl-naive:build & pnpm -F vitesse-lite-naive-ui serve",
+    "vl-naive:serve:bin": "pnpm vl-naive:build & pnpm -F vitesse-lite-naive-ui serve:bin",
+    "vl-naive:serve:custom": "pnpm vl-naive:build & pnpm -F vitesse-lite-naive-ui serve:custom",
     "vl-naive:build:noexternal": "pnpm build & pnpm -F vitesse-lite-naive-ui build:noexternal",
     "vl-naive:preview": "pnpm vl-naive:build:noexternal & pnpm -F vitesse-lite-naive-ui preview",
     "lint": "eslint .",