Deno Deploy allows you to host your Deno applications on a global edge network,with built in telemetry and CI/CD tooling.

This tutorial guides you through creating and deploying a simple Denoapplication using Deno Deploy.

PrerequisitesJump to heading#

1. AGitHub account
2. Deno installedon your local machine
3. ADeno Deploy account

Create a simple Deno application with ViteJump to heading#

First, let's create a basic application with Vite, initialize a newVite project:

deno init--npm vite

Give your project a name and select your framework and variant. For thistutorial, we'll create a vanilla TypeScript app.

Change directory to your newly created project name withcd my-project-namethen run:

denoinstalldeno run dev

You should see a basic app running athttp://127.0.0.1:5173/.

You can edit themain.ts file to see changes in the browser.

Create a GitHub repositoryJump to heading#

1. Go toGitHub and create a new repository.

2. Initialize your local directory as a Git repository:

git initgitadd.git commit-m"Initial commit"

3. Add your GitHub repository as a remote and push your code:

git remoteadd origin https://github.com/your-username/my-first-deno-app.gitgit branch-M maingit push-u origin main

Create a Deno Deploy organizationJump to heading#

1. Navigate toconsole.deno.com
2. Click "+ New Organization"
3. Select the 'Standard Deploy' organization type
4. Enter an organization name and slug (this cannot be changed later)
5. Click "Create Standard Deploy organization"

Create and deploy your applicationJump to heading#

1. Click "+ New App"

2. Select the GitHub repository you created earlier

3. The app configuration should be automatically detected, but you can verifythese settings by clicking the "Edit build config" button:

   • Framework preset: No preset
   • Runtime configuration: Static Site
   • Install command:deno install
   • Build command:deno task build
   • Static Directory:dist

4. Click "Create App" to start the deployment process

Monitor your deploymentJump to heading#

1. Watch the build logs as your application is deployed
2. Once deployment completes, you'll see a preview URL (typicallyhttps://your-app-name.your-org-name.deno.net)
3. Click the URL to view your deployed application!

Make changes and redeployJump to heading#

Let's update the application and see how changes are deployed:

Update yourmain.ts file locally:

import'./style.css'import typescriptLogofrom'./typescript.svg'import viteLogofrom'/vite.svg'import{ setupCounter}from'./counter.ts'document.querySelector<HTMLDivElement>('#app')!.innerHTML= `<div><a href="https://vite.dev" target="_blank"><img src="${viteLogo}"class="logo" alt="Vite logo"/></a><a href="https://www.typescriptlang.org/" target="_blank"><img src="${typescriptLogo}"class="logo vanilla" alt="TypeScript logo"/></a><h1>Hello from Deno Deploy!</h1><divclass="card"><button id="counter" type="button"></button></div><pclass="read-the-docs">      Click on the Vite and TypeScript logos to learn more</p></div>setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

2. Commit and push your changes:

gitadd.git commit-m"Update application"git push

Return to your Deno Deploy dashboard to see a new build automatically start.Once the build completes, visit your application URL to see the update.

Explore observability featuresJump to heading#

Deno Deploy provides comprehensive observability tools:

1. From your application dashboard, click "Logs" in the sidebar

   • You'll see console output from your application
   • Use the search bar to filter logs (e.g.,context:production)

2. Click "Traces" to view request traces

   • Select a trace to see detailed timing information
   • Examine spans to understand request processing

3. Click "Metrics" to view application performance metrics

   • Monitor request counts, error rates, and response times

🦕 Now that you've deployed your first application, you might want to:

1. Add a custom domain to your application
2. Exploreframework support for Next.js,Astro, and other frameworks
3. Learn aboutcaching strategies to improveperformance
4. Set up differentenvironments fordevelopment and production