Deno Frontend

my-project/
├── deno.json           # config, dependencies, tasks
├── main.ts             # server entry point
├── client.ts           # client entry point (CSS imports)
├── vite.config.ts      # Vite configuration
├── routes/             # pages and API routes
│   ├── _app.tsx        # outer HTML wrapper
│   ├── _layout.tsx     # optional nested layout
│   ├── _error.tsx      # unified error page (404 and 500)
│   ├── _middleware.ts
│   └── index.tsx       # /
├── islands/            # interactive, hydrated on the client
├── components/         # server-only, ships no JS
├── static/
└── utils/state.ts      # define helpers

import { App, fsRoutes, staticFiles, trailingSlashes } from "fresh";

const app = new App()
  .use(staticFiles())
  .use(trailingSlashes("never"));

await fsRoutes(app, {
  dir: "./",
  loadIsland: (path) => import(`./islands/${path}`),
  loadRoute: (path) => import(`./routes/${path}`),
});

if (import.meta.main) {
  await app.listen();
}

import { defineConfig } from "vite";
import { fresh } from "@fresh/plugin-vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [fresh(), tailwindcss()],
});

{
  "tasks": {
    "dev": "vite",
    "build": "vite build",
    "preview": "deno serve -A _fresh/server.js"
  },
  "imports": {
    "fresh": "jsr:@fresh/core@^2",
    "fresh/runtime": "jsr:@fresh/core@^2/runtime",
    "@fresh/plugin-vite": "jsr:@fresh/plugin-vite@^1",
    "@preact/signals": "npm:@preact/signals@^2",
    "preact": "npm:preact@^10",
    "preact/hooks": "npm:preact@^10/hooks",
    "@/": "./"
  }
}

import { App, fsRoutes, staticFiles } from "fresh";
import { cors, csp, trailingSlashes } from "fresh";
import { createDefine, HttpError } from "fresh";
import type { Middleware, PageProps, RouteConfig } from "fresh";
import { IS_BROWSER } from "fresh/runtime";
import { computed, signal, useSignal } from "@preact/signals";
import { useEffect, useRef, useState } from "preact/hooks";

import type { PageProps } from "fresh";

export default function App({ Component }: PageProps) {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My App</title>
      </head>
      <body>
        <Component />
      </body>
    </html>
  );
}

// utils/state.ts
import { createDefine } from "fresh";

export interface State {
  user?: { id: string; name: string };
}

export const define = createDefine<State>();

// routes/posts.tsx
import { define } from "@/utils/state.ts";

export const handler = define.handlers(async (ctx) => {
  const res = await fetch("https://example.com/posts");
  return { data: { posts: await res.json() } };
});

export default define.page<typeof handler>(({ data }) => (
  <ul>{data.posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>
));

export default async function ServersPage() {
  const servers = await db.query("SELECT * FROM servers");
  return <ul>{servers.map((s) => <li key={s.id}>{s.name}</li>)}</ul>;
}

export const handler = define.handlers({
  GET(ctx) {
    return Response.json({ users: [] });
  },
  async POST(ctx) {
    const body = await ctx.req.json();
    return Response.json({ created: true }, { status: 201 });
  },
});

import { HttpError } from "fresh";

if (!post) throw new HttpError(404);
if (!ctx.state.user) throw new HttpError(401);

// routes/_middleware.ts
import { define } from "@/utils/state.ts";

export const handler = define.middleware(async (ctx) => {
  console.log(`${ctx.req.method} ${ctx.url.pathname}`);
  const response = await ctx.next();
  return response;
});

import { IS_BROWSER } from "fresh/runtime";

export default function LocalStorageCounter() {
  if (!IS_BROWSER) return <div>Loading...</div>;
  const count = useSignal(Number(localStorage.getItem("count") ?? 0));
  return <button onClick={() => count.value++}>Count: {count.value}</button>;
}

import { computed, signal } from "@preact/signals";

const count = signal(0);
const doubled = computed(() => count.value * 2);

deno add npm:@tailwindcss/vite npm:tailwindcss

deno task dev        # dev server, port 5173
deno task build      # production build — required before deploying
deno task preview    # preview the build locally
deno deploy --prod