Deno logoDeno

HTTP Frameworks

If you want to build something more complicated, or like the concept of a higher order framework to create your application, then there are frameworks that support Deno Deploy.

oak

oak is an expressive middleware framework including a router and is heavily influenced by koa. It provides support for Deno Deploy.

A little example of a Deno Deploy "hello world" script would be:

More information can be found in the oak and Deno Deploy documentation.

router

Router by denosaurs is a tiny router framework for Deno Deploy. It can route based on method, route, and has customizable handlers for cases such as no match, errors, or unknown methods.

A small example using router to handle POST and GET requests separately:

More information can be found in the documentation.

nanossr

nanossr is a tiny server side rendering framework for Deno Deploy. It uses JSX for templating the HTML, and twind for TailwindCSS like styling. It is fully integrated into a single import, making it ideal for throwing together small landing pages quickly.

An example that renders Hello {name} to the screen, where {name} depemds on the name query parameter:

sift

Sift is a routing and utility library for Deno Deploy. Its route handler signature is simple and easy to understand. Handlers accept a Request and return a Response.

A small example:

fresh

Preact, but super edgy.

Fresh is a web framework that lets you build projects very fast, highly dynamic, and without the need of a build step. Fresh embraces isomorphic JavaScript like never before. Write a JSX component, have it render on the edge just-in-time, and then enhance it with client side JS for great interactivity.

It has support for file-system routing à la Next.js and TypeScript out of the box.

An example routes/index.tsx would look like this:

import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <div>
      <p>
        Welcome to `fresh`. Try update this message in the ./routes/index.tsx
        file, and refresh.
      </p>
      <Counter />
    </div>
  );
}

This file is rendered on the server only, but can include "islands" of interactivity that will also be client rendered. Here is one of these islands in the "islands/Counter.tsx" file.

import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";

interface CounterProps {
  start: number;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count - 1)} disabled={!IS_BROWSER}>
        -1
      </button>
      <button onClick={() => setCount(count + 1)} disabled={!IS_BROWSER}>
        +1
      </button>
    </div>
  );
}

Note: this file alone is not enough to run a fresh project. Check out a full example in the project repository.