---
title: Deploying a Hono App to Tanzu Application Platform
tags: ["Kubernetes", "Tanzu", "TAP", "Hono", "Node.js", "TypeScript"]
categories: ["Dev", "CaaS", "Kubernetes", "TAP"]
date: 2024-01-23T04:04:44Z
updated: 2024-01-23T04:07:01Z
---

> ⚠️ 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](https://hono.dev) app to the [Tanzu Application Platform](https://tanzu.vmware.com/application-platform).

For the TAP environment, I used the free [Developer Sandbox](https://tanzu.academy/guides/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`.

```js
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
```