Building websites and apps with Deno

Why Deno?

You can be productive immediately with Deno when you start building your web site or app:

No configuring your toolchain, project, and TypeScript, since Deno ships with a modern development toolchain with native TypeScript support
Use Web Platform APIs you’re familiar with, like fetch(), compression streams, BroadcastChannel, web workers, WebSocket, and more
Mitigate supply chain attacks with Deno’s opt-in permission system
Add state in a few lines of code with Deno KV, built right into the runtime

Routing and Rendering

There are many approaches to building a website or app with Deno. Since Deno natively supports JSX and TSX, the simplest approach to building a site is with a router and components.

Here’s a extremely simplified example of a site with Home and About pages:

import { router } from "https://crux.land/router@0.0.11";
import { h, ssr } from "https://crux.land/nanossr@0.0.4";

const render = (component) => ssr(() => <App>{component}</App>);

Deno.serve(router(
  {
    "/": () => render(<Home />),
    "/about": () => render(<About />),
  },
));

function App({ children }) {
  return (
    <div>
      <NavBar />
      {children}
    </div>
  );
}

function NavBar() {
  return (
    <nav>
      <div>
        <a href="/">
          Home
        </a>
      </div>
      <div>
        <a href="/about">
          About
        </a>
      </div>
    </nav>
  );
}

function Home() {
  return (
    <div>
      <span>Home</span>
    </div>
  );
}

function About() {
  return (
    <div>
      <span>About</span>
    </div>
  );
}

This example is taken from this blog post about of a simple portfolio site written in a single JavaScript file. There’s also this more interactive version featuring a web form that’s also contained in a single JavaScript file.

Add State with Deno KV

How about a web app that has some logic? Here’s an example of a link shortening web app using Deno KV for storage in only 23 lines of code:

const kv = await Deno.openKv();

Deno.serve(async (request: Request) => {
  // Create short links
  if (request.method == "POST") {
    const body = await request.text();
    const { slug, url } = JSON.parse(body);
    const result = await kv.set(["links", slug], url);
    return new Response(JSON.stringify(result));
  }

  // Redirect short links
  const slug = request.url.split("/").pop() || "";
  const url = (await kv.get(["links", slug])).value as string;
  if (url) {
    return Response.redirect(url, 301);
  } else {
    const m = !slug ? "Please provide a slug." : `Slug "${slug}" not found`;
    return new Response(m, {
      status: 404,
    });
  }
});

What about Node?

Creating any app with state in Node.js would require a cloud database provider, creating an account, provisioning a database, grabbing the necessary API keys, setting them as environmental variables, before connecting to it and storing data.

Web Frameworks

Many prefer using full-stack web frameworks and meta-frameworks for building websites and applications.

Fresh is a next-gen web framework built for speed, reliability, and simplicity. It uses server-side rendering, sends zero JavaScript to the client by default, and embraces progressive enhancement.

Learn more about why server-side rendering is beneficial for modern web.

SaaSKit builds on top of Fresh to provide features that every modern SaaS app needs — subscription billing, authentication and session management, admin panel, and more. Not only does SaaSKit provide the necessary features for a SaaS, but also it offers a modern development experience with native TypeScript support, Deno’s all-in-one toolchain, and more.

Aleph is a modern React-based full stack framework that makes it easy to build frontends.

Ultra is a modern React-based full stack framework that is built for suspense server side rendering. It fully embraces modern tooling and technologies, such as ESM.

Learn more about Deno-native frameworks.

You can also use Node.js frameworks with Deno:

Learn more about using npm with Deno.

Deploying to Production

Deno Deploy, our global serverless at edge platform, allows you to host and run your server globally across our network close to your users, offering high availability and minimal network latencies.

Hosting your site or app on Deno Deploy is simple and free by connecting a GitHub account.

Learn why the edge is the future of web.

You can also host your Deno server on any platform that runs a VM or VPS with Docker. Here are some guides to help you get started.

Additional Resources

Here are some examples, blog posts, and videos about building static sites and apps with Deno.