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);

If you encounter issues:

1. Check the server logs: Look for error messages in the console
2. Verify import paths: Make sure all imports use the correct format (npm: prefix)
3. Check for duplicate exports: Ensure there are no duplicate export statements
4. Content types: Make sure content types are correctly set for all assets

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