How to Use Deno Deploy with Astro: Complete Guide
Step-by-step guide to integrating Deno Deploy with your Astro website.
Deno Deploy is a serverless platform for deploying JavaScript and TypeScript at the edge. It runs your code on Deno's global network of edge servers, meaning your Astro site responds from the nearest location to each visitor. The result is extremely low latency. Astro has an official Deno adapter, which makes this one of the smoother deployment integrations available.
What makes Deno Deploy different from traditional Node.js hosting is that it uses the Deno runtime instead of Node. This means native TypeScript support, a security-first permissions model, and Web Standard APIs built in. For SSR Astro sites, this translates to fast cold starts and efficient edge rendering.
Prerequisites
- Node.js 18+ (for local Astro development)
- Deno installed locally (optional, for testing:
curl -fsSL https://deno.land/install.sh | sh) - An Astro project (
npm create astro@latest) - A Deno Deploy account (free tier available, Pro at $20/mo)
- Your project in a GitHub repository
Installation
Install the official Astro Deno adapter:
npm install @astrojs/deno
Note: Even though you develop with npm/Node locally, the Deno adapter ensures your built output runs on the Deno runtime in production.
Configuration
Update your Astro config to use the Deno adapter:
// astro.config.mjs
import { defineConfig } from "astro/config";
import deno from "@astrojs/deno";
export default defineConfig({
output: "server",
adapter: deno(),
});
If you want a hybrid approach with mostly static pages and some server-rendered routes:
// astro.config.mjs
import { defineConfig } from "astro/config";
import deno from "@astrojs/deno";
export default defineConfig({
output: "hybrid",
adapter: deno(),
});
Now connect your project to Deno Deploy:
- Go to dash.deno.com and create a new project
- Connect your GitHub repository
- Set the entry point to
dist/server/entry.mjs - Set the build command to
npm run build
Alternatively, use the deployctl CLI:
# Install deployctl
deno install -A --no-check -r -f https://deno.land/x/deploy/deployctl.ts
# Deploy
deployctl deploy --project=your-project-name dist/server/entry.mjs
Environment variables are set in the Deno Deploy dashboard under your project's settings:
# In Deno Deploy Dashboard > Settings > Environment Variables
SITE_URL=https://yourdomain.com
API_KEY=your-api-key
Basic Usage
With the Deno adapter configured, your Astro site works the same way during development. The differences only show up in production. Write your pages and components normally:
---
// src/pages/index.astro
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Home">
<h1>Hello from the edge</h1>
<p>This page is served from the nearest Deno Deploy edge location.</p>
</BaseLayout>
Server-rendered API routes work as expected:
// src/pages/api/time.ts
import type { APIRoute } from "astro";
export const GET: APIRoute = async ({ request }) => {
const url = new URL(request.url);
return new Response(
JSON.stringify({
time: new Date().toISOString(),
region: Deno.env.get("DENO_REGION") || "unknown",
}),
{
status: 200,
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache",
},
}
);
};
Dynamic pages with server-side data fetching:
---
// src/pages/posts/[slug].astro
export const prerender = false; // Server-rendered at request time
const { slug } = Astro.params;
const response = await fetch(`https://api.example.com/posts/${slug}`);
const post = await response.json();
if (!post) {
return Astro.redirect("/404");
}
---
<html>
<head><title>{post.title}</title></head>
<body>
<h1>{post.title}</h1>
<div set:html={post.content} />
</body>
</html>
The build and deploy process:
# Build locally
npm run build
# Deploy to Deno Deploy (happens automatically on git push if connected)
git add .
git commit -m "Deploy to edge"
git push origin main
Production Tips
Use the hybrid output mode. Not every page needs server rendering. Set
output: "hybrid"and addexport const prerender = trueto pages that can be static. This reduces edge compute costs and improves response times for static content.Take advantage of edge caching. Add appropriate
Cache-Controlheaders to your responses. Even SSR pages can benefit from short cache durations (30-60 seconds) to reduce cold starts during traffic spikes.Use Deno's built-in KV store. Deno Deploy includes Deno KV, a globally distributed key-value database. Use it for session storage, rate limiting, or caching API responses without adding an external database.
Monitor cold start times. Edge functions have cold starts. Keep your dependencies minimal and avoid importing large libraries in server-rendered routes. The lighter your server bundle, the faster cold starts will be.
Set up preview deployments. Deno Deploy creates preview URLs for pull requests automatically when connected to GitHub. Use these for testing before merging to production.
Alternatives to Consider
- Cloudflare Pages if you want edge deployment with a larger ecosystem of Workers, KV, and D1 database integrations.
- Vercel if you prefer a more established platform with built-in image optimization and middleware support for Astro.
- Netlify if you want edge functions with a broader feature set including forms, identity, and background functions.
Wrapping Up
Deno Deploy gives Astro sites true edge computing with minimal configuration thanks to the official adapter. Your SSR pages render at the edge location closest to each visitor, which is hard to beat for global audiences. The free tier is generous enough for personal projects and small businesses, and the deployment workflow through GitHub is seamless. If you are building an SSR or hybrid Astro site and want the fastest possible response times worldwide, Deno Deploy is one of the most compelling options available.
Related Articles
How to Use Algolia with Astro: Complete Guide
Step-by-step guide to integrating Algolia with your Astro website.
How to Integrate Auth0 with Astro: Complete Guide
Step-by-step guide to integrating Auth0 with your Astro website. Setup, configuration, and best practices.
How to Use AWS Amplify with Astro: Complete Guide
Step-by-step guide to integrating AWS Amplify with your Astro website.