feat: add preview cmd (#12)

* feat: add preview cmd * docs: preview * Update src/fishkit/server.ts Co-authored-by: chencheng (云谦) <[email protected]> * Update src/dev.ts Co-authored-by: chencheng (云谦) <[email protected]> * Update src/preview.ts Co-authored-by: chencheng (云谦) <[email protected]> * docs: preview cmd * chore: update lock * chore: code style * chore: code style * Update src/fishkit/server.ts --------- Co-authored-by: chencheng (云谦) <[email protected]>
umijs · Nov 6, 2024 · dcf4979 · dcf4979
1 parent ca0d0a4
commit dcf4979
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 54 deletions.
diff --git a/.changeset/silent-cherries-breathe.md b/.changeset/silent-cherries-breathe.md
@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: add preview cmd
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -26,6 +26,13 @@ $ pnpm dev
 $ pnpm build
 ```
 
+## Preview
+
+```bash
+# Preview the product after building the project
+$ pnpm preview
+```
+
 ## Test
 
 ```bash

diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ $ npx serve dist -s
 - `tnf create <project-name> --template=<template-name>`: Create a new project with the given template.
 - `tnf build`: Build the project.
 - `tnf dev`: Start the development server.
+- `tnf preview`: Preview the product after building the project.
 
 ## API
 

diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "build": "tnf build",
     "dev": "tnf dev",
-    "preview": "npx serve dist -s"
+    "preview": "tnf preview"
   },
   "dependencies": {
     "@types/react": "^18.3.12",

diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "picocolors": "^1.1.1",
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "sirv": "^3.0.0",
     "spdy": "^4.0.2",
     "yargs-parser": "^21.1.1",
     "zod": "^3.23.8"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/cli.ts b/src/cli.ts
@@ -31,6 +31,12 @@ async function run(cmd: string, options: RunOptions) {
         cwd: options.cwd,
         config: await loadConfig({ cwd: options.cwd }),
       });
+    case 'preview':
+      const { preview } = await import('./preview.js');
+      return preview({
+        cwd: options.cwd,
+        config: await loadConfig({ cwd: options.cwd }),
+      });
     default:
       throw new Error(`Unknown command: ${cmd}`);
   }

diff --git a/src/dev.ts b/src/dev.ts
@@ -1,8 +1,6 @@
 import type { BuildParams } from '@umijs/mako';
-import { getPort } from 'get-port-please';
 import { build } from './build';
 import type { Config } from './config';
-import { DEFAULT_PORT } from './constants';
 import { createServer } from './fishkit/server';
 
 export interface DevOpts {
@@ -12,17 +10,7 @@ export interface DevOpts {
 
 export async function dev(opts: DevOpts) {
   const devServer = opts.config?.devServer || {};
-  const port = await getPort(devServer.port || DEFAULT_PORT);
-  const hmrPort = await getPort(port + 1);
-  const host = devServer.host || 'localhost';
-
-  await createServer({
-    port,
-    hmrPort,
-    host,
-    https: devServer.https,
-    ip: devServer.ip,
-  });
+  const { hmrPort, host } = await createServer({ devServer, hmr: true });
 
   // build mako config
   let devMakoConfig: BuildParams['config'] = {};

diff --git a/src/fishkit/server.ts b/src/fishkit/server.ts
@@ -3,21 +3,27 @@ import history from 'connect-history-api-fallback';
 import cors from 'cors';
 import express from 'express';
 import proxy from 'express-http-proxy';
+import { getPort } from 'get-port-please';
 import http from 'http';
 import { createProxyMiddleware } from 'http-proxy-middleware';
+import { type Config } from '../config';
+import { DEFAULT_PORT } from '../constants';
 import { createHttpsServer } from './https';
 
 export interface ServerOpts {
-  port: number;
-  hmrPort: number;
-  host: string;
-  https?: {
-    hosts?: string[];
-  };
-  ip?: string;
+  devServer: Config['devServer'];
+  hmr?: boolean;
 }
 
 export async function createServer(opts: ServerOpts) {
+  const {
+    port = DEFAULT_PORT,
+    host = 'localhost',
+    https,
+    ip,
+  } = opts.devServer || {};
+  const _port = await getPort(port);
+  const hmrPort = opts.hmr ? await getPort(_port + 1) : 0;
   const app = express();
 
   // cors
@@ -32,27 +38,30 @@ export async function createServer(opts: ServerOpts) {
   // compression
   app.use(compression());
 
-  // proxy ws to mako server
-  const wsProxy = createProxyMiddleware({
-    target: `http://127.0.0.1:${opts.hmrPort}`,
-    ws: true,
-  });
-  app.use('/__/hmr-ws', wsProxy);
+  let wsProxy;
+  if (opts.hmr) {
+    // proxy ws to mako server
+    wsProxy = createProxyMiddleware({
+      target: `http://127.0.0.1:${hmrPort}`,
+      ws: true,
+    });
+    app.use('/__/hmr-ws', wsProxy);
 
-  app.use(
-    proxy(`http://127.0.0.1:${opts.hmrPort}`, {
-      proxyReqOptDecorator: function (proxyReqOpts: any) {
-        proxyReqOpts.agent = false;
-        return proxyReqOpts;
-      },
-      filter: function (req: any, res: any) {
-        return req.method == 'GET' || req.method == 'HEAD';
-      },
-      skipToNextHandlerFilter: function (proxyRes: any) {
-        return proxyRes.statusCode !== 200;
-      },
-    }),
-  );
+    app.use(
+      proxy(`http://127.0.0.1:${hmrPort}`, {
+        proxyReqOptDecorator: function (proxyReqOpts: any) {
+          proxyReqOpts.agent = false;
+          return proxyReqOpts;
+        },
+        filter: function (req: any, res: any) {
+          return req.method == 'GET' || req.method == 'HEAD';
+        },
+        skipToNextHandlerFilter: function (proxyRes: any) {
+          return proxyRes.statusCode !== 200;
+        },
+      }),
+    );
+  }
 
   // history fallback
   app.use(
@@ -63,32 +72,33 @@ export async function createServer(opts: ServerOpts) {
 
   // create server
   let server;
-  const httpsOpts = opts.https;
-  if (httpsOpts) {
-    httpsOpts.hosts ||= uniq(
+  if (https) {
+    https.hosts ||= uniq(
       [
-        ...(httpsOpts.hosts || []),
+        ...(https.hosts || []),
         // always add localhost, 127.0.0.1, ip and host
         '127.0.0.1',
         'localhost',
-        opts.ip,
-        opts.host !== '0.0.0.0' && opts.host,
+        ip,
+        host !== '0.0.0.0' && host,
       ].filter(Boolean) as string[],
     );
-    server = await createHttpsServer(app, httpsOpts);
+    server = await createHttpsServer(app, https);
   } else {
     server = http.createServer(app);
   }
 
-  server.listen(opts.port, () => {
-    const protocol = opts.https ? 'https:' : 'http:';
-    console.log(`Server is running on ${protocol}//${opts.host}:${opts.port}`);
+  server.listen(_port, () => {
+    const protocol = https ? 'https:' : 'http:';
+    console.log(`Server is running on ${protocol}//${host}:${_port}`);
   });
 
-  // prevent first websocket auto disconnected
-  server.on('upgrade', wsProxy.upgrade);
+  if (opts.hmr) {
+    // prevent first websocket auto disconnected
+    server.on('upgrade', wsProxy!.upgrade);
+  }
 
-  return server;
+  return { server, app, hmrPort, port: _port, ip, host };
 }
 
 function uniq(arr: string[]) {

diff --git a/src/preview.ts b/src/preview.ts
@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+import sirv from 'sirv';
+import type { Config } from './config';
+import { createServer } from './fishkit/server';
+
+export interface PreviewOpts {
+  cwd: string;
+  config?: Config;
+}
+
+export async function preview(opts: PreviewOpts) {
+  const devServer = opts.config?.devServer || {};
+  const { app } = await createServer({ devServer });
+  const distDir = resolve(opts.cwd, 'dist');
+
+  app.use(
+    '/',
+    sirv(distDir, {
+      etag: true,
+      dev: true,
+      single: true,
+    }),
+  );
+}