Fullstack Application #

import { createServer } from "verb";
import homepage from "./frontend/index.html";
import { userHandlers } from "./api/users";
import { setupWebSocket } from "./api/websocket";

const app = createServer();

// Configure Bun native routes
app.withRoutes({
  // HTML imports - Bun handles bundling automatically
  "/": homepage,
  
  // API routes
  "/api/users": userHandlers,
  "/api/users/:id": userHandlers.byId,
  
  // Health check
  "/api/health": {
    GET: () => Response.json({ 
      status: "healthy", 
      timestamp: new Date().toISOString() 
    })
  },
  
  // WebSocket endpoint info
  "/api/ws-info": {
    GET: () => Response.json({
      wsUrl: "ws://localhost:3000/ws",
      protocols: ["chat", "notifications"]
    })
  }
});

// Configure development options
app.withOptions({
  port: 3000,
  hostname: "localhost",
  development: {
    hmr: true,      // Hot module reloading
    console: true   // Enhanced console logging
  },
  showRoutes: true  // Show routes on startup
});

// Setup WebSocket for real-time features
setupWebSocket(app);

// Start server
app.listen();

console.log("🚀 Fullstack app running on http://localhost:3000");
console.log("Features:");
console.log("  - HTML imports with automatic bundling");
console.log("  - React with TypeScript");
console.log("  - CSS bundling");
console.log("  - Hot module reloading");
console.log("  - Real-time WebSocket communication");

import { store } from "../data/store";
import { broadcastMessage } from "./websocket";

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: string;
}

export const userHandlers = {
  // GET /api/users
  async GET(req: Request) {
    const users = store.getUsers();
    return Response.json(users);
  },

  // POST /api/users
  async POST(req: Request) {
    try {
      const { name, email } = await req.json();

      if (!name || !email) {
        return Response.json(
          { error: "Name and email are required" },
          { status: 400 }
        );
      }

      // Validate email format
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        return Response.json(
          { error: "Invalid email format" },
          { status: 400 }
        );
      }

      const user: User = {
        id: Date.now().toString(),
        name,
        email,
        createdAt: new Date().toISOString(),
      };

      store.addUser(user);

      // Broadcast to WebSocket clients
      broadcastMessage({
        type: "user_created",
        data: user,
        timestamp: new Date().toISOString(),
      });

      return Response.json(user, { status: 201 });
    } catch (error) {
      return Response.json(
        { error: "Invalid JSON" },
        { status: 400 }
      );
    }
  },

  // Individual user handlers
  byId: {
    // GET /api/users/:id
    async GET(req: Request) {
      const { id } = req.params;
      const user = store.getUser(id);

      if (!user) {
        return Response.json(
          { error: "User not found" },
          { status: 404 }
        );
      }

      return Response.json(user);
    },

    // PUT /api/users/:id
    async PUT(req: Request) {
      try {
        const { id } = req.params;
        const { name, email } = await req.json();

        const user = store.getUser(id);
        if (!user) {
          return Response.json(
            { error: "User not found" },
            { status: 404 }
          );
        }

        const updatedUser = store.updateUser(id, { name, email });

        // Broadcast to WebSocket clients
        broadcastMessage({
          type: "user_updated",
          data: updatedUser,
          timestamp: new Date().toISOString(),
        });

        return Response.json(updatedUser);
      } catch (error) {
        return Response.json(
          { error: "Invalid JSON" },
          { status: 400 }
        );
      }
    },

    // DELETE /api/users/:id
    async DELETE(req: Request) {
      const { id } = req.params;
      const user = store.getUser(id);

      if (!user) {
        return Response.json(
          { error: "User not found" },
          { status: 404 }
        );
      }

      store.deleteUser(id);

      // Broadcast to WebSocket clients
      broadcastMessage({
        type: "user_deleted",
        data: { id },
        timestamp: new Date().toISOString(),
      });

      return new Response(null, { status: 204 });
    },
  },
};

import { ServerProtocol } from "verb";

const connections = new Set<WebSocket>();

export const setupWebSocket = (app: any) => {
  // Create WebSocket server
  const wsServer = app.createServer?.(ServerProtocol.WEBSOCKET);
  
  if (wsServer) {
    wsServer.websocket({
      open: (ws) => {
        console.log("WebSocket client connected");
        connections.add(ws);
        
        // Send welcome message
        ws.send(JSON.stringify({
          type: "connected",
          message: "Welcome to Verb Fullstack App",
          timestamp: new Date().toISOString(),
        }));
      },

      message: (ws, message) => {
        try {
          const data = JSON.parse(message.toString());
          console.log("WebSocket message:", data);
          
          // Echo message back to client
          ws.send(JSON.stringify({
            type: "echo",
            data,
            timestamp: new Date().toISOString(),
          }));
        } catch (error) {
          ws.send(JSON.stringify({
            type: "error",
            message: "Invalid JSON",
            timestamp: new Date().toISOString(),
          }));
        }
      },

      close: (ws) => {
        console.log("WebSocket client disconnected");
        connections.delete(ws);
      },
    });
  }
}

export const broadcastMessage = (message: any) => {
  const messageStr = JSON.stringify(message);
  
  for (const ws of connections) {
    try {
      ws.send(messageStr);
    } catch (error) {
      // Remove broken connections
      connections.delete(ws);
    }
  }
}

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: string;
}

class InMemoryStore {
  private users: Map<string, User> = new Map();

  getUsers(): User[] {
    return Array.from(this.users.values());
  }

  getUser(id: string): User | undefined {
    return this.users.get(id);
  }

  addUser(user: User): User {
    this.users.set(user.id, user);
    return user;
  }

  updateUser(id: string, updates: Partial<User>): User {
    const user = this.users.get(id);
    if (!user) {
      throw new Error("User not found");
    }

    const updatedUser = { ...user, ...updates };
    this.users.set(id, updatedUser);
    return updatedUser;
  }

  deleteUser(id: string): boolean {
    return this.users.delete(id);
  }
}

export const store = new InMemoryStore();

// Add some sample data
store.addUser({
  id: "1",
  name: "John Doe",
  email: "[email protected]",
  createdAt: new Date().toISOString(),
});

store.addUser({
  id: "2",
  name: "Jane Smith",
  email: "[email protected]",
  createdAt: new Date().toISOString(),
});

declare module "*.html" {
  const content: any;
  export default content;
}

declare module "*.css" {
  const content: any;
  export default content;
}