feat(api): 🚀 add WebSocket support and integrate new SSO adapters

AGENTS.md

@@ -0,0 +1,32 @@
+# VitNode AI Coding Agent Guidelines (Extended)
+
+The repository is a monorepo for the VitNode framework, which includes a backend API, frontend documentation site, and shared packages.
+
+## Main Rules
+
+- Use React 19.2, Next.js 16, TypeScript 5.9, Hono.js 4,
+- Use pnpm as the runtime environment,
+- Use Tailwind CSS 4 for styling,
+
+## API
+
+- Please use as much as possible server-side API calls (server components, server actions),
+- For client API calls, use `tanstack/react-query` hooks,
+
+## TypeScript
+
+- Avoid using `any` type,
+- Do not nest ternary operators,
+- Avoid creating `index.ts` files for exports, instead use explicit file names,
+- Use only `const` for create functions, but `function` for pages and generic functions,
+- Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator,
+
+## React
+
+- Don't use `React.FC`, instead explicitly type props
+- Don't use `useMemo` and `useCallback`. Project has React Compiler
+
+## Animations
+
+- Use `motion/react` for animations and gestures,
+- Use `translate` instead of `top`/`left` for moving elements, as it is more performant

apps/api/package.json

@@ -14,9 +14,11 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@hono/node-ws": "^1.2.0",
     "@hono/zod-openapi": "^1.1.4",
     "@hono/zod-validator": "^0.7.4",
     "@vitnode/core": "workspace:*",
+    "@vitnode/blog": "workspace:*",
     "drizzle-kit": "^0.31.7",
     "drizzle-orm": "^0.44.7",
     "hono": "^4.10.6",

apps/api/src/index.ts

@@ -1,6 +1,7 @@
 import { serve } from "@hono/node-server";
 import { OpenAPIHono } from "@hono/zod-openapi";
 import { VitNodeAPI } from "@vitnode/core/api/config";
+import { createNodeWebSocket } from "@hono/node-ws";
 
 import { vitNodeApiConfig } from "./vitnode.api.config.js";
 
@@ -11,7 +12,28 @@ VitNodeAPI({
   vitNodeApiConfig,
 });
 
-serve(
+const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });
+
+const wsApp = app.get(
+  "/ws",
+  upgradeWebSocket(c => ({
+    onOpen(event, ws) {
+      const user = c.get("user");
+      console.log("Connection opened", event, ws, user);
+    },
+    onMessage(event, ws) {
+      console.log(`Message from client`, event.data);
+      ws.send("Hello from server!");
+    },
+    onClose: () => {
+      console.log("Connection closed");
+    },
+  })),
+);
+
+export type WebSocketApp = typeof wsApp;
+
+const server = serve(
   {
     fetch: app.fetch,
     port: 8080,
@@ -25,3 +47,4 @@ serve(
     );
   },
 );
+injectWebSocket(server);

apps/api/src/vitnode.api.config.ts

@@ -2,6 +2,7 @@ import { buildApiConfig } from "@vitnode/core/vitnode.config";
 import { NodemailerEmailAdapter } from "@vitnode/nodemailer";
 import { config } from "dotenv";
 import { drizzle } from "drizzle-orm/postgres-js";
