DEV Community

loading...
Cover image for a first look at deno deploy

a first look at deno deploy

anthony-campolo
full stack web dev
・4 min read

Deno Deploy is a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide. It is a multi-tenant JavaScript engine running in 25 data centers across the world that integrates cloud infrastructure with the V8 virtual machine, allowing users to quickly script distributed HTTPS servers.

Create Deno script

Create an index.js file for our function which will respond to all incoming HTTP requests with plain text and a 200 OK HTTP status.

touch index.js
Enter fullscreen mode Exit fullscreen mode

Deno Deploy lets you listen for incoming HTTP requests using the same FetchEvent API used in Service Workers.

// index.js

addEventListener("fetch", (event) => {
  event.respondWith(
    new Response("ajcwebdev-deno", {
      status: 200,
      headers: {
        "content-type": "text/plain"
      },
    }),
  )
})
Enter fullscreen mode Exit fullscreen mode

This API works by registering a listener using the global addEventListener, with the event type fetch. The second parameter provided to addEventListener is a callback that is called with a FetchEvent property for every request.

Create GitHub repo

Go to repo.new and create a new repository.

git init
git add .
git commit -m "Just a denonstration"
git remote add origin https://github.com/ajcwebdev/ajcwebdev-deno.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Install the Deno Deploy GitHub App

We will be deploying this script from a URL on GitHub. Install the Deno Deploy GitHub App.

01-deno-deploy-github-app

Deploy Deno script

Sign up for a Deno Deploy account and connect the account to your GitHub. You will be taken to a page for your projects.

02-deno-deploy-projects

Create Deno Deploy Project

Click "New Project" and enter a name for your project.

03-create-a-new-project

After creating your project you can use the hello world example template or deploy a simple chat server with the BroadcastChannel API.

04-ajcwebdev-deno-project-page

Connect GitHub repository

Scroll down to connect the GitHub repository we just created.

05-deploy-from-github

Paste the raw GitHub url for your function.

06-git-integration

Go to ajcwebdev-deno.deno.dev.

07-ajcwebdev-deno-dev

You can use the project overview page to review your project's settings, add/remove domains, or view the deployment logs.

08-project-overview-page

Send HTML and JSX

Change content-type to text/html and include an <h2> header in the Response.

// index.js

addEventListener("fetch", (event) => {
  event.respondWith(
    new Response("<h2>ajcwebdev-deno</h2>", {
      status: 200,
      headers: {
        "content-type": "text/html"
      },
    }),
  )
})
Enter fullscreen mode Exit fullscreen mode

09-html-hello-world

Deno Deploy supports JSX (and TSX) out of the box so you don't need an additional transform step. It is important that you use .jsx or .tsx file extensions for Deno Deploy to transform JSX code.

mv index.js index.jsx
Enter fullscreen mode Exit fullscreen mode

Deno Deploy uses the h factory function instead of React.createElement. renderToString generates an html string from JSX components.

import { h } from "https://x.lcas.dev/preact@10.5.12/mod.js"
import { renderToString } from "https://x.lcas.dev/preact@10.5.12/ssr.js"

function App() {
  return (
    <html>
      <head>
        <title>ajcwebdev-deno</title>
      </head>
      <body>
        <h1>ajcwebdev-deno</h1>
      </body>
    </html>
  )
}

addEventListener("fetch", (event) => {
  const response = new Response(
    renderToString(<App />), {
      headers: {
        "content-type": "text/html; charset=utf-8"
      },
    }
  )
  event.respondWith(response)
})
Enter fullscreen mode Exit fullscreen mode

You will need to unlink and link the GitHub URL in your project since we changed the file name.

10-jsx-hello-world

Test locally with deployctl

With deployctl you can run your Deno Deploy scripts on your local machine. Your scripts are run in the Deno CLI, with the correct TypeScript types for Deno Deploy.

Install deployctl

If you already have Deno installed then deployctl can be installed using the following command.

deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -f https://deno.land/x/deploy/deployctl.ts
Enter fullscreen mode Exit fullscreen mode

Set the PATH variable with your own name instead of ajcwebdev.

export PATH="/Users/ajcwebdev/.deno/bin:$PATH"
Enter fullscreen mode Exit fullscreen mode

You can run your script like it would run on Deno Deploy.

deployctl run https://raw.githubusercontent.com/ajcwebdev/ajcwebdev-deno/master/index.jsx
Enter fullscreen mode Exit fullscreen mode
Listening on http://0.0.0.0:8080
Enter fullscreen mode Exit fullscreen mode

11-deployctl-run

For local development, you can also add the --watch flag to automatically restart the script when any modules in the module graph change.

deployctl run --watch https://raw.githubusercontent.com/ajcwebdev/ajcwebdev-deno/master/index.js
Enter fullscreen mode Exit fullscreen mode

Discussion (0)