deno-project-templates

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Deno Project Templates

Deno 项目模板

This skill provides templates for creating new Deno projects with modern best practices.

本技能提供遵循现代最佳实践的Deno新项目创建模板。

When to Use This Skill

何时使用本技能

Creating a new Deno project from scratch
Setting up project structure for different application types
Scaffolding Fresh web apps, CLI tools, libraries, or API servers

从零开始创建新的Deno项目
为不同类型的应用搭建项目结构
快速搭建Fresh Web应用、CLI工具、库或API服务器

Scope Boundaries

适用范围边界

This skill applies only when the user asks for a Deno project. Follow these rules:

If the user asks for a Node.js, Python, Go, Rust, or other non-Deno project, answer using that technology's project setup directly. Do not suggest Deno templates.
Only use these templates when the user explicitly asks for a Deno project or is working in a Deno environment.
When mentioning deprecated patterns, describe them generically. Do not write out deprecated URLs or import syntax — only show the correct modern approach.

本技能仅适用于用户请求Deno项目的场景。请遵循以下规则：

如果用户请求Node.js、Python、Go、Rust或其他非Deno项目，直接使用对应技术的项目搭建方式作答，不要推荐Deno模板。
仅当用户明确请求Deno项目或处于Deno环境中时，才可使用这些模板。
提及已弃用的模式时，仅做一般性描述。不要写出已弃用的URL或导入语法——仅展示正确的现代写法。

Project Types

项目类型

Choose the appropriate template based on what you want to build:

Type	Use Case	Key Files
Fresh web app	Full-stack web application with Fresh framework	`main.ts` , `routes/` , `islands/`
CLI tool	Command-line application	`main.ts` with arg parsing
Library	Reusable package to publish on JSR	`mod.ts` , `mod_test.ts`
API server	Backend API without frontend	`main.ts` with HTTP handlers

根据你要构建的内容选择合适的模板：

类型	适用场景	核心文件
Fresh Web应用	基于Fresh框架的全栈Web应用	`main.ts` , `routes/` , `islands/`
CLI工具	命令行应用	带参数解析的 `main.ts`
库	发布到JSR的可复用包	`mod.ts` , `mod_test.ts`
API服务器	无前端的后端API	带HTTP处理器的 `main.ts`

Fresh Web App

Fresh Web应用

For full-stack web applications, use the Fresh initializer:

bash

deno run -Ar jsr:@fresh/init my-project
cd my-project

This creates:

```
deno.json
```
- Project configuration and dependencies
```
main.ts
```
- Server entry point
```
client.ts
```
- Client entry point (CSS imports)
```
vite.config.ts
```
- Vite build configuration
```
routes/
```
- Pages and API routes (file-based routing)
```
islands/
```
- Interactive components that get JavaScript on the client
```
components/
```
- Server-only components (no JavaScript shipped)
```
static/
```
- Static assets like images, CSS

Development: Fresh uses Vite. The dev server runs at

http://localhost:5173

(not port 8000).

bash

deno task dev

对于全栈Web应用，使用Fresh初始化工具：

bash

deno run -Ar jsr:@fresh/init my-project
cd my-project

这会创建：

```
deno.json
```
- 项目配置与依赖
```
main.ts
```
- 服务器入口文件
```
client.ts
```
- 客户端入口文件（CSS导入）
```
vite.config.ts
```
- Vite构建配置
```
routes/
```
- 页面与API路由（基于文件的路由）
```
islands/
```
- 会在客户端加载JavaScript的交互式组件
```
components/
```
- 仅在服务器端运行的组件（不向客户端发送JavaScript）
```
static/
```
- 静态资源如图像、CSS

开发： Fresh使用Vite。开发服务器运行在

http://localhost:5173

（而非8000端口）。

bash

deno task dev

CLI Tool

CLI工具

Create a command-line application with argument parsing.

Template files: See

assets/cli-tool/

directory.

创建带参数解析的命令行应用。

模板文件： 查看

assets/cli-tool/

目录。

deno.json

json

{
  "name": "my-cli",
  "version": "0.1.0",
  "exports": "./main.ts",
  "tasks": {
    "dev": "deno run --allow-all main.ts",
    "compile": "deno compile --allow-all -o my-cli main.ts"
  },
  "imports": {
    "@std/cli": "jsr:@std/cli@^1",
    "@std/fmt": "jsr:@std/fmt@^1"
  }
}

json

{
  "name": "my-cli",
  "version": "0.1.0",
  "exports": "./main.ts",
  "tasks": {
    "dev": "deno run --allow-all main.ts",
    "compile": "deno compile --allow-all -o my-cli main.ts"
  },
  "imports": {
    "@std/cli": "jsr:@std/cli@^1",
    "@std/fmt": "jsr:@std/fmt@^1"
  }
}

main.ts

typescript

import { parseArgs } from "@std/cli/parse-args";
import { bold, green } from "@std/fmt/colors";

const args = parseArgs(Deno.args, {
  boolean: ["help", "version"],
  alias: { h: "help", v: "version" },
});

if (args.help) {
  console.log(`
${bold("my-cli")} - A Deno CLI tool

${bold("USAGE:")}
  my-cli [OPTIONS]

${bold("OPTIONS:")}
  -h, --help     Show this help message
  -v, --version  Show version
`);
  Deno.exit(0);
}

if (args.version) {
  console.log("my-cli v0.1.0");
  Deno.exit(0);
}

console.log(green("Hello from my-cli"));

typescript

import { parseArgs } from "@std/cli/parse-args";
import { bold, green } from "@std/fmt/colors";

const args = parseArgs(Deno.args, {
  boolean: ["help", "version"],
  alias: { h: "help", v: "version" },
});

if (args.help) {
  console.log(`\n${bold("my-cli")} - A Deno CLI tool\n\n${bold("USAGE:")}\n  my-cli [OPTIONS]\n\n${bold("OPTIONS:")}\n  -h, --help     Show this help message\n  -v, --version  Show version\n`);
  Deno.exit(0);
}

if (args.version) {
  console.log("my-cli v0.1.0");
  Deno.exit(0);
}

console.log(green("Hello from my-cli"));

Library

库

Create a reusable package for publishing to JSR.

Template files: See

assets/library/

directory.

创建可发布到JSR的可复用包。

模板文件： 查看

assets/library/

目录。

deno.json

json

{
  "name": "@username/my-library",
  "version": "0.1.0",
  "exports": "./mod.ts",
  "tasks": {
    "test": "deno test",
    "check": "deno check mod.ts",
    "publish": "deno publish"
  }
}

json

{
  "name": "@username/my-library",
  "version": "0.1.0",
  "exports": "./mod.ts",
  "tasks": {
    "test": "deno test",
    "check": "deno check mod.ts",
    "publish": "deno publish"
  }
}

mod.ts

typescript

/**
 * my-library - A Deno library
 *
 * @module
 */

/**
 * Example function - replace with your library's functionality
 *
 * @param name The name to greet
 * @returns A greeting message
 *
 * @example
 * ```ts
 * import { greet } from "@username/my-library";
 * console.log(greet("World")); // "Hello, World"
 * ```
 */
export function greet(name: string): string {
  return `Hello, ${name}`;
}

typescript

/**
 * my-library - A Deno library
 *
 * @module
 */

/**
 * Example function - replace with your library's functionality
 *
 * @param name The name to greet
 * @returns A greeting message
 *
 * @example
 * ```ts
 * import { greet } from "@username/my-library";
 * console.log(greet("World")); // "Hello, World"
 * ```
 */
export function greet(name: string): string {
  return `Hello, ${name}`;
}

mod_test.ts

typescript

import { assertEquals } from "jsr:@std/assert";
import { greet } from "./mod.ts";

Deno.test("greet returns correct message", () => {
  assertEquals(greet("World"), "Hello, World");
});

Remember: Replace

@username

with your JSR username before publishing.

typescript

import { assertEquals } from "jsr:@std/assert";
import { greet } from "./mod.ts";

Deno.test("greet returns correct message", () => {
  assertEquals(greet("World"), "Hello, World");
});

注意： 发布前请将

@username

替换为你的JSR用户名。

API Server

API服务器

Create a backend API without a frontend.

Template files: See

assets/api-server/

directory.

创建无前端的后端API。

模板文件： 查看

assets/api-server/

目录。

deno.json

json

{
  "tasks": {
    "dev": "deno run --watch --allow-net main.ts",
    "start": "deno run --allow-net main.ts"
  },
  "imports": {
    "@std/http": "jsr:@std/http@^1"
  }
}

json

{
  "tasks": {
    "dev": "deno run --watch --allow-net main.ts",
    "start": "deno run --allow-net main.ts"
  },
  "imports": {
    "@std/http": "jsr:@std/http@^1"
  }
}

main.ts

typescript

import { serve } from "@std/http";

const handler = (request: Request): Response => {
  const url = new URL(request.url);

  if (url.pathname === "/") {
    return new Response("Welcome to the API", {
      headers: { "Content-Type": "text/plain" },
    });
  }

  if (url.pathname === "/api/hello") {
    return Response.json({ message: "Hello from Deno" });
  }

  return new Response("Not Found", { status: 404 });
};

console.log("Server running at http://localhost:8000");
serve(handler, { port: 8000 });

typescript

import { serve } from "@std/http";

const handler = (request: Request): Response => {
  const url = new URL(request.url);

  if (url.pathname === "/") {
    return new Response("Welcome to the API", {
      headers: { "Content-Type": "text/plain" },
    });
  }

  if (url.pathname === "/api/hello") {
    return Response.json({ message: "Hello from Deno" });
  }

  return new Response("Not Found", { status: 404 });
};

console.log("Server running at http://localhost:8000");
serve(handler, { port: 8000 });

Post-Setup Steps

搭建后步骤

After creating project files:

bash

cd my-project
deno install          # Install dependencies
deno fmt              # Format the code
deno lint             # Check for issues

创建项目文件后：

bash

cd my-project
deno install          # 安装依赖
deno fmt              # 格式化代码
deno lint             # 检查代码问题

Development Commands by Project Type

按项目类型划分的开发命令

Project Type	Start Development	Build/Compile
Fresh	`deno task dev` (port 5173)	`deno task build`
CLI	`deno task dev`	`deno task compile`
Library	`deno test`	N/A
API	`deno task dev`	N/A

项目类型	启动开发服务	构建/编译
Fresh	`deno task dev` （端口5173）	`deno task build`
CLI	`deno task dev`	`deno task compile`
库	`deno test`	无
API	`deno task dev`	无

Deployment

部署

When ready to deploy:

Fresh:
```
deno task build && deno deploy --prod
```
CLI:
```
deno task compile
```
(creates standalone binary)
Library:
```
deno publish
```
(publishes to JSR)
API:
```
deno deploy --prod
```

准备好部署时：

Fresh：
```
deno task build && deno deploy --prod
```
CLI：
```
deno task compile
```
（生成独立二进制文件）
库：
```
deno publish
```
（发布到JSR）
API：
```
deno deploy --prod
```

Best Practices

最佳实践

Always use
```
jsr:
```
imports for Deno packages (the old URL-based imports are deprecated)
Run
```
deno fmt
```
and
```
deno lint
```
regularly
Projects are configured for Deno Deploy compatibility

始终使用
```
jsr:
```
导入Deno包（旧的基于URL的导入已被弃用）
定期运行
```
deno fmt
```
和
```
deno lint
```
项目已配置为兼容Deno Deploy