Vite + Deno + React + TypeScript + Hono + Val Town

A Vite project running on Val Town with Hono integration. The server.tsx serves the project and handles API routes using Hono while proxying frontend requests to the Vite development server. If you make any edits, the server will rebuild on the next request. All code is built using Deno on a separate build+proxy server. You can view the source here: https://github.com/maxmcd/vite-proxy

Architecture

This project uses:

  • Hono: For API routes and server-side rendering
  • Vite: For frontend development and hot module replacement
  • React: For the UI components
  • TypeScript: For type safety

Server Implementation

The server is structured to:

  1. Handle API routes with Hono
  2. Proxy all other requests to the Vite development server
// Create a main Hono app that will handle both API routes and proxy to Vite const mainApp = new Hono(); // Mount the Hono app from src/index.tsx to handle API routes mainApp.route("/api", app); // For all other routes, use the Vite proxy mainApp.all("*", async (c) => { const url = new URL(c.req.url); const path = `/${projectVal.username}/${projectVal.name}@${projectVal.version}${url.pathname}`; const proxyUrl = new URL(path, "https://vite-proxy.ng-demo.valtown.net").toString(); // Proxy the request to the Vite server const response = await fetch(proxyUrl, { method: c.req.method, headers: c.req.headers, body: ["GET", "HEAD"].includes(c.req.method) ? undefined : await c.req.blob(), }); // Return the response with the correct content type return new Response(response.body, { status: response.status, headers: { ...Object.fromEntries(response.headers), "content-type": getContentType(url.pathname), }, }); });

When a request is received, the proxy downloads the entire project source (it can't be private) and builds it using Deno. Once the build is complete, all resulting files are cached and served quickly for future requests.

API Routes

API routes are defined in src/index.tsx and are accessible under the /api path:

  • /api/clock - Returns the current server time
  • /api/hello - Returns a hello message

Client-Side

The client-side code uses Hono's client utilities to make API requests and React for rendering the UI.