Hono + Deno + Val Town

A simple project demonstrating how to use Hono with Deno in Val Town. This project provides server-side rendering with Hono and client-side interactivity with vanilla JavaScript.

Architecture

This project uses:

Deno: As the runtime environment
Hono: For server-side routing and API endpoints
ESM.sh: For importing dependencies

How it works

The application has two main components:

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
Client-side (JavaScript): Provides interactive UI components
- Embedded directly in the HTML
- Uses Hono's client to communicate with the API

Server implementation

The server uses Hono to handle all requests:

Create val
// API routes
app.get("/api/clock", (c) => {
  return c.json({
    time: new Date().toLocaleTimeString(),
  });
});

// Main page route
app.get("/", (c) => {
  return c.html(`
    <!DOCTYPE html>
    <html lang="en">
      <!-- HTML content with embedded JavaScript -->
    </html>
  `);
});

Key Features

Direct ESM imports: Using esm.sh for all dependencies
Embedded client code: JavaScript is embedded directly in the HTML
Simple API: Demonstrates basic API functionality with Hono
No build step: Everything runs directly without a build process

Troubleshooting

If you encounter issues:

Check the server logs: Look for error messages in the console
Verify import paths: Make sure all imports use esm.sh URLs
Browser console: Check for client-side errors in the browser console

Development

To make changes:

Edit the Hono routes in src/index.tsx
Update client-side code in the embedded script
The server will handle the changes on the next request

vawogbemi