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

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

The server is structured to:

1. Handle API routes with Hono
2. Proxy all other requests to the Vite development server

Create val
// 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 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

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