From a198990efe4f96c2155928ac23264437d393d54e Mon Sep 17 00:00:00 2001 From: Evan You Date: Sat, 23 Jan 2021 22:41:40 -0500 Subject: [PATCH] feat: vite preview command for previewing build output close #1627 --- packages/playground/alias/package.json | 3 +- packages/playground/assets/package.json | 3 +- packages/playground/css/package.json | 3 +- packages/playground/data-uri/package.json | 3 +- packages/playground/define/package.json | 3 +- .../playground/dynamic-import/package.json | 3 +- packages/playground/env/package.json | 3 +- packages/playground/glob-import/package.json | 3 +- packages/playground/hmr/package.json | 3 +- packages/playground/html/package.json | 3 +- packages/playground/json/package.json | 3 +- packages/playground/legacy/package.json | 3 +- packages/playground/lib/package.json | 3 +- .../playground/optimize-deps/package.json | 3 +- packages/playground/react/package.json | 3 +- packages/playground/resolve/package.json | 3 +- packages/playground/vue-jsx/package.json | 3 +- packages/playground/vue/package.json | 3 +- packages/playground/wasm/package.json | 3 +- packages/playground/worker/package.json | 3 +- packages/vite/package.json | 1 + packages/vite/src/node/cli.ts | 27 ++++++++++ packages/vite/src/node/serve.ts | 53 +++++++++++++++++++ .../src/node/server/{https.ts => http.ts} | 28 ++++++++++ packages/vite/src/node/server/index.ts | 27 +--------- packages/vite/types/shims.d.ts | 5 ++ 26 files changed, 155 insertions(+), 46 deletions(-) create mode 100644 packages/vite/src/node/serve.ts rename packages/vite/src/node/server/{https.ts => http.ts} (77%) diff --git a/packages/playground/alias/package.json b/packages/playground/alias/package.json index de2c9f2756b52a..d76e350b2e4c69 100644 --- 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 index d49d88090ebd1a..ed26f61e22c261 100644 --- 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" } } \ No newline at end of file diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json index a64c656276955a..7822dfca4ea45a 100644 --- 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 index 6197cbb29e7589..54912c035d44e7 100644 --- 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" } } \ No newline at end of file diff --git a/packages/playground/define/package.json b/packages/playground/define/package.json index fd68a46c35162d..eed4e7a31eb969 100644 --- 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 index e6cfed7b7b91fd..91048d3c3b90a2 100644 --- 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 index 2ced20d5275744..efb93c23954582 100644 --- 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 index 235656874986be..2910f5f10b88f2 100644 --- 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 index 97fb6577fb4d28..d16ba46fc693c0 100644 --- 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 index 6368db40153c7d..db225e882d34dc 100644 --- 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 index 7e20d7591f29de..feae12478e1446 100644 --- 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 index c0f4f90fa497b7..9c7c676b3d186e 100644 --- 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 index dc8a64ad4bbf8d..c6b75f4fa7c6b2 100644 --- 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 index d54cf2d2db08ee..0a9b3eaa25952d 100644 --- 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 index 38a33bb6b073d3..9213ed00802ee1 100644 --- 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 index ad7b8903502fd2..ea9b0598a28442 100644 --- 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 index 8c1ad4c2d27032..ac4f309ffb58d3 100644 --- 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 index b9afe797d66a5a..612a8f6a9073e9 100644 --- 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 index b0603222524f42..4ecd7d5a883564 100644 --- 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 index abf6cfeee5551c..04fd69b27dab34 100644 --- 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 index 4f83ca94518e26..c67356e833b21f 100644 --- 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 index 09fe8a57cb0714..5ff5b56c74709a 100644 --- 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 ', `[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 new file mode 100644 index 00000000000000..e267e48445096c --- /dev/null +++ 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 b/packages/vite/src/node/server/http.ts similarity index 77% rename from packages/vite/src/node/server/https.ts rename to packages/vite/src/node/server/http.ts index 916d872be8d0a2..d701525807b064 100644 --- a/packages/vite/src/node/server/https.ts +++ b/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 { + 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 index 5dd30944e1e384..8c2bdec68f8b57 100644 --- 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 { - 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 index e3533845957fa7..a0ee52a1c189d1 100644 --- 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 +}