Deno Deploy Early Access

Simple and effective

Vercel has for a really long time been the benchmark for DX when it comes to deploying WebApps, even back in the now.sh days. I’ve used Deno Deploy for about as long as it’s been out, mainly for back office apps built as playgrounds. With the new experience now available I thought I’d move some of the playgrounds (and semi-real apps) to the early access experience.

Most of all I’m excited by the default access to: metrics, logs, and traces since OTEL is now built into Deno.

The most negative thing at this moment is the lack of European data centers, only 2 locations so far and both are in the US, but that’ll come soon I’m sure 🤞.

Migrating my Astro-site from vercel

This is basically just the default Astro blog template so nothing really interesting about that.

Migration was nonetheless a breeze. Upgrade Astro packages and add the Deno adapter and bam, we’re off to the races. Easy peasy.

Somewhat harder was getting my custom domains to work (using Cloudflare) but that was all on me since I had a 5-year old worker that I set up for redirection back then and that did not let any traffic through to Deno. The docs for configuring the domain were straightforward and had everything I needed to get going.

The Observability Dream

This is where I get really happy. The moment my site went live, I had access to:

  • Logs: Real-time, searchable, and actually useful, connected to the parent trace in which the log occurred.
  • Metrics: Performance insights with the things that interest me most.
  • Traces: Because sometimes you need to know exactly where that extra 200ms is hiding

All of this comes out of the box. No third-party integrations, no complex setup, no nothing. I love how the Deno team keeps delivering on their promise to make web development simpler again.

Playgrounds: My favorite toy and efficiency tool ✨

When I first tried the EA experience Playgrounds wasn’t there, but now it is and I love the fast-track to value that it encompasses.

Imagine this: You have a brilliant idea for a quick API or WebApp you want to test to make something in your ordinary (work-) life easier. Usually, you’d need to:

  1. Create a new repository
  2. Set up the project structure
  3. Configure deployment
  4. Cross your fingers and deploy
  5. Debug why it doesn’t work
  6. Repeat steps 4-5 until you question your life choices

With Deno Deploy playgrounds (especially in EA where we can add multiple files), you literally just start coding. No git repos, no setup ceremony, no deployment configuration. Just pure, unadulterated coding joy, and value (which is what really matters).

In my day-to-day work I’ve created apps like:

  • a proxy and cache API that serves data to ObservableHQ from Toggl in order for me to draw graphs over my salary predictions and historical data.
  • experiment with Hono+Deno for server-side rendered OG-tags (and other social media metadata) to replace our old link-renderer that used Puppeteer. This project was later moved to GitLab/K8S to live inside our (workplace) infrastructure but the fact that I could get going and test the idea so fast was amazing.
  • an SSR graph rendering app for Slack that uses data from PostHog to post daily updates to our channels.
  • a very simple form app where we can enter a customer identifier and it returns a list of links to where on our internal systems we can find Quality of Service data for the user in question, without having to remember how we hash the user-ids, or remember URL filters we use in other services.
  • a web page that renders all graphics we’re supposed to have, in all the formats they are supposed to exist in, for our designers to quickly visually check that we actually have all the static assets we need for our content

The list goes on, but this has saved me so much time and delivered value without going through the hoops of configuring repos and K8S deployments.

Deno + Hono + JSX: A keep-it-simple-stupid’s dream

The fact that Deno, in a sense, first removes the build step (specifically for TypeScript) and lets me focus on the value I’m delivering has always drawn me to it. Second, having the unified toolbelt at your fingertips (in regards to linting, formatting etc) that VoidZero, Oxc and Biome are working really hard to solve for everyone is really something.

When I then realized that Hono, which is a beautiful and simple web framework that you use to replace Express, supports JSX without almost any setup, I really fell in love. When they also deliver pretty much all of the middleware I’m interested in out of the box, life suddenly felt easy. Cache, Auth, JWT, CORS, CSRF, Logger, Pretty JSON, Server Timings and more 🤩

Here’s a simple example on how to configure Hono for SSR JSX.

TS config in tsconfig.json or deno.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'

const app = new Hono()

// A simple JSX component - no build step needed!
const Layout: FC = (props) => (
  <html>
    <head>
      <style>{`
        body { 
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          max-width: 800px;
          margin: 0 auto;
          padding: 2rem;
          line-height: 1.6;
        }
        .card {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 1.5rem;
          margin: 1rem 0;
          border-left: 4px solid #0070f3;
        }
      `}</style>
    </head>
    <body>{children}</body>
  </html>
)

app.get('/', (c) => {
  return c.html(
    <Layout>
      <h1>🦕 Welcome to Deno Deploy EA!</h1>
      <div class="card">
        <h3>Why I Love This Platform:</h3>
        <ul>
          <li>Built-in observability (logs, metrics, traces)</li>
          <li>No-setup playgrounds for rapid prototyping</li>
          <li>JSX support out of the box</li>
          <li>Lightning-fast cold starts</li>
        </ul>
      </div>
    </Layout>
  )
});

export default app

It’s not groundbreaking, it’s not unheard of, but - that this is all I need to get going with async SSR components, island architecture and everything is just beautifully elegant to me.

For me one thing is sure, this is where I want to move all my personal projects in order to keep them simple and fun but still enjoy features like logging, traces and metrics. Hopefully I’ll even get to move some projects from work in order to get at the preview deployments.

Getting Started

If you’re curious about trying Deno Deploy EA yourself:

  1. Head to dash.deno.com and join the Early Access program
  2. Visit app.deno.com to access the new dashboard
  3. Create your first organization and app
  4. Connect your GitHub repo or start playing in the playground

Whether you’re migrating an existing project or starting something new, the experience is refreshingly smooth. And hey, if you’re working with Hono and JSX, you’re in for a particularly good time.

Happy deploying! 🦕✨

Have questions about the migration process or want to share your own Deno Deploy EA experiences? Feel free to reach out!