文档中心

探索 DWeb 框架的无限可能,构建下一代高性能 Web 应用

快速开始

创建新项目

Code
# 创建新项目
deno run -A jsr:@dreamer/dweb/init

cd my-app
deno task dev

作为库使用

Code
# 安装依赖
deno add jsr:@dreamer/dweb

# 或在 deno.json 中配置导入映射
{
  "imports": {
    "@dreamer/dweb": "jsr:@dreamer/dweb"
  }
}

配置

在项目根目录创建 dweb.config.ts 文件:

Code
// dweb.config.ts
import type { AppConfig } from 'jsr:@dreamer/dweb';
import { tailwind, cors } from 'jsr:@dreamer/dweb';

const config: AppConfig = {
  name: 'my-app',
  renderMode: 'hybrid', // 'ssr' | 'csr' | 'hybrid'
  
  // 服务器配置
  server: {
    port: 3000,
    host: 'localhost',
  },
  
  // 路由配置
  routes: {
    dir: 'routes',
    ignore: ['**/*.test.ts', '**/*.test.tsx'],
  },
  
  // Cookie 配置
  cookie: {
    secret: 'your-secret-key-here-change-in-production',
  },
  
  // Session 配置
  session: {
    secret: 'your-session-secret-here-change-in-production',
    store: 'memory',
    maxAge: 3600000, // 1小时
    secure: false,
    httpOnly: true,
  },
  
  // 插件配置
  plugins: [
    tailwind({
      version: 'v4',
      cssPath: 'assets/style.css',
      optimize: true,
    }),
  ],
  
  // 中间件配置
  middleware: [
    cors({
      origin: '*',
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization'],
    }),
  ],
  
  // 开发配置
  dev: {
    hmrPort: 24678,
    reloadDelay: 300,
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
  },
};

export default config;

创建页面

routes 目录下创建文件即可自动生成路由:

Code
// routes/index.tsx
export default function HomePage() {
  return (
    <div>
      <h1>欢迎使用 DWeb</h1>
      <p>这是一个简单的页面示例</p>
    </div>
  );
}

文件路径会自动映射为路由路径:

  • routes/index.tsx/
  • routes/about.tsx/about
  • routes/blog/[id].tsx/blog/:id

API 路由

routes/api 目录下创建 API 路由:

Code
// routes/api/users.ts
export async function GET(req: Request) {
  return new Response(JSON.stringify({ users: [] }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

// 函数式 API 路由
export async function getUser(req: Request) {
  const { searchParams } = new URL(req.url);
  const id = searchParams.get('id');
  return new Response(JSON.stringify({ id, name: 'User' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

使用中间件

main.ts 文件中注册中间件:

Code
// main.ts
import { createApp } from 'jsr:@dreamer/dweb';
import { logger, cors } from 'jsr:@dreamer/dweb';

const app = createApp();

// 使用内置中间件
app.use(logger());
app.use(cors());
// 注意:响应压缩由 Deno.serve 自动处理,无需手动配置

export default app;

渲染模式

DWeb 支持三种渲染模式:

  • SSR(服务端渲染):在服务器端渲染 HTML,适合 SEO 和首屏性能
  • CSR(客户端渲染):完全在客户端渲染,支持 SPA 无刷新切换
  • Hybrid(混合渲染):服务端渲染 + 客户端 hydration,兼顾 SEO 和交互性

可以在页面组件中配置渲染模式:

Code
export const renderMode = 'hybrid';

更多资源

GitHub 仓库 - 查看源代码和提交问题

JSR 包页面 - 查看包信息和版本

功能特性 - 了解所有功能