A Vite project running on Val Town with Hono for API routes and server-side rendering. The server.tsx serves the project and handles both static assets and API requests.

This project uses:

• Vite: For bundling and development
• Deno: As the runtime environment
• React: For UI components
• Hono: For server-side routing and API endpoints
• TypeScript: For type safety

The application has two main components:

1. Server-side (Hono): Handles API requests and server-side rendering

   • Defined in src/index.tsx
   • Exports a Hono app that handles routes and API endpoints

2. Client-side (React): Provides interactive UI components

   • Defined in src/client.tsx
   • Uses Hono's client to communicate with the API

The server handles requests in two ways:

1. Static assets: Proxied to the Vite build server

Create val
// For static assets (JS, CSS, etc.)
if (url.pathname.startsWith("/static/") || url.pathname.endsWith(".js")) {
  const path = `/${projectVal.username}/${projectVal.name}@${projectVal.version}${url.pathname}`;
  const proxyUrl = new URL(path, "https://vite-proxy.ng-demo.valtown.net").toString();
  const response = await fetch(proxyUrl);
  // ...return the response
}

2. API and page routes: Handled by the Hono app

Create val
// For API and page routes
return app.fetch(req);

When a request for static assets is received, the proxy downloads the project source and builds it using Deno. Once the build is complete, all resulting files are cached and served quickly for future requests.

To make changes:

1. Edit the Hono routes in src/index.tsx
2. Update client-side components in src/client.tsx
3. The server will rebuild on the next request