+import { blogApiPlugin } from "@vitnode/blog/config.api";
 
 config({
   quiet: true,
@@ -11,7 +12,7 @@ export const POSTGRES_URL =
   process.env.POSTGRES_URL ?? "postgresql://root:root@localhost:5432/vitnode";
 
 export const vitNodeApiConfig = buildApiConfig({
-  plugins: [],
+  plugins: [blogApiPlugin()],
   pathToMessages: async path => await import(`./locales/${path}`),
   dbProvider: drizzle({
     connection: POSTGRES_URL,

apps/docs/content/docs/dev/index.mdx

@@ -10,7 +10,7 @@ icon: Power
 
 ## Get started
 
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 <Tabs groupId='package-manager' persist items={['bun', 'pnpm', 'npm']} label='Create a Plugin'>
 
@@ -31,3 +31,11 @@ npx create-vitnode-app@canary
 ## Why VitNode?
 
 something here
+
+## Types of Applications
+
+In VitNode, you can create different types of applications to suit your needs:
+
+- **Single App**: A standalone application that includes both frontend and backend components in `Next.js` with `Hono.js` routes,
+- **Monorepo App**: A monorepo structure that allows you to manage multiple packages within a single repository, including frontend and backend components,
+- **Only API**: An application focused solely on backend API development without any frontend components using `Hono.js`.

apps/docs/content/docs/dev/meta.json

@@ -19,6 +19,7 @@
     "email",
     "sso",
     "cron",
+    "websocket",
     "---Frontend---",
     "layouts-and-pages",
     "admin-page",

apps/docs/content/docs/dev/sso/custom-adapter.mdx

@@ -16,15 +16,15 @@ import { Callout } from "fumadocs-ui/components/callout";
 Let's start with the basics. Create a new file for your SSO provider:
 
 ```ts title="src/utils/sso/discord_api.ts"
-import { SSOApiPlugin, getRedirectUri } from "@vitnode/core/api/models/sso";
+import { SSOApiAdapter, getRedirectUri } from "@vitnode/core/api/models/sso";
 
-export const DiscordSSOApiPlugin = ({
+export const DiscordSSOApiAdapter = ({
   clientId,
   clientSecret,
 }: {
   clientId: string;
   clientSecret: string;
-}): SSOApiPlugin => {
+}): SSOApiAdapter => {
   const id = "discord";
   const redirectUri = getRedirectUri(id);
 
@@ -42,15 +42,15 @@ This is like creating a blueprint for your SSO provider. The `id` will be used i
 Now let's add the magic that sends users to Discord for login:
 
 ```ts title="src/utils/sso/discord_api.ts"
-import { SSOApiPlugin, getRedirectUri } from "@vitnode/core/api/models/sso";
+import { SSOApiAdapter, getRedirectUri } from "@vitnode/core/api/models/sso";
 
-export const DiscordSSOApiPlugin = ({
+export const DiscordSSOApiAdapter = ({
   clientId,
   clientSecret,
 }: {
   clientId: string;
   clientSecret: string;
-}): SSOApiPlugin => {
+}): SSOApiAdapter => {
   const id = "discord";
   const redirectUri = getRedirectUri(id);
 
@@ -93,7 +93,7 @@ export const DiscordSSOApiPlugin = ({
 After the user approves access, Discord sends us a code. Let's exchange it for an access token:
 
 ```ts title="src/utils/sso/discord_api.ts"
-import { SSOApiPlugin, getRedirectUri } from "@vitnode/core/api/models/sso";
+import { SSOApiAdapter, getRedirectUri } from "@vitnode/core/api/models/sso";
 import { HTTPException } from "hono/http-exception";
 import { ContentfulStatusCode } from "hono/utils/http-status";
 import { z } from "zod";
@@ -103,13 +103,13 @@ const tokenSchema = z.object({
   token_type: z.string(),
 });
 
-export const DiscordSSOApiPlugin = ({
+export const DiscordSSOApiAdapter = ({
   clientId,
   clientSecret,
 }: {
   clientId: string;
   clientSecret: string;
-}): SSOApiPlugin => {
+}): SSOApiAdapter => {
   const id = "discord";
   const redirectUri = getRedirectUri(id);
 
@@ -204,7 +204,7 @@ export const DiscordSSOApiPlugin = ({
 Finally, let's get the user's profile data using our shiny new access token:
 
 ```ts title="src/utils/sso/discord_api.ts"
-import { SSOApiPlugin, getRedirectUri } from "@vitnode/core/api/models/sso";
+import { SSOApiAdapter, getRedirectUri } from "@vitnode/core/api/models/sso";
 import { HTTPException } from "hono/http-exception";
 import { ContentfulStatusCode } from "hono/utils/http-status";
 import { z } from "zod";
@@ -215,13 +215,13 @@ const userSchema = z.object({
   username: z.string(),
 });
 
-export const DiscordSSOApiPlugin = ({
+export const DiscordSSOApiAdapter = ({
   clientId,
   clientSecret,
 }: {
   clientId: string;
   clientSecret: string;
-}): SSOApiPlugin => {
+}): SSOApiAdapter => {
   const id = "discord";
   const redirectUri = getRedirectUri(id);
 
@@ -324,7 +324,7 @@ Last step! Let's plug your new SSO provider into your app:
 import { OpenAPIHono } from "@hono/zod-openapi";
 import { handle } from "hono/vercel";
 import { VitNodeAPI } from "@vitnode/core/api/config";
-import { DiscordSSOApiPlugin } from "@/utils/sso/discord_api";
+import { DiscordSSOApiAdapter } from "@/utils/sso/discord_api";
 
 const app = new OpenAPIHono().basePath("/api");
 VitNodeAPI({
@@ -334,7 +334,7 @@ VitNodeAPI({
     // [!code ++]
     ssoAdapters: [
       // [!code ++]
-      DiscordSSOApiPlugin({
+      DiscordSSOApiAdapter({
         // [!code ++]
         clientId: process.env.DISCORD_CLIENT_ID,
         // [!code ++]

apps/docs/content/docs/dev/sso/discord.mdx

@@ -58,7 +58,7 @@ Add the Discord SSO plugin to your API routes.
 
 ```ts title="src/app/api/[...route]/route.ts"
 // [!code ++]
-import { DiscordSSOApiPlugin } from '@vitnode/core/api/plugins/sso/discord';
+import { DiscordSSOApiAdapter } from "@vitnode/core/api/plugins/sso/discord";
 
 VitNodeAPI({
   app,
@@ -68,7 +68,7 @@ VitNodeAPI({
     // [!code ++]
     ssoAdapters: [
       // [!code ++]
-      new DiscordSSOApiPlugin({
+      new DiscordSSOApiAdapter({
         // [!code ++]
         clientId: process.env.DISCORD_CLIENT_ID,
         // [!code ++]

apps/docs/content/docs/dev/sso/facebook.mdx

@@ -52,7 +52,7 @@ Add the Facebook SSO plugin to your API routes.
 
 ```ts title="src/app/api/[...route]/route.ts"
 // [!code ++]
-import { FacebookSSOApiPlugin } from '@vitnode/core/api/plugins/sso/facebook';
+import { FacebookSSOApiAdapter } from '@vitnode/core/api/plugins/sso/facebook';
 
 VitNodeAPI({
   app,
@@ -62,7 +62,7 @@ VitNodeAPI({
     // [!code ++]
     ssoAdapters: [
       // [!code ++]
-      new FacebookSSOApiPlugin({
+      new FacebookSSOApiAdapter({
         // [!code ++]
         clientId: process.env.FACEBOOK_CLIENT_ID,
         // [!code ++]

apps/docs/content/docs/dev/sso/google.mdx

@@ -113,7 +113,7 @@ Add the Discord SSO plugin to your API routes.
 
 ```ts title="src/app/api/[...route]/route.ts"
 // [!code ++]
-import { GoogleSSOApiPlugin } from '@vitnode/core/api/plugins/sso/google';
+import { GoogleSSOApiAdapter } from "@vitnode/core/api/plugins/sso/google";
 
 VitNodeAPI({
   app,
@@ -123,7 +123,7 @@ VitNodeAPI({
     // [!code ++]
     ssoAdapters: [
       // [!code ++]
-      new GoogleSSOApiPlugin({
+      new GoogleSSOApiAdapter({
         // [!code ++]
         clientId: process.env.GOOGLE_CLIENT_ID,
         // [!code ++]

apps/docs/content/docs/dev/websocket/index.mdx

@@ -0,0 +1,6 @@
+---
+title: WebSocket
+description: xx
+---
+
+test

apps/docs/content/docs/dev/websocket/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "WebSocket",
+  "pages": ["..."]
+}