Add missing serve-static example and update README (#226)

erik-beus · web-flow · commit 89e91acbf646 · 2025-03-04T16:37:16.000+09:00
* Add missing serve-static example and update README

* Add space before closing bracket

* Remove irrelevant test file

* Remove irrelevant test file and test command
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ This repository contains examples that use [Hono](https://hono.dev).
 - [env-vars](./env-vars/) - example using environment variables with Hono in Typescript: `Bindings` & `Variables`
 - [jsx-ssr](./jsx-ssr/) - JSX Server Side Rendering with `JSX` Middleware
 - [hono-vite-jsx](./hono-vite-jsx/) - Example of using `hono/jsx/dom` with `vite`
-- [serve-static](./serve-static/) - example of `Serve Static` Middleware
+- [serve-static](./serve-static/) - example of serving static files using Cloudflare Workers
 - [deno](./deno/) - Deno example
 - [bun](./bun/) - Bun example
 - [pages-stack](./pages-stack/) - Zod + Zod Validator + `hc` + React on Cloudflare Pages
diff --git a/serve-static/README.md b/serve-static/README.md
@@ -0,0 +1,13 @@
+# Hono static file example for Cloudflare Workers
+
+This example demonstrates how to serve static files using Cloudflare Workers. Please learn more in the [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#serve-static-files) and [Cloudflare Workers documentation](https://developers.cloudflare.com/workers/static-assets/binding/#directory).
+
+Before you can start publishing your service to cloudflare worker, you must sign up for a Cloudflare Workers account first, you can check out this [document](https://developers.cloudflare.com/workers/get-started/guide)
+
+You can update the information (`name`, `zone_id`, etc) in wrangler file, then you can test and deploy your service by simply doing,
+
+```txt
+npm install
+npm run dev # Start a local server for developing your worker
+npm run deploy # Publish your worker to the orange cloud
+```
diff --git a/serve-static/assets/folder/nested-file.txt b/serve-static/assets/folder/nested-file.txt
@@ -0,0 +1 @@
+This is a nested sample file
diff --git a/serve-static/assets/my-file.txt b/serve-static/assets/my-file.txt
@@ -0,0 +1 @@
+This is a sample file
diff --git a/serve-static/package.json b/serve-static/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "serve-static",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "wrangler dev src/index.ts",
+    "deploy": "wrangler deploy src/index.ts"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "hono": "^4.2.4"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240405.0",
+    "vitest": "^1.5.0",
+    "wrangler": "^3.53.0"
+  }
+}
diff --git a/serve-static/src/index.ts b/serve-static/src/index.ts
@@ -0,0 +1,29 @@
+import { Hono } from "hono";
+import { poweredBy } from "hono/powered-by";
+
+const app = new Hono();
+
+// Mount Builtin Middleware
+app.use("*", poweredBy());
+
+// Routing
+app.get("/", (c) =>
+  c.html(
+    `<html lang="en">
+      <head>
+      <title>Hono</title>
+    </head>
+    <body>
+      <h1>Welcome to Hono</h1>
+      <p>
+        Try visiting: <a href="/my-file.txt">/my-file.txt</a> and <a href="/folder/nested-file.txt">/folder/nested-file.txt</a>
+      </p>
+      <p>
+        Learn more about serving static files in Hono <a target="_blank" href="https://hono.dev/docs/getting-started/cloudflare-workers#serve-static-files">here</a>
+      </p>
+    </body>
+  </html>`
+  )
+);
+
+export default app;
diff --git a/serve-static/tsconfig.json b/serve-static/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "lib": [
+      "ESNext"
+    ],
+    "types": [
+      "vitest/globals",
+      "@cloudflare/workers-types"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  },
+}
diff --git a/serve-static/wrangler.toml b/serve-static/wrangler.toml
@@ -0,0 +1,4 @@
+name = "hono-example-basic"
+compatibility_date = "2024-09-19"
+
+assets = { directory = "./assets/" }
