Deploying a Hono App to Tanzu Application Platform

️⚠️ The content of this article is not supported by VMware. Any issues arising from the content of this article are your responsibility and please do not contact VMware Support.

⚠️ This article was automatically translated by OpenAI (gpt-4-turbo-preview). It may be edited eventually, but please be aware that it may contain incorrect information at this time.

Let's deploy a Hono app to the Tanzu Application Platform.

For the TAP environment, I used the free Developer Sandbox.

Since I want to create a container image with Buildpack, I'll use Node.js as the Runtime.

npm create hono@latest hello-hono

Select nodejs as the template.

create-hono version 0.3.2
✔ Using target directory … hello-hono
✔ Which template do you want to use? › nodejs
cloned honojs/starter#main to /Users/tmaki/git/hello-hono
✔ Copied project files

First, start in development mode.

cd hello-hono
npm install
npm run dev

Access the app.

$ curl localhost:3000
Hello Hono!

Change src/index.ts as follows so that the port the server listens on can be changed using the environment variable PORT.

const port = process.env.PORT ? Number(process.env.PORT) : 3000

Since the template's package.json doesn't have much configuration, add a little more.

$ cat package.json 
{
  "scripts": {
    "dev": "tsx watch src/index.ts"
  },
  "dependencies": {
    "@hono/node-server": "^1.4.1",
    "hono": "^3.12.6"
  },
  "devDependencies": {
    "tsx": "^3.12.2"
  }
}

npm install typescript @types/node --save-dev

Add the following to scripts.

  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  },

Next, set target, module, and outDir in tsconfig.json.

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "target": "es2015",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

Add dist to .gitignore.

echo dist >> .gitignore

Now, use the following command to build and start the app.

npm run build
PORT=8080 npm run start

The following logs will appear.

> build
> tsc


> start
> node dist/index.js

Server is running on port 8080

Access the app.

$ curl localhost:8080
Hello Hono!

If you've made it this far, you're TAP ready. Now, deploy to TAP.

Use Local Source Proxy to deploy the app from local source code.

You can create a list of files to exclude from uploading to TAP in .tanzuignore. Copy .gitignore.

cp .gitignore .tanzuignore

Deploy with the following command.

tanzu apps workload apply hello-hono \
  -n apps \
  --app hello-hono \
  --local-path . \
  --type web \
  --yes

Check the logs with the following command.

tanzu apps workload tail hello-hono --namespace apps --timestamp --since 1h

You can check the status with the following command. If Knative Services shows a URL and it's Ready, you can access the URL.

$ tanzu apps workload get hello-hono --namespace apps                 
📡 Overview
   name:        hello-hono
   type:        web
   namespace:   apps

💾 Source
   type:    source image
   image:   us-central1-docker.pkg.dev/tap-sandbox-dev/tapv-willing-ladybird/lsp:apps-hello-hono@sha256:14557ab9cfa5a6990b0ab25f88210c74693a5c26fe30476f591f73a3cb4d7214

📦 Supply Chain
   name:   source-to-url

   NAME               READY   HEALTHY   UPDATED   RESOURCE
   source-provider    True    True      7m19s     imagerepositories.source.apps.tanzu.vmware.com/hello-hono
   image-provider     True    True      5m51s     images.kpack.io/hello-hono
   config-provider    True    True      5m47s     podintents.conventions.carto.run/hello-hono
   app-config         True    True      5m47s     configmaps/hello-hono
   service-bindings   True    True      5m47s     configmaps/hello-hono-with-claims
   api-descriptors    True    True      5m47s     configmaps/hello-hono-with-api-descriptors
   config-writer      True    True      5m39s     taskruns.tekton.dev/hello-hono-config-writer-hrhsc

🚚 Delivery
   name:   delivery-basic

   NAME              READY   HEALTHY   UPDATED   RESOURCE
   source-provider   True    True      5m14s     imagerepositories.source.apps.tanzu.vmware.com/hello-hono-delivery
   deployer          True    True      5m7s      apps.kappctrl.k14s.io/hello-hono

💬 Messages
   No messages found.

🛶 Pods
   NAME                                           READY   STATUS      RESTARTS   AGE
   hello-hono-00001-deployment-8556dcd768-k2n8n   2/2     Running     0          26s
   hello-hono-build-1-build-pod                   0/1     Completed   0          7m19s
   hello-hono-config-writer-hrhsc-pod             0/1     Completed   0          5m47s

🚢 Knative Services
   NAME         READY   URL
   hello-hono   Ready   https://hello-hono-apps.tapv-willing-ladybird.tapsandbox.com

To see logs: "tanzu apps workload tail hello-hono --namespace apps --timestamp --since 1h"

$ curl https://hello-hono-apps.tapv-willing-ladybird.tapsandbox.com
Hello Hono!

The source code up to this point is placed at https://github.com/making/hello-hono.

If you want to deploy from Git source code, you can do so with the following command.

tanzu apps workload apply hello-hono \
  -n apps \
  --app hello-hono \
  --git-repo https://github.com/making/hello-hono \
  --git-branch main \
  --type web

IK.AM

Deploying a Hono App to Tanzu Application Platform