Web Development

Deno offers a secure and developer-friendly environment for building web applications, making your web dev a delightful experience.

1. Deno has secure defaults, meaning it requires explicit permission for file, network, and environment access, reducing the risk of security vulnerabilities.
2. Deno has built-in TypeScript support, allowing you to write TypeScript code without additional configuration or tooling.
3. Deno comes with a standard library that includes modules for common tasks like HTTP servers, file system operations, and more.

Most likely, if you're building a more complex application, you'll be interacting with Deno through a web framework.

React/Next Jump to heading#

React is a popular JavaScript library for building user interfaces. To use React with Deno, you can use the popular web framework Next.js.

To get started with Next.js in Deno, you can create a new next app and run it immediately with Deno:

deno run -A npm:create-next-app@latest my-next-app
cd my-next-app
deno task dev

This will create a new Next.js app with TypeScript and run it with Deno. You can then open your browser to http://localhost:3000 to see your new app, and start editing page.tsx to see your changes live.

Fresh Jump to heading#

Fresh is the most popular web framework for Deno. It uses a model where you send no JavaScript to clients by default.

To get started with a Fresh app, you can use the following command and follow the cli prompts to create your app:

deno run -A -r https://fresh.deno.dev
cd my-fresh-app
deno task start

This will create a new Fresh app and run it with Deno. You can then open your browser to http://localhost:8000 to see your new app. Edit /routes/index.tsx to see your changes live.

Fresh does the majority of its rendering on the server, and the client is only responsible for re-rendering small islands of interactivity. This means the developer explicitly opts in to client side rendering for specific components.

Astro Jump to heading#

Astro is a static site generator that allows developers to create fast and lightweight websites.

To get started with Astro, you can use the following command to create a new Astro site:

deno run -A npm:create-astro my-astro-site
cd my-astro-site
deno task dev

This will create a new Astro site and run it with Deno. You can then open your browser to http://localhost:4321 to see your new site. Edit /src/pages/index.astro to see your changes live.

Vite Jump to heading#

Vite is a web dev build tool that serves your code via native ES modules, which can be run directly in the browser. Vite is a great choice for building modern web applications with Deno.

To get started with Vite, you can use the following command to create a new Vite app:

deno run -A npm:create-vite@latest
cd my-vite-app
deno install
deno task dev

Lume Jump to heading#

Lume is a static site generator for Deno that is inspired by other static site generators such Jekyll or Eleventy.

To get started with Lume, you can use the following command to create a new Lume site:

mkdir my-lume-site
cd my-lume-site
deno run -A https://lume.land/init.ts
deno task serve

Docusaurus Jump to heading#

Docusaurus is a static site generator that is optimized for technical documentation websites.

To get started with Docusaurus, you can use the following command to create a new Docusaurus site:

deno run -A npm:create-docusaurus@latest my-website classic
cd my-website
deno task start

Hono Jump to heading#

Hono is a light-weight web app framework in the tradition of Express and Sinatra.

To get started with Hono, you can use the following command to create a new Hono app:

deno run -A npm:create-hono@latest
cd my-hono-app
deno task start

This will create a new Hono app and run it with Deno. You can then open your browser to http://localhost:8000 to see your new app.

Oak Jump to heading#

Oak is a middleware framework for handling HTTP with Deno. Oak is the glue between your frontend application and a potential database or other data sources (e.g. REST APIs, GraphQL APIs).

Oak offers additional functionality over the native Deno HTTP server, including a basic router, JSON parser, middlewares, plugins, etc.

To get started with Oak, make a file called server.ts and add the following:

import { Application } from "jsr:@oak/oak/application";
import { Router } from "jsr:@oak/oak/router";

const router = new Router();
router.get("/", (ctx) => {
  ctx.response.body = `<!DOCTYPE html>
    <html>
      <head><title>Hello oak!</title><head>
      <body>
        <h1>Hello oak!</h1>
      </body>
    </html>
  `;
});

const app = new Application();
const port = 8080;

app.use(router.routes());
app.use(router.allowedMethods());
console.log(`Server running on http://localhost:${port}`);

app.listen({ port: port });

Run the server with the following command:

deno run --allow-net server.ts

Node projects Jump to heading#

Deno will run your Node.js projects out the box. Check out our guide on migrating your Node.js project to Deno.