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:
The server is structured to:
// 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 messageThe client-side code uses Hono's client utilities to make API requests and React for rendering the UI.