From d7cba466febd5127e82573f69b1f7b866517a299 Mon Sep 17 00:00:00 2001
From: Rom <git@brillout.com>
Date: Mon, 23 May 2022 08:37:59 +0200
Subject: [PATCH] feat: spa option, `preview` and `dev` for MPA and SSR apps
 (#8217)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 docs/config/index.md                   |  7 +++++++
 docs/guide/ssr.md                      | 11 +++++++++++
 packages/vite/src/node/config.ts       | 10 +++++++++-
 packages/vite/src/node/preview.ts      |  2 +-
 packages/vite/src/node/server/index.ts |  9 +++++++--
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/docs/config/index.md b/docs/config/index.md
index 49983a551c7453..472a103bb61e95 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -462,6 +462,13 @@ export default defineConfig(({ command, mode }) => {
   `envPrefix` should not be set as `''`, which will expose all your env variables and cause unexpected leaking of of sensitive information. Vite will throw error when detecting `''`.
   :::
 
+### spa
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether your application is a Single Page Application (SPA). Set to `false` for other kinds of apps like MPAs. Learn more in Vite's [SSR guide](/guide/ssr#vite-cli).
+
 ## Server Options
 
 ### server.host
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
index ee078e82eb60a1..4e75453bbac86a 100644
--- a/docs/guide/ssr.md
+++ b/docs/guide/ssr.md
@@ -264,3 +264,14 @@ In some cases like `webworker` runtimes, you might want to bundle your SSR build
 
 - Treat all dependencies as `noExternal`
 - Throw an error if any Node.js built-ins are imported
+
+## Vite CLI
+
+The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps:
+
+1. Add your SSR middleware to the development server with [`configureServer`](/guide/api-plugin#configureserver) and to the preview server with [`configurePreviewServer`](/guide/api-plugin#configurepreviewserver).
+   :::tip Note
+   Use a post hook so that your SSR middleware runs _after_ Vite's middlewares.
+   :::
+
+2. Set `config.spa` to `false`. This switches the development and preview server from SPA mode to SSR/MPA mode.
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 174fa0dd40f3d0..4a9099b1982d62 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -208,6 +208,12 @@ export interface UserConfig {
       'plugins' | 'input' | 'onwarn' | 'preserveEntrySignatures'
     >
   }
+  /**
+   * Whether your application is a Single Page Application (SPA). Set to `false`
+   * for other kinds of apps like MPAs.
+   * @default true
+   */
+  spa?: boolean
 }
 
 export interface ExperimentalOptions {
@@ -274,6 +280,7 @@ export type ResolvedConfig = Readonly<
     /** @internal */
     packageCache: PackageCache
     worker: ResolveWorkerOptions
+    spa: boolean
   }
 >
 
@@ -514,7 +521,8 @@ export async function resolveConfig(
         ...optimizeDeps.esbuildOptions
       }
     },
-    worker: resolvedWorkerOptions
+    worker: resolvedWorkerOptions,
+    spa: config.spa ?? true
   }
 
   // flat config.worker.plugin
diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts
index e66733d5c971b6..a8cb533e35ad19 100644
--- a/packages/vite/src/node/preview.ts
+++ b/packages/vite/src/node/preview.ts
@@ -104,7 +104,7 @@ export async function preview(
     sirv(distDir, {
       etag: true,
       dev: true,
-      single: true
+      single: config.spa
     })
   )
 
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index e59de9f2e50690..a8e16b2b5cf9e5 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -508,8 +508,10 @@ export async function createServer(
   middlewares.use(serveRawFsMiddleware(server))
   middlewares.use(serveStaticMiddleware(root, server))
 
+  const isMiddlewareMode = middlewareMode && middlewareMode !== 'html'
+
   // spa fallback
-  if (!middlewareMode || middlewareMode === 'html') {
+  if (config.spa && !isMiddlewareMode) {
     middlewares.use(spaFallbackMiddleware(root))
   }
 
@@ -518,9 +520,12 @@ export async function createServer(
   // serve custom content instead of index.html.
   postHooks.forEach((fn) => fn && fn())
 
-  if (!middlewareMode || middlewareMode === 'html') {
+  if (config.spa && !isMiddlewareMode) {
     // transform index.html
     middlewares.use(indexHtmlMiddleware(server))
+  }
+
+  if (!isMiddlewareMode) {
     // handle 404s
     // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
     middlewares.use(function vite404Middleware(_, res) {