框架

将 deno desktop 指向某个目录后，它会自动检测框架，选择正确的入口点，将构建输出嵌入二进制文件，并运行该框架的生产服务器（或在 --hmr 下运行开发服务器），同时让 webview 指向它。

# 在 Next.js / Astro / Fresh / React Router / 等项目中：
deno desktop .

大多数受支持的框架无需特殊适配器。某些框架具有特定于运行时的入口文件；请在构建前查看下面针对各框架的说明。

检测 Jump to heading#

检测基于配置文件和 package.json 依赖项。匹配到的第一个结果生效。

如果都不匹配，deno desktop 会回退为将该路径视作脚本，这与 deno desktop main.ts 相同。你可以编写一个 Deno.serve() 处理程序并自行提供用户界面。

检测会做什么 Jump to heading#

当检测到框架时，CLI 会：

1. 生成一个合成入口点，用于导入框架的生产服务器（或在 --hmr 下导入开发服务器）。
2. 将构建输出嵌入 二进制文件的虚拟文件系统（VFS）中（.next/、dist/、.output/、_fresh/、build/ 等，具体取决于框架）。
3. 在运行时自解压 VFS，使框架代码能够在其自身工作目录的相对位置找到构建输出。Next.js 在 .next/ 下查找，Astro 在 dist/ 下查找，依此类推。
4. 运行框架服务器 作为你的 Deno.serve() 处理程序。webview 会像任何其他桌面应用一样导航到绑定的端口。

在运行 deno desktop 之前，请先构建你的项目。它不会替你运行 next build、 astro build 之类的命令，因此请先执行框架的构建步骤。

各框架说明 Jump to heading#

Next.js Jump to heading#

cd my-next-app
npx next build         # 生成 .next/
deno desktop .

生产环境：导入 next/dist/cli/next-start.js。开发环境（在 --hmr 下）： next/dist/cli/next-dev.js。.next/ 目录会被嵌入。

App Router 和 Pages Router 都可正常工作。

Astro Jump to heading#

npm run build          # 生成 dist/
deno desktop .

带有 SSR 适配器的 Astro 项目会导入 ./dist/server/entry.mjs。静态项目（无适配器）则通过 Deno 的静态文件服务器提供服务，指向 dist/。

这两种模式都可用；SSR 可以访问完整的 Astro 请求生命周期，静态模式启动更快。

Fresh Jump to heading#

deno task build        # 生成 _fresh/
deno desktop .

Fresh 2.x：导入 _fresh/server.js，并在 --hmr 下运行 Vite 开发服务器。Fresh 1.x：直接导入 ./main.ts。

Remix Jump to heading#

npm run build
deno desktop .

生产环境：针对 build/ 目录运行 remix-serve。开发环境（在 --hmr 下）：运行 @remix-run/dev CLI。

React Router Jump to heading#

React Router 框架模式通过 package.json 中的 @react-router/dev 进行检测。SPA 模式（ssr: false）和服务器端渲染均受支持，前提是项目能够使用 Deno 成功完成构建。

React Router 的默认服务器入口面向 Node.js，并使用 react-dom/server 中的 renderToPipeableStream。Deno 会将 react-dom/server 解析为使用 renderToReadableStream 的 Web Streams 构建版本。在运行 react-router build 前，请添加一个兼容 Deno 的 app/entry.server.tsx； 当 ssr: false 时，React Router 也会使用此文件预渲染 SPA 回退页面。

import type { EntryContext } from "react-router";
import { ServerRouter } from "react-router";
import { renderToReadableStream } from "react-dom/server";
import { isbot } from "isbot";

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  routerContext: EntryContext,
) {
  if (request.method.toUpperCase() === "HEAD") {
    return new Response(null, {
      status: responseStatusCode,
      headers: responseHeaders,
    });
  }

  let statusCode = responseStatusCode;

  const body = await renderToReadableStream(
    <ServerRouter context={routerContext} url={request.url} />,
    {
      signal: request.signal,
      onError(error: unknown) {
        statusCode = 500;
        console.error(error);
      },
    },
  );

  if (
    isbot(request.headers.get("user-agent") || "") || routerContext.isSpaMode
  ) {
    await body.allReady;
  }

  responseHeaders.set("Content-Type", "text/html");
  return new Response(body, {
    headers: responseHeaders,
    status: statusCode,
  });
}

然后构建并打包应用：

deno task build
deno desktop .

生产环境会从 build/client 提供静态客户端资源；对于 SSR 项目，则会将请求路由到 build/server/index.js。

Nuxt Jump to heading#

npm run build          # 生成 .output/
deno desktop .

使用 Nuxt 的 Nitro 输出，位于 .output/server/index.{ts,mjs}。开发环境（在 --hmr 下）：nuxi dev。

SvelteKit Jump to heading#

npm run build
deno desktop .

首先查找 .deno-deploy/server.ts（Deno Deploy 适配器的输出），如果没有，再回退到 .output/server/index.{ts,mjs}（Node 适配器的输出）。开发环境：Vite 开发服务器。

如果你使用了其他适配器（@sveltejs/adapter-static 等），请直接用 Deno.serve() 自行提供输出目录服务，而不要依赖检测。

SolidStart 和 TanStack Start Jump to heading#

二者底层都使用 Nitro 框架；检测会通过 .output/server/index.* 入口处理它们。运行 deno desktop 前请先构建（npm run build）。

Vite Jump to heading#

Vite 项目通过 vite.config.* 文件或 vite 依赖进行检测。 它的打包器优先级最低，因此基于 Vite 构建的元框架 （Astro、SvelteKit、Nuxt、Remix、React Router、SolidStart、TanStack Start）会优先通过各自的配置或依赖进行匹配。

• SSR（vite.config.* 旁边有一个 server.{ts,js,mjs} 入口）：SSR 入口会在生产环境中直接运行，而开发环境（在 --hmr 下）会以中间件模式运行 Vite 开发服务器。

• SPA 或 MPA（没有 server 入口）：Deno 会通过 HTTP 提供 dist/ 中的 vite build 静态输出服务，并带有 index.html 回退，因此客户端路由器 在硬刷新后仍可正常工作。请先运行 vite build。

强制指定框架或选择退出 Jump to heading#

没有用于强制检测的标志。若要选择退出（即在不使用检测的情况下发布框架项目），请传入一个显式脚本入口：

deno desktop ./my-server.ts

在 my-server.ts 中，你需要自行导入并启动框架。当你需要检测无法表达的启动控制时，请使用这种方式。

框架项目中的热重载 Jump to heading#

在 --hmr 下，会运行框架自身的开发服务器，webview 会直接连接到它。状态保持、快速刷新和错误覆盖层的表现都与浏览器中相同。有关框架和非框架 HMR 模式的详细信息，请参见 HMR。