From cb78c7bab187e4c3a7c37b0177d3154b5081a6b7 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Fri, 3 Jun 2022 00:47:19 +0200 Subject: [PATCH 01/23] feat: appType (spa, mpa, custom), boolean middlewareMode --- docs/config/server-options.md | 20 +++++++++++-------- docs/config/shared-options.md | 14 +++++++++---- docs/guide/ssr.md | 2 -- packages/vite/src/node/config.ts | 23 ++++++++++++++++------ packages/vite/src/node/preview.ts | 2 +- packages/vite/src/node/server/index.ts | 19 ++++++++---------- playground/json/server.js | 3 ++- playground/optimize-missing-deps/server.js | 5 +++-- playground/ssr-deps/server.js | 5 +++-- playground/ssr-html/server.js | 5 +++-- playground/ssr-pug/server.js | 5 +++-- playground/ssr-react/server.js | 5 +++-- playground/ssr-vue/server.js | 5 +++-- 13 files changed, 68 insertions(+), 45 deletions(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index cf59ab27644656..2e3c3948f76f72 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -153,14 +153,17 @@ export default defineConfig({ ## server.middlewareMode -- **Type:** `'ssr' | 'html'` +- **Type:** `boolean` +- **Default:** `false` + +Create Vite server in middleware mode -Create Vite server in middleware mode. (without a HTTP server) +- Use together with: -- `'ssr'` will disable Vite's own HTML serving logic so that you should serve `index.html` manually. -- `'html'` will enable Vite's own HTML serving logic. + - `appType: 'custom'` will disable Vite's own HTML serving logic so that you should serve `index.html` manually. + - `appType: 'mpa'` will enable Vite's own HTML serving logic, except for spa specific middlewares like the SPA fallback. -- **Related:** [SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) +- **Related:** [appType](./shared#apptype),[SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) - **Example:** @@ -173,14 +176,15 @@ async function createServer() { // Create Vite server in middleware mode. const vite = await createViteServer({ - server: { middlewareMode: 'ssr' } + server: { middlewareMode: true }, + appType: 'custom' }) // Use vite's connect instance as middleware app.use(vite.middlewares) app.use('*', async (req, res) => { - // If `middlewareMode` is `'ssr'`, should serve `index.html` here. - // If `middlewareMode` is `'html'`, there is no need to serve `index.html` + // If `appType` is `'custom'`, should serve `index.html` here. + // If `appType` is `'spa'` or `'mpa'`, there is no need to serve `index.html` // because Vite will do that. }) } diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index f44e02d88737dd..89c2c4426a95a0 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -336,9 +336,15 @@ Env variables starts with `envPrefix` will be exposed to your client source code `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 +## appType -- **Type:** `boolean` -- **Default:** `true` +- **Type:** `'spa' | 'mpa' | 'custom'` +- **Default:** `'spa'` + +Whether your application is a Single Page Application (SPA), a Multi Page Application (MPA), or Custom Application (SSR and frameworks with custom HTML handling): + +- `'spa'`: include spa fallback midleware and configure sirv with `single: true` in preview +- `'mpa'`: only include non-spa HTML middlewares +- `'custom'`: don't include HTML midlewares -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). +Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related [`server.middlewareMode`](./server-options#servermiddlewaremode). diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index 4e75453bbac86a..482c4cf532bbbd 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -273,5 +273,3 @@ The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps :::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 d80f5a60583abc..4f6f73c06c38df 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -51,6 +51,13 @@ export interface ConfigEnv { mode: string } +/** + * spa: include spa fallback midleware and configure sirv with `single: true` in preview + * mpa: only include non-spa HTML middlewares + * custom: don't include HTML midlewares + */ +export type AppType = 'spa' | 'mpa' | 'custom' + export type UserConfigFn = (env: ConfigEnv) => UserConfig | Promise export type UserConfigExport = UserConfig | Promise | UserConfigFn @@ -211,11 +218,12 @@ export interface UserConfig { > } /** - * Whether your application is a Single Page Application (SPA). Set to `false` - * for other kinds of apps like MPAs. - * @default true + * Whether your application is a Single Page Application (SPA), + * a Multi Page Application (MPA), or Custom Application (SSR + * and frameworks with custom HTML handling) + * @default 'spa' */ - spa?: boolean + appType?: AppType } export interface ExperimentalOptions { @@ -292,7 +300,7 @@ export type ResolvedConfig = Readonly< /** @internal */ packageCache: PackageCache worker: ResolveWorkerOptions - spa: boolean + appType: AppType } > @@ -536,7 +544,10 @@ export async function resolveConfig( } }, worker: resolvedWorkerOptions, - spa: config.spa ?? true + appType: + config.appType ?? config?.server?.middlewareMode === 'ssr' + ? 'custom' + : 'spa' } // flat config.worker.plugin diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts index a8cb533e35ad19..dde12ef377bb41 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: config.spa + single: config.appType === 'spa' }) ) diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index 095c7027c68558..68c9f261f207b0 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -100,6 +100,7 @@ export interface ServerOptions extends CommonServerOptions { export interface ResolvedServerOptions extends ServerOptions { fs: Required + middlewareMode: boolean } export interface FileSystemServeOptions { @@ -268,10 +269,7 @@ export async function createServer( config.server.https, config.cacheDir ) - let { middlewareMode } = serverConfig - if (middlewareMode === true) { - middlewareMode = 'ssr' - } + const { middlewareMode } = serverConfig const middlewares = connect() as Connect.Server const httpServer = middlewareMode @@ -487,10 +485,8 @@ export async function createServer( middlewares.use(serveRawFsMiddleware(server)) middlewares.use(serveStaticMiddleware(root, server)) - const isMiddlewareMode = middlewareMode && middlewareMode !== 'html' - // spa fallback - if (config.spa && !isMiddlewareMode) { + if (config.appType === 'spa' && !middlewareMode) { middlewares.use(spaFallbackMiddleware(root)) } @@ -499,12 +495,12 @@ export async function createServer( // serve custom content instead of index.html. postHooks.forEach((fn) => fn && fn()) - if (config.spa && !isMiddlewareMode) { + if (config.appType !== 'custom' && !middlewareMode) { // transform index.html middlewares.use(indexHtmlMiddleware(server)) } - if (!isMiddlewareMode) { + if (!middlewareMode) { // handle 404s // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...` middlewares.use(function vite404Middleware(_, res) { @@ -514,7 +510,7 @@ export async function createServer( } // error handler - middlewares.use(errorMiddleware(server, !!middlewareMode)) + middlewares.use(errorMiddleware(server, middlewareMode)) const initOptimizer = async () => { if (isDepsOptimizerEnabled(config)) { @@ -652,7 +648,8 @@ export function resolveServerOptions( ): ResolvedServerOptions { const server: ResolvedServerOptions = { preTransformRequests: true, - ...(raw as ResolvedServerOptions) + ...(raw as ResolvedServerOptions), + middlewareMode: !!raw?.middlewareMode } let allowDirs = server.fs?.allow const deny = server.fs?.deny || ['.env', '.env.*', '*.{crt,pem}'] diff --git a/playground/json/server.js b/playground/json/server.js index 6d9007dcd2b75e..b0c0dd18dc43ae 100644 --- a/playground/json/server.js +++ b/playground/json/server.js @@ -20,7 +20,7 @@ async function createServer( root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -28,6 +28,7 @@ async function createServer( interval: 100 } }, + appType: 'custom', json: { stringify: true } diff --git a/playground/optimize-missing-deps/server.js b/playground/optimize-missing-deps/server.js index 5d16bde38d41ba..ace9ca52c6f2b3 100644 --- a/playground/optimize-missing-deps/server.js +++ b/playground/optimize-missing-deps/server.js @@ -17,11 +17,12 @@ async function createServer(root = process.cwd(), hmrPort) { root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, hmr: { port: hmrPort } - } + }, + appType: 'custom' }) app.use(vite.middlewares) diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js index f205255320cfe2..bde9cbf4604762 100644 --- a/playground/ssr-deps/server.js +++ b/playground/ssr-deps/server.js @@ -22,7 +22,7 @@ export async function createServer(root = process.cwd(), hmrPort) { root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -32,7 +32,8 @@ export async function createServer(root = process.cwd(), hmrPort) { hmr: { port: hmrPort } - } + }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) diff --git a/playground/ssr-html/server.js b/playground/ssr-html/server.js index facc502c9b4d07..a27556ceef35f8 100644 --- a/playground/ssr-html/server.js +++ b/playground/ssr-html/server.js @@ -37,7 +37,7 @@ export async function createServer(root = process.cwd(), hmrPort) { root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -47,7 +47,8 @@ export async function createServer(root = process.cwd(), hmrPort) { hmr: { port: hmrPort } - } + }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) diff --git a/playground/ssr-pug/server.js b/playground/ssr-pug/server.js index 034540e81d47cf..3975141ce644d2 100644 --- a/playground/ssr-pug/server.js +++ b/playground/ssr-pug/server.js @@ -31,7 +31,7 @@ export async function createServer(root = process.cwd(), hmrPort) { root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -41,7 +41,8 @@ export async function createServer(root = process.cwd(), hmrPort) { hmr: { port: hmrPort } - } + }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) diff --git a/playground/ssr-react/server.js b/playground/ssr-react/server.js index a1aee454acc48c..e60444dbcb52d2 100644 --- a/playground/ssr-react/server.js +++ b/playground/ssr-react/server.js @@ -33,7 +33,7 @@ export async function createServer( root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -43,7 +43,8 @@ export async function createServer( hmr: { port: hmrPort } - } + }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) diff --git a/playground/ssr-vue/server.js b/playground/ssr-vue/server.js index 5e4e6718bff7bf..3748393deee7c6 100644 --- a/playground/ssr-vue/server.js +++ b/playground/ssr-vue/server.js @@ -37,7 +37,7 @@ export async function createServer( root, logLevel: isTest ? 'error' : 'info', server: { - middlewareMode: 'ssr', + middlewareMode: true, watch: { // During tests we edit the files too fast and sometimes chokidar // misses change events, so enforce polling for consistency @@ -47,7 +47,8 @@ export async function createServer( hmr: { port: hmrPort } - } + }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) From 8ded69e0b5ebab784745507516f0b4fd4526f852 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Fri, 3 Jun 2022 01:01:59 +0200 Subject: [PATCH 02/23] docs: fix dead link --- docs/config/server-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 2e3c3948f76f72..74d0b603e8fef9 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -163,7 +163,7 @@ Create Vite server in middleware mode - `appType: 'custom'` will disable Vite's own HTML serving logic so that you should serve `index.html` manually. - `appType: 'mpa'` will enable Vite's own HTML serving logic, except for spa specific middlewares like the SPA fallback. -- **Related:** [appType](./shared#apptype),[SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) +- **Related:** [appType](./shared-options#apptype),[SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) - **Example:** From fc7a53470bdb87f809806b3df9a1cd5e56b6b2c2 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:15:39 +0200 Subject: [PATCH 03/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- packages/vite/src/node/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 4f6f73c06c38df..23d52205005eee 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -219,7 +219,7 @@ export interface UserConfig { } /** * Whether your application is a Single Page Application (SPA), - * a Multi Page Application (MPA), or Custom Application (SSR + * a Multi-Page Application (MPA), or Custom Application (SSR * and frameworks with custom HTML handling) * @default 'spa' */ From f02e229fa16197c7330e39091c0b4c2cc54459ca Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:16:10 +0200 Subject: [PATCH 04/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/config/shared-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 89c2c4426a95a0..4701b2ed3bec9f 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -344,7 +344,7 @@ Env variables starts with `envPrefix` will be exposed to your client source code Whether your application is a Single Page Application (SPA), a Multi Page Application (MPA), or Custom Application (SSR and frameworks with custom HTML handling): - `'spa'`: include spa fallback midleware and configure sirv with `single: true` in preview -- `'mpa'`: only include non-spa HTML middlewares +- `'mpa'`: only include non-SPA HTML middlewares - `'custom'`: don't include HTML midlewares Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related [`server.middlewareMode`](./server-options#servermiddlewaremode). From 0c3d73b8e8d7d33a550074df12b960fa6816556e Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:16:26 +0200 Subject: [PATCH 05/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/config/shared-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 4701b2ed3bec9f..20345f77612da5 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -347,4 +347,4 @@ Whether your application is a Single Page Application (SPA), a Multi Page Applic - `'mpa'`: only include non-SPA HTML middlewares - `'custom'`: don't include HTML midlewares -Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related [`server.middlewareMode`](./server-options#servermiddlewaremode). +Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related: [`server.middlewareMode`](./server-options#servermiddlewaremode). From f078727c40dcfa438e643abc46feb87ed0908da3 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:16:40 +0200 Subject: [PATCH 06/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/config/shared-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 20345f77612da5..ee103cd18f0be7 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -343,7 +343,7 @@ Env variables starts with `envPrefix` will be exposed to your client source code Whether your application is a Single Page Application (SPA), a Multi Page Application (MPA), or Custom Application (SSR and frameworks with custom HTML handling): -- `'spa'`: include spa fallback midleware and configure sirv with `single: true` in preview +- `'spa'`: include SPA fallback midleware and configure [sirv](https://github.com/lukeed/sirv) with `single: true` in preview - `'mpa'`: only include non-SPA HTML middlewares - `'custom'`: don't include HTML midlewares From 5eeeaafb30df59d6841516290a2f9b4c72c7fe39 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:17:01 +0200 Subject: [PATCH 07/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/config/server-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 74d0b603e8fef9..02cec4c7d2ae8d 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -183,7 +183,7 @@ async function createServer() { app.use(vite.middlewares) app.use('*', async (req, res) => { - // If `appType` is `'custom'`, should serve `index.html` here. + // If `appType` is `'custom'`, should serve response here. // If `appType` is `'spa'` or `'mpa'`, there is no need to serve `index.html` // because Vite will do that. }) From cb2869a53b64d1f08f03fe3be8db3af170131df1 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:17:11 +0200 Subject: [PATCH 08/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- docs/config/server-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 02cec4c7d2ae8d..af9db64afb3731 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -163,7 +163,7 @@ Create Vite server in middleware mode - `appType: 'custom'` will disable Vite's own HTML serving logic so that you should serve `index.html` manually. - `appType: 'mpa'` will enable Vite's own HTML serving logic, except for spa specific middlewares like the SPA fallback. -- **Related:** [appType](./shared-options#apptype),[SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) +- **Related:** [appType](./shared-options#apptype), [SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) - **Example:** From 94c26061c8d738bee7e3fb67455b972eb29bb4a4 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:17:48 +0200 Subject: [PATCH 09/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- packages/vite/src/node/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 23d52205005eee..f316c4f24b304f 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -52,7 +52,7 @@ export interface ConfigEnv { } /** - * spa: include spa fallback midleware and configure sirv with `single: true` in preview + * spa: include SPA fallback middleware and configure sirv with `single: true` in preview * mpa: only include non-spa HTML middlewares * custom: don't include HTML midlewares */ From 2b9737be40212fd3f3cc3c0135019e2fd392fc04 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 07:18:04 +0200 Subject: [PATCH 10/23] chore: update Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- packages/vite/src/node/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index f316c4f24b304f..98c440cfe25760 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -53,7 +53,7 @@ export interface ConfigEnv { /** * spa: include SPA fallback middleware and configure sirv with `single: true` in preview - * mpa: only include non-spa HTML middlewares + * mpa: only include non-SPA HTML middlewares * custom: don't include HTML midlewares */ export type AppType = 'spa' | 'mpa' | 'custom' From 854dc98ee0f0d63c2fc3080bede60ea593cbda44 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Fri, 3 Jun 2022 07:29:56 +0200 Subject: [PATCH 11/23] chore: apply suggestions --- docs/config/server-options.md | 5 ----- docs/config/shared-options.md | 2 +- docs/guide/ssr.md | 15 +++++++-------- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index af9db64afb3731..e6a9377e98593f 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -158,11 +158,6 @@ export default defineConfig({ Create Vite server in middleware mode -- Use together with: - - - `appType: 'custom'` will disable Vite's own HTML serving logic so that you should serve `index.html` manually. - - `appType: 'mpa'` will enable Vite's own HTML serving logic, except for spa specific middlewares like the SPA fallback. - - **Related:** [appType](./shared-options#apptype), [SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) - **Example:** diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index ee103cd18f0be7..99f8e1cfd486d4 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -341,7 +341,7 @@ Env variables starts with `envPrefix` will be exposed to your client source code - **Type:** `'spa' | 'mpa' | 'custom'` - **Default:** `'spa'` -Whether your application is a Single Page Application (SPA), a Multi Page Application (MPA), or Custom Application (SSR and frameworks with custom HTML handling): +Whether your application is a Single Page Application (SPA), a [Multi Page Application (MPA)](../guide/build#multi-page-app), or Custom Application (SSR and frameworks with custom HTML handling): - `'spa'`: include SPA fallback midleware and configure [sirv](https://github.com/lukeed/sirv) with `single: true` in preview - `'mpa'`: only include non-SPA HTML middlewares diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index 482c4cf532bbbd..dfd1aa2a21aefb 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -78,9 +78,10 @@ async function createServer() { // serving logic and let the parent server take control. // // In middleware mode, if you want to use Vite's own HTML serving logic - // use `'html'` as the `middlewareMode` (ref https://vitejs.dev/config/#server-middlewaremode) + // use `appType: 'spa' | 'mpa'` const vite = await createViteServer({ - server: { middlewareMode: 'ssr' } + server: { middlewareMode: true }, + appType: 'custom' }) // use vite's connect instance as middleware app.use(vite.middlewares) @@ -267,9 +268,7 @@ In some cases like `webworker` runtimes, you might want to bundle your SSR build ## 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. - ::: +The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps you can 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. +::: From 3818bd7e0cae6b1a8505581a89f2c3d9ecfb5703 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 16:23:34 +0200 Subject: [PATCH 12/23] chore: type Co-authored-by: Shinigami --- docs/config/shared-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 99f8e1cfd486d4..897dd8aa123f1d 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -345,6 +345,6 @@ Whether your application is a Single Page Application (SPA), a [Multi Page Appli - `'spa'`: include SPA fallback midleware and configure [sirv](https://github.com/lukeed/sirv) with `single: true` in preview - `'mpa'`: only include non-SPA HTML middlewares -- `'custom'`: don't include HTML midlewares +- `'custom'`: don't include HTML middlewares Learn more in Vite's [SSR guide](/guide/ssr#vite-cli). Related: [`server.middlewareMode`](./server-options#servermiddlewaremode). From cbe8b49ce5b5b0138bf3ae45dc8c9c9f487d123b Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 16:23:49 +0200 Subject: [PATCH 13/23] chore: type Co-authored-by: Shinigami --- docs/config/shared-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md index 897dd8aa123f1d..991f347c02be13 100644 --- a/docs/config/shared-options.md +++ b/docs/config/shared-options.md @@ -343,7 +343,7 @@ Env variables starts with `envPrefix` will be exposed to your client source code Whether your application is a Single Page Application (SPA), a [Multi Page Application (MPA)](../guide/build#multi-page-app), or Custom Application (SSR and frameworks with custom HTML handling): -- `'spa'`: include SPA fallback midleware and configure [sirv](https://github.com/lukeed/sirv) with `single: true` in preview +- `'spa'`: include SPA fallback middleware and configure [sirv](https://github.com/lukeed/sirv) with `single: true` in preview - `'mpa'`: only include non-SPA HTML middlewares - `'custom'`: don't include HTML middlewares From 50e092340b9f9cc9c7c9108f6f0229cc9fa3ecb3 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 3 Jun 2022 16:24:10 +0200 Subject: [PATCH 14/23] chore: typo, not type Co-authored-by: Shinigami --- packages/vite/src/node/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 98c440cfe25760..b7f90c162fd475 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -54,7 +54,7 @@ export interface ConfigEnv { /** * spa: include SPA fallback middleware and configure sirv with `single: true` in preview * mpa: only include non-SPA HTML middlewares - * custom: don't include HTML midlewares + * custom: don't include HTML middlewares */ export type AppType = 'spa' | 'mpa' | 'custom' From 003e9a418583566f09f6c3f4847a8a4cc7dcf098 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 17 Jun 2022 14:31:15 +0200 Subject: [PATCH 15/23] chore: update Co-authored-by: Bjorn Lu --- docs/config/server-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 03b747d9525f3c..ac60f6ff6d8eca 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -156,7 +156,7 @@ export default defineConfig({ - **Type:** `boolean` - **Default:** `false` -Create Vite server in middleware mode +Create Vite server in middleware mode. - **Related:** [appType](./shared-options#apptype), [SSR - Setting Up the Dev Server](/guide/ssr#setting-up-the-dev-server) From bf9294197726894ce54501bdeb79ef435c3a058e Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 17 Jun 2022 14:31:38 +0200 Subject: [PATCH 16/23] chore: update Co-authored-by: Bjorn Lu --- packages/vite/src/node/config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index c8ede65abfd2b4..6d91042e0efcca 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -55,7 +55,9 @@ export interface ConfigEnv { /** * spa: include SPA fallback middleware and configure sirv with `single: true` in preview + * * mpa: only include non-SPA HTML middlewares + * * custom: don't include HTML middlewares */ export type AppType = 'spa' | 'mpa' | 'custom' From 3bd2592403dbfd0a917691ca7cfe98b6f9c8f1a4 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Fri, 17 Jun 2022 14:40:14 +0200 Subject: [PATCH 17/23] chore: update --- packages/vite/src/node/server/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index ed14fd27f70010..b2485ce7d2ce97 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -488,7 +488,7 @@ export async function createServer( middlewares.use(serveStaticMiddleware(root, server)) // spa fallback - if (config.appType === 'spa' && !middlewareMode) { + if (config.appType === 'spa') { middlewares.use(spaFallbackMiddleware(root)) } @@ -497,7 +497,7 @@ export async function createServer( // serve custom content instead of index.html. postHooks.forEach((fn) => fn && fn()) - if (config.appType !== 'custom' && !middlewareMode) { + if (config.appType !== 'custom') { // transform index.html middlewares.use(indexHtmlMiddleware(server)) } From a294a80b70d7d7882abc62411ddd3b50f412e30b Mon Sep 17 00:00:00 2001 From: patak-dev Date: Fri, 17 Jun 2022 14:42:54 +0200 Subject: [PATCH 18/23] chore: update --- packages/vite/src/node/server/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index b2485ce7d2ce97..a7ab654c8ae336 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -497,12 +497,10 @@ export async function createServer( // serve custom content instead of index.html. postHooks.forEach((fn) => fn && fn()) - if (config.appType !== 'custom') { + if (config.appType === 'spa' || config.appType === 'mpa') { // transform index.html middlewares.use(indexHtmlMiddleware(server)) - } - if (!middlewareMode) { // handle 404s // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...` middlewares.use(function vite404Middleware(_, res) { From c061a02c1afe3c0357be5e1ef0dcd80d5b59db3e Mon Sep 17 00:00:00 2001 From: patak-dev Date: Sat, 18 Jun 2022 09:12:02 +0200 Subject: [PATCH 19/23] chore: update docs --- docs/config/server-options.md | 11 ++++++----- docs/guide/ssr.md | 8 +++----- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index ac60f6ff6d8eca..4929b46815bd78 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -169,18 +169,19 @@ const { createServer: createViteServer } = require('vite') async function createServer() { const app = express() - // Create Vite server in middleware mode. + // Create Vite server in middleware mode const vite = await createViteServer({ server: { middlewareMode: true }, - appType: 'custom' + appType: 'custom' // don't include Vite's default HTML handling middlewares }) // Use vite's connect instance as middleware app.use(vite.middlewares) app.use('*', async (req, res) => { - // If `appType` is `'custom'`, should serve response here. - // If `appType` is `'spa'` or `'mpa'`, there is no need to serve `index.html` - // because Vite will do that. + // Since `appType` is `'custom'`, should serve response here. + // Note: if `appType` is `'spa'` or `'mpa'`, vite includes middlewares to handle + // HTML requests and the `vite404Middleware` so user middlewares should be added + // before these to take effect instead }) } diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index dfd1aa2a21aefb..042f7a8abfa112 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -74,11 +74,9 @@ const { createServer: createViteServer } = require('vite') async function createServer() { const app = express() - // Create Vite server in middleware mode. This disables Vite's own HTML - // serving logic and let the parent server take control. - // - // In middleware mode, if you want to use Vite's own HTML serving logic - // use `appType: 'spa' | 'mpa'` + // Create Vite server in middleware mode and configure the app type as + // 'custom', disabling Vite's own HTML serving logic so parent server + // can take control const vite = await createViteServer({ server: { middlewareMode: true }, appType: 'custom' From 71e4d65f86dc5610ead754fc02cb7e74f1779085 Mon Sep 17 00:00:00 2001 From: patak-dev Date: Sat, 18 Jun 2022 10:06:38 +0200 Subject: [PATCH 20/23] chore: add deprecation warnings --- packages/vite/src/node/config.ts | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 6d91042e0efcca..eb33a2f777f043 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -484,6 +484,8 @@ export async function resolveConfig( const server = resolveServerOptions(resolvedRoot, config.server, logger) const ssr = resolveSSROptions(config.ssr) + const middlewareMode = config?.server?.middlewareMode + const optimizeDeps = config.optimizeDeps || {} const resolved: ResolvedConfig = { @@ -529,10 +531,22 @@ export async function resolveConfig( } }, worker: resolvedWorkerOptions, - appType: - config.appType ?? config?.server?.middlewareMode === 'ssr' - ? 'custom' - : 'spa' + appType: config.appType ?? middlewareMode === 'ssr' ? 'custom' : 'spa' + } + + if (middlewareMode === 'ssr') { + logger.warn( + colors.yellow( + `server.middlewareMode 'ssr' is now deprecated, use server.middlewareMode true and appType 'custom'` + ) + ) + } + if (middlewareMode === 'html') { + logger.warn( + colors.yellow( + `server.middlewareMode 'html' is now deprecated, use server.middlewareMode true` + ) + ) } // Some plugins that aren't intended to work in the bundling of workers (doing post-processing at build time for example). From 8699c504006b94e117aa474151eb09d53c52fcec Mon Sep 17 00:00:00 2001 From: patak Date: Sat, 18 Jun 2022 15:14:12 +0200 Subject: [PATCH 21/23] chore: update Co-authored-by: Bjorn Lu --- docs/config/server-options.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/config/server-options.md b/docs/config/server-options.md index 26eb2bb003ac88..aa187ae9b13b68 100644 --- a/docs/config/server-options.md +++ b/docs/config/server-options.md @@ -172,9 +172,9 @@ async function createServer() { app.use('*', async (req, res) => { // Since `appType` is `'custom'`, should serve response here. - // Note: if `appType` is `'spa'` or `'mpa'`, vite includes middlewares to handle - // HTML requests and the `vite404Middleware` so user middlewares should be added - // before these to take effect instead + // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares to handle + // HTML requests and 404s so user middlewares should be added + // before Vite's middlewares to take effect instead }) } From 4fcb6818cf184b5c4d98253986fe5b0872b56c7c Mon Sep 17 00:00:00 2001 From: patak Date: Sat, 18 Jun 2022 15:14:30 +0200 Subject: [PATCH 22/23] chore: update Co-authored-by: Bjorn Lu --- docs/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index 042f7a8abfa112..1e7a7817bf194b 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -266,7 +266,7 @@ In some cases like `webworker` runtimes, you might want to bundle your SSR build ## Vite CLI -The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps you can 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). +The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps. You can add your SSR middlewares 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. ::: From 936f3b324d1ce257836ddd950651034ceb30db41 Mon Sep 17 00:00:00 2001 From: patak Date: Sat, 18 Jun 2022 15:14:48 +0200 Subject: [PATCH 23/23] chore: update Co-authored-by: Bjorn Lu --- docs/guide/ssr.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md index 1e7a7817bf194b..391bf1eeaec864 100644 --- a/docs/guide/ssr.md +++ b/docs/guide/ssr.md @@ -267,6 +267,7 @@ In some cases like `webworker` runtimes, you might want to bundle your SSR build ## Vite CLI The CLI commands `$ vite dev` and `$ vite preview` can also be used for SSR apps. You can add your SSR middlewares 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. :::