feat: vite preview command for previewing build output

close #1627
vitejs · Jan 24, 2021 · a198990 · a198990
1 parent 63dd1a2
commit a198990
Show file tree

Hide file tree

Showing 26 changed files with 155 additions and 46 deletions.
diff --git a/packages/playground/alias/package.json b/packages/playground/alias/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "dependencies": {
     "vue": "^3.0.5"

diff --git a/packages/playground/assets/package.json b/packages/playground/assets/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "devDependencies": {
     "postcss-nested": "^5.0.3"

diff --git a/packages/playground/data-uri/package.json b/packages/playground/data-uri/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/define/package.json b/packages/playground/define/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/dynamic-import/package.json b/packages/playground/dynamic-import/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/env/package.json b/packages/playground/env/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "cross-env VITE_INLINE=inline-serve vite",
     "build": "cross-env VITE_INLINE=inline-build vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "devDependencies": {
     "cross-env": "^7.0.3"

diff --git a/packages/playground/glob-import/package.json b/packages/playground/glob-import/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/hmr/package.json b/packages/playground/hmr/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/html/package.json b/packages/playground/html/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/json/package.json b/packages/playground/json/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/legacy/package.json b/packages/playground/legacy/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --debug legacy",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "devDependencies": {
     "@vitejs/plugin-legacy": "^1.0.0"

diff --git a/packages/playground/lib/package.json b/packages/playground/lib/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/optimize-deps/package.json b/packages/playground/optimize-deps/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "dependencies": {
     "axios": "^0.21.1",

diff --git a/packages/playground/react/package.json b/packages/playground/react/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "dependencies": {
     "react": "^17.0.1",

diff --git a/packages/playground/resolve/package.json b/packages/playground/resolve/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "dependencies": {
     "resolve-exports-path": "link:./exports-path",

diff --git a/packages/playground/vue-jsx/package.json b/packages/playground/vue-jsx/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^1.0.0"

diff --git a/packages/playground/vue/package.json b/packages/playground/vue/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   },
   "dependencies": {
     "vue": "^3.0.5"

diff --git a/packages/playground/wasm/package.json b/packages/playground/wasm/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/playground/worker/package.json b/packages/playground/worker/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
   }
 }
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -81,6 +81,7 @@
     "chalk": "^4.1.0",
     "chokidar": "^3.4.3",
     "clean-css": "^4.2.3",
+    "compression": "^1.7.4",
     "connect": "^3.7.0",
     "connect-history-api-fallback": "^1.6.0",
     "convert-source-map": "^1.7.0",

diff --git a/packages/vite/src/node/cli.ts b/packages/vite/src/node/cli.ts
@@ -4,6 +4,7 @@ import { BuildOptions } from './build'
 import { ServerOptions } from './server'
 import { createLogger, LogLevel } from './logger'
 import { resolveConfig } from '.'
+import { serve } from './serve'
 
 const cli = cac('vite')
 
@@ -190,6 +191,32 @@ cli
     }
   )
 
+cli
+  .command('preview [root]')
+  .option('--port <port>', `[number] specify port`)
+  .action(
+    async (root: string, options: { port?: number } & GlobalCLIOptions) => {
+      try {
+        const config = await resolveConfig(
+          {
+            root,
+            base: options.base,
+            configFile: options.config,
+            logLevel: options.logLevel
+          },
+          'serve',
+          'development'
+        )
+        await serve(config, options.port)
+      } catch (e) {
+        createLogger(options.logLevel).error(
+          chalk.red(`error when starting preview server:\n${e.stack}`)
+        )
+        process.exit(1)
+      }
+    }
+  )
+
 cli.help()
 cli.version(require('../../package.json').version)
 

diff --git a/packages/vite/src/node/serve.ts b/packages/vite/src/node/serve.ts
@@ -0,0 +1,53 @@
+import os from 'os'
+import path from 'path'
+import sirv from 'sirv'
+import chalk from 'chalk'
+import connect from 'connect'
+import compression from 'compression'
+import { ResolvedConfig } from '.'
+import { Connect } from 'types/connect'
+import { resolveHttpServer } from './server/http'
+
+export async function serve(config: ResolvedConfig, port = 5000) {
+  const app = connect() as Connect.Server
+
+  app.use(compression())
+
+  const distDir = path.resolve(config.root, config.build.outDir)
+  app.use(
+    config.base,
+    sirv(distDir, {
+      etag: true,
+      single: true
+    })
+  )
+
+  const server = await resolveHttpServer(config.server, app)
+
+  const options = config.server || {}
+  const hostname = options.host || 'localhost'
+  const protocol = options.https ? 'https' : 'http'
+  const info = config.logger.info
+  const base = config.base
+
+  server.listen(port, () => {
+    info(`\n  Build preview server running at:\n`)
+    const interfaces = os.networkInterfaces()
+    Object.keys(interfaces).forEach((key) =>
+      (interfaces[key] || [])
+        .filter((details) => details.family === 'IPv4')
+        .map((detail) => {
+          return {
+            type: detail.address.includes('127.0.0.1')
+              ? 'Local:   '
+              : 'Network: ',
+            host: detail.address.replace('127.0.0.1', hostname)
+          }
+        })
+        .forEach(({ type, host }) => {
+          const url = `${protocol}://${host}:${chalk.bold(port)}${base}`
+          info(`  > ${type} ${chalk.cyan(url)}`)
+        })
+    )
+  })
+}
diff --git a/packages/vite/src/node/server/https.ts → packages/vite/src/node/server/http.ts b/packages/vite/src/node/server/https.ts → packages/vite/src/node/server/http.ts
@@ -1,6 +1,34 @@
 import fs from 'fs'
 import path from 'path'
+import { Server as HttpServer } from 'http'
 import { ServerOptions as HttpsServerOptions } from 'https'
+import { ServerOptions } from '..'
+import { Connect } from 'types/connect'
+
+export async function resolveHttpServer(
+  { https = false, proxy }: ServerOptions,
+  app: Connect.Server
+): Promise<HttpServer> {
+  if (!https) {
+    return require('http').createServer(app)
+  }
+
+  const httpsOptions = await resolveHttpsConfig(
+    typeof https === 'boolean' ? {} : https
+  )
+  if (proxy) {
+    // #484 fallback to http1 when proxy is needed.
+    return require('https').createServer(httpsOptions, app)
+  } else {
+    return require('http2').createSecureServer(
+      {
+        ...httpsOptions,
+        allowHTTP1: true
+      },
+      app
+    )
+  }
+}
 
 export async function resolveHttpsConfig(httpsOption: HttpsServerOptions) {
   const { ca, cert, key, pfx } = httpsOption

diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
@@ -9,13 +9,13 @@ import corsMiddleware from 'cors'
 import chalk from 'chalk'
 import { AddressInfo } from 'net'
 import chokidar from 'chokidar'
+import { resolveHttpServer } from './http'
 import { resolveConfig, InlineConfig, ResolvedConfig } from '../config'
 import {
   createPluginContainer,
   PluginContainer
 } from '../server/pluginContainer'
 import { FSWatcher, WatchOptions } from 'types/chokidar'
-import { resolveHttpsConfig } from '../server/https'
 import { createWebSocketServer, WebSocketServer } from '../server/ws'
 import { baseMiddleware } from './middlewares/base'
 import { proxyMiddleware, ProxyOptions } from './middlewares/proxy'
@@ -471,31 +471,6 @@ export async function createServer(
   return server
 }
 
-async function resolveHttpServer(
-  { https = false, proxy }: ServerOptions,
-  app: Connect.Server
-): Promise<http.Server> {
-  if (!https) {
-    return require('http').createServer(app)
-  }
-
-  const httpsOptions = await resolveHttpsConfig(
-    typeof https === 'boolean' ? {} : https
-  )
-  if (proxy) {
-    // #484 fallback to http1 when proxy is needed.
-    return require('https').createServer(httpsOptions, app)
-  } else {
-    return require('http2').createSecureServer(
-      {
-        ...httpsOptions,
-        allowHTTP1: true
-      },
-      app
-    )
-  }
-}
-
 async function startServer(
   server: ViteDevServer,
   inlinePort?: number

diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts
@@ -102,3 +102,8 @@ declare module 'minimatch' {
   function match(path: string, pattern: string): boolean
   export default match
 }
+
+declare module 'compression' {
+  function compression(): any
+  export default compression
+}