deno-frontend

bởi denoland

Sử dụng khi làm việc với framework Fresh, tạo route hoặc handler trong Fresh, xây dựng giao diện web với Preact, hoặc thêm Tailwind CSS trong Deno. Bao gồm Fresh 2.x…

npx skills add https://github.com/denoland/skills --skill deno-frontend

Tải ZIP GitHub

Frontend development with Deno

Two paths. Pick by what the project already uses.

Regular npm frameworks — the usual choice

Deno runs the normal frontend ecosystem: React, Vue, Svelte, Solid, Vite, Astro, Next.js, Nuxt, SvelteKit, Remix, SolidStart. Nothing needs to be ported, and there is no Deno-specific way to write them.

deno create vite my-app     # or astro, next, nuxt, svelte…
cd my-app
deno install
deno task dev

deno create is npm create. deno install reads package.json. deno task <script> runs package.json scripts. That is the whole difference.

Follow the framework's own documentation for everything else — routing, components, data loading, and config are the framework's concern, not Deno's. Don't invent Deno-flavoured variants of their APIs, and don't reach for Fresh patterns in a React or Svelte project.

The only things worth knowing:

Some frameworks need "nodeModulesDir": "auto" in deno.json; Next.js does.
Permissions apply to the dev server too — framework tasks generally want -A.
Deploying: see the deno-deploy skill, which lists per-framework build commands and presets.

Fresh — Deno's own framework

Fresh suits a new Deno-first project that wants server rendering with minimal client JavaScript. It uses island architecture: pages render on the server, and only components in islands/ ship JavaScript.

deno run -Ar jsr:@fresh/init
cd my-project
deno task dev                # http://localhost:5173

A Fresh project is Vite-based: vite.config.ts for the build, main.ts for the server, file-based routes in routes/, islands in islands/, server-only components in components/. Preact supplies the component model, with signals for state.

// islands/Counter.tsx — interactive, ships JS
import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>Count: {count.value}</button>;
}

Three rules carry most of the weight:

Islands ship JavaScript — keep them small, leave everything else in components/.
Island props must be serializable. Functions cannot be passed.
Handlers take a single (ctx) parameter.

Load references/FRESH.md for routes, handlers, define helpers, middleware, islands, signals, and Tailwind.

Use Fresh 2.x, imported from "fresh". For an existing 1.x project, or one pinned to a 2.0.0-alpha.* release, see references/FRESH_MIGRATION.md.