Server-Side Development

Deploying Web Applications

---

So far, we’ve just been playing around with the web applications on our local machines. Let’s change that, and look into deploying an application to an online location with Deno Deploy. Deno Deploy is a platform for hosting web applications.

Accounts and tooling

To start using Deno Deploy, you need to sign up for an account. The sign-up process is straightforward, and requires a GitHub account.

• Create a GitHub account at https://github.com/.
• Create a Deno Deploy account at https://dash.deno.com/.

Once you have created a Deno Deploy account, install the deployctl tool by running the command deno install -A jsr:@deno/deployctl on the commandline.

deno install -Arf jsr:@deno/deployctl
...
✅ Successfully installed deployctl
/path-to-user/.deno/bin/deployctl

Now, once the deployctl command has been installed, we can check that it works.

deployctl --help
deployctl 1.12.0
Command line tool for Deno Deploy.

SUBCOMMANDS:
    deploy      Deploy a script with static files to Deno Deploy
    projects    Manage projects
    deployments Manage deployments
    logs        View logs for the given project
    top         Monitor projects resource usage in real time
    upgrade     Upgrade deployctl to the given version (defaults to latest)
    api         Perform raw HTTP requests against the Deploy API

For more detailed help on each subcommand, use:

    deployctl <SUBCOMMAND> -h

Creating a project

To deploy a project, let’s first create it. Create a new folder and add two files to it, app.js and app-run.js.

• The app.js file will contain the application code and export the application.
• The app-run.js file will be used to run the application.

Save the following code to app.js.

import { Hono } from "jsr:@hono/hono@4.6.5";

const app = new Hono();

app.get("/", (c) => c.text("Hello World!"));

export default app;

And the following code to app-run.js.

import app from "./app.js";

Deno.serve(app.fetch);

You can test running the application using deno run --allow-net --watch app-run.js.

Now, when we run the command curl localhost:8000, we see the response Hello World!.

curl localhost:8000
Hello World!

Deploying the project

To deploy the application, go to the folder with the files and run the command deployctl deploy --entrypoint app.js. This creates a deployment of the project, placing it to an online location. By default, the name for the new project is guessed, and Deno uses the name of the folder to inform the guess.

The output of the command should look something like the following. Below, the actual address for the application has been replaced with “do-not-use-this”.

deployctl deploy --entrypoint app.js
⚠ No project name or ID provided with either the --project arg or a config file.
✔ Guessed project name 'do-not-use-this'.
  ℹ You can always change the project name with 'deployctl projects rename new-name' or in https://dash.deno.com/projects/do-not-use-this/settings
✔ Deploying to project do-not-use-this.
  ℹ The project does not have a deployment yet. Automatically pushing initial deployment to production (use --prod for further updates).
✔ Entrypoint: /path-to-project/app.js
ℹ Uploading all files from the current dir (/path-to-project)
✔ Found 1 asset.
✔ Uploaded 1 new asset.
✔ Production deployment complete.
✔ Created config file 'deno.json'.

View at:
 - https://do-not-use-this.deno.dev
 - https://do-not-use-this-sw4vzhdykpnt.deno.dev

Now, the application is available in the online location indicated in the output (e.g. “https://do-not-use-this.deno.dev”). When we run the command curl https://do-not-use-this.deno.dev, we see the response Hello World!.

curl https://do-not-use-this.deno.dev
Hello World!

Loading Exercise...

Updating the deployment

Updating the deployment is straightforward. Modify the file app.js to match the following, i.e. so that the response is “Hello Web Software Development!” instead of “Hello World!”.

import { Hono } from "jsr:@hono/hono@4.6.5";

const app = new Hono();

app.get("/", (c) => c.text("Hello Web Software Development!"));

export default app;

Once you’ve saved the file, run the command deployctl deploy in the folder that contains the application.

deployctl deploy
ℹ Using config file '/path-to-project/deno.json'
✔ Deploying to project do-not-use-this.
✔ Entrypoint: /path-to-project/app.js
ℹ Uploading all files from the current dir (/path-to-project)
✔ Found 2 assets.
✔ Uploaded 1 new asset.
✔ Preview deployment complete.
ℹ Some of the config used differ from the config found in '/path-to-project/deno.json'. Use --save-config to overwrite it.

View at:
 - https://do-not-use-this-mrt3jv6nyp9k.deno.dev

Now, the application has been updated. The path for the updated application is https://do-not-use-this-mrt3jv6nyp9k.deno.dev.

curl https://do-not-use-this-mrt3jv6nyp9k.deno.dev
Hello Web Software Development!

However, when we visit the original path, https://do-not-use-this.deno.dev, we see that the application has not been updated.

curl https://do-not-use-this.deno.dev
Hello World!

This is because the application is by default deployed to a preview environment.

Updating to production

To update the application to the production version, corresponding to the project name, add the --prod flag to the deploy command.

deployctl deploy --prod
ℹ Using config file '/path-to-project/deno.json'
✔ Deploying to project do-not-use-this.
✔ Entrypoint: /path-to-project/app.js
ℹ Uploading all files from the current dir (/path-to-project)
✔ Found 2 assets.
✔ Uploaded 1 new asset.
✔ Production deployment complete.
ℹ Some of the config used differ from the config found in '/path-to-project/deno.json'. Use --save-config to overwrite it.

View at:
 - https://do-not-use-this-3swg3a5fr86f.deno.dev
 - https://do-not-use-this.deno.dev

Now, the application is updated also to https://do-not-use-this.deno.dev.

curl https://do-not-use-this.deno.dev
Hello Web Software Development!

Loading Exercise...