### Start VitNode Development Database Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Starts a PostgreSQL database container for local VitNode development using Docker. ```pnpm pnpm docker:dev ``` -------------------------------- ### Launch VitNode Developer Mode Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Builds scripts, starts the development server, and enables hot reloading for VitNode. ```pnpm pnpm dev ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Installs all necessary project dependencies using the pnpm package manager. ```pnpm pnpm install ``` -------------------------------- ### Launch Development Server Source: https://github.com/axendeveloper/vitnode/blob/canary/README.md Starts the VitNode development server, enabling auto-reloading for a faster development cycle. This command is used after installing dependencies and setting up the database. ```bash pnpm dev ``` ```bash bun dev ``` ```bash npm run dev ``` -------------------------------- ### Start Development Server Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/create-vitnode-app/copy-of-vitnode-app/root/README.md Starts the development server to run the VitNode app locally. Ensure you have created a .env file from .env.example first. ```pnpm pnpm dev ``` ```bun bun dev ``` ```npm npm run dev ``` -------------------------------- ### Run VitNode Dev Server Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/guides/blog.mdx Start the VitNode development server to preview your blog and other project features. This command compiles your project and makes it accessible locally. ```bash bun dev ``` ```bash pnpm dev ``` ```bash npm run dev ``` -------------------------------- ### Clone VitNode Repository Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Steps to fork and clone the VitNode repository to your local machine. ```bash git clone https://github.com/{YOUR-USERNAME}/vitnode.git && cd vitnode ``` -------------------------------- ### Install VitNode Blog Package Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/guides/blog.mdx Install the VitNode blog plugin package using your preferred package manager. This command adds the necessary dependencies to your project for blog functionality. ```bash bun i @vitnode/blog@canary ``` ```bash pnpm i @vitnode/blog@canary ``` ```bash npm i @vitnode/blog@canary ``` -------------------------------- ### Commit Changes with Conventional Commits Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Examples of committing code changes following the Conventional Commits specification. ```bash git commit -m "feat: add cool new feature" ``` ```bash git commit -m "fix: solve critical bug in authentication" ``` -------------------------------- ### Install Dependencies Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/create-vitnode-app/copy-of-vitnode-app/root/README.md Installs project dependencies using package managers like pnpm, bun, or npm. This step is crucial before running the application. ```pnpm pnpm i ``` ```bun bun i ``` ```npm npm i ``` -------------------------------- ### Drawer Component Usage Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/drawer.mdx Provides a practical example of how to implement the Drawer component. It shows a DrawerTrigger to initiate opening and DrawerContent containing header information, a description, and a footer with action buttons like Submit and Cancel. ```tsx Open Are you absolutely sure? This action cannot be undone. ``` -------------------------------- ### Create VitNode App Source: https://github.com/axendeveloper/vitnode/blob/canary/README.md Installs the VitNode application using various package managers. This command bootstraps a new project with the latest canary version of VitNode. ```bash pnpm create vitnode-app@canary ``` ```bash bun create vitnode-app@canary ``` ```bash npx create-vitnode-app@canary ``` -------------------------------- ### Database Schema Management Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Commands to push schema changes and run database migrations. ```pnpm pnpm db:push ``` ```pnpm pnpm db:migrate ``` -------------------------------- ### Start Database Container Source: https://github.com/axendeveloper/vitnode/blob/canary/README.md Launches the development database container using Docker. This command is essential for running the application locally with database support. ```bash pnpm docker:dev ``` ```bash bun docker:dev ``` ```bash npm run docker:dev ``` -------------------------------- ### Create a New Feature Branch Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Command to create a new Git branch for developing a new feature. ```bash git checkout -b feature/your-amazing-feature ``` -------------------------------- ### Import Fetcher and API Module Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/fetcher.mdx Demonstrates importing the `fetcher` function and an API module (`usersModule`) for making RPC-style API calls. This is the initial setup for using the VitNode fetcher. ```ts import { fetcher } from '@vitnode/core/lib/fetcher'; import { usersModule } from '@vitnode/core/api/modules/users/users.module'; ``` -------------------------------- ### Create VitNode Plugin with Package Manager Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/plugins.mdx Scaffolds a new VitNode plugin project using the `create-vitnode-app` command. Supports creation via Bun, pnpm, and npm package managers. Requires a TurboRepo setup. ```bash bun create vitnode-app@canary --plugin ``` ```bash pnpm create vitnode-app@canary --plugin ``` ```bash npx create-vitnode-app@canary --plugin ``` -------------------------------- ### VitNode App Creation Options Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/create-vitnode-app/README.md Details the available command-line options for the create-vitnode-app CLI tool, allowing customization of project initialization, including package manager, linting, installation skipping, app mode, monorepo structure, and Docker support. ```APIDOC create-vitnode-app Initializes a new VitNode application. Usage: npx create-vitnode-app@latest [options] pnpm create vitnode-app@latest [options] bun create vitnode-app@latest [options] Options: --package-manager Specify the package manager to use. Supported values: "npm", "pnpm". Example: --package-manager pnpm --eslint Initialize the project with an ESLint configuration for linting. --skip-install Skip the automatic installation of project dependencies after initialization. --mode Specify the type of app to create. Supported values: "singleApp", "apiMonorepo", "onlyApi". Example: --mode apiMonorepo --monorepo Create the project with a monorepo structure. --docker Initialize the project with Docker support, including Dockerfile and docker-compose.yml. Example Usage: npx create-vitnode-app@latest --package-manager pnpm --eslint --mode apiMonorepo --monorepo --docker ``` -------------------------------- ### ESLint Configuration Setup Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/eslint/README.md Demonstrates how to import and apply the default VitNode ESLint configuration in an ESLint configuration file (eslint.config.mjs). It extends the base configuration provided by the package. ```js import eslintVitNode from '@vitnode/eslint-config/eslint'; export default [...eslintVitNode]; ``` -------------------------------- ### Create a New Fix Branch Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/contribution.mdx Command to create a new Git branch for fixing an existing issue. ```bash git checkout -b fix/issue-you-are-solving ``` -------------------------------- ### Make First API Call Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/fetcher.mdx Shows how to make a GET request to the '/session' endpoint using the `fetcher` function with the `usersModule`. It logs the session data if the request is successful. ```ts const response = await fetcher(usersModule, { path: '/session', method: 'get', module: 'users', }); // Handle the response if (response.ok) { const data = await response.json(); console.log('Session data:', data); } ``` -------------------------------- ### Message Formatting Examples Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/i18n/messages.mdx Illustrates different ways to format messages using next-intl, including dynamic values, pluralization rules, and rich text elements. ```json "message": "Hello {name}!" ``` ```ts t("message", { name: "Jane" }); // "Hello Jane!" ``` ```json "message": "You have {count, plural, one {# message} other {# messages}}" ``` ```ts t("message", { count: 1 }); // "You have 1 message" t("message", { count: 2 }); // "You have 2 messages" ``` ```json { "message": "Please refer to the guidelines." } ``` ```tsx // Returns `<>Please refer to the guidelines.` t.rich("message", { guidelines: (chunks) => {chunks} }); ``` -------------------------------- ### Generate Vitnode Migrations with Package Managers Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/deployments/cloud/vercel.mdx This section demonstrates how to generate database migrations for your Vitnode project using different package managers. It provides commands for Bun, pnpm, and npm, ensuring compatibility across various development environments. ```bash bun db:migrate ``` ```bash pnpm db:migrate ``` ```bash npm run db:migrate ``` -------------------------------- ### Create Dynamic Route Page in VitNode Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/layouts-and-pages.mdx Illustrates how to create dynamic routes using bracketed parameters like `[param]` in folder names. This example defines a page that accepts a `slug` parameter for individual post URLs. ```tsx interface PostPageProps { params: Promise<{ slug: string }>; } export default async function PostPage({ params }: PostPageProps) { const { slug } = await params; return (

Post: {slug}

Your post content goes here

); } ``` -------------------------------- ### Custom Email Adapter Template Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/email/overview.mdx Provides a basic template for creating a custom email adapter by implementing the `EmailApiPlugin` interface. This serves as a starting point for defining custom email sending logic. ```ts import type { EmailApiPlugin } from '@vitnode/core/api/models/email'; export const MailerEmailAdapter = (): EmailApiPlugin => {}; ``` -------------------------------- ### Importing AutoForm Components Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/auto-form.mdx Demonstrates how to import the necessary AutoForm components and Zod for schema definition. This setup is crucial for building dynamic forms. ```tsx import { AutoForm } from '@vitnode/core/components/form/auto-form'; import { AutoFormCheckbox } from '@vitnode/core/components/form/fields/checkbox'; import { AutoFormInput } from '@vitnode/core/components/form/fields/input'; import { AutoFormSelect } from '@vitnode/core/components/form/fields/select'; import { AutoFormTextarea } from '@vitnode/core/components/form/fields/textarea'; import { z } from 'zod'; ``` -------------------------------- ### Log Different Levels (Debug, Warn, Error) Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/debugging/logging.mdx Provides examples of logging messages at debug, warning, and error levels using the VitNode logging system. These methods are called via the context object `c` obtained within a route handler. ```TypeScript await c.get('log').debug('This is a test debug log'); ``` ```TypeScript await c.get('log').warn('This is a test warning log'); ``` ```TypeScript await c.get('log').error('This is a test error log'); ``` -------------------------------- ### Card Component Usage Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/card.mdx Demonstrates the structure and usage of the Card component. It shows how to combine CardHeader, CardTitle, CardDescription, CardContent, and CardFooter to create a fully featured card element. ```tsx Card Title Card Description This is the content of the card. You can put any content here. Action Button ``` -------------------------------- ### Prettier Configuration Setup Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/eslint/README.md Illustrates how to integrate the default VitNode Prettier configuration into a project's .prettierrc.mjs file. It merges the VitNode defaults with any custom configurations. ```js import vitnodePrettier from '@vitnode/eslint-config/prettierrc'; /** * @see https://prettier.io/docs/en/configuration.html * @type {import("prettier").Config} */ const config = { ...vitnodePrettier }; export default config; ``` -------------------------------- ### Cache API Responses Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/fetcher.mdx Demonstrates how to leverage Next.js caching by passing cache options to the `fetcher` function. This example forces the cache for a GET request to '/session'. ```ts const response = await fetcher(usersModule, { path: '/session', method: 'get', module: 'users', options: { // [!code ++] cache: 'force-cache', // Uses Next.js cache }, }); ``` -------------------------------- ### Create VitNode App with Package Managers Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/index.mdx This section demonstrates how to create a new VitNode application using different package managers. It provides commands for Bun, pnpm, and npm to initialize a VitNode project. ```bash bun create vitnode-app@canary ``` ```bash pnpm create vitnode-app@canary ``` ```bash npx create-vitnode-app@canary ``` -------------------------------- ### Create VitNode App CLI Usage Source: https://github.com/axendeveloper/vitnode/blob/canary/packages/create-vitnode-app/README.md Provides commands to initialize a new VitNode application using different package managers like npx, pnpm, or bun. This is the primary entry point for creating a new project. ```bash npx create-vitnode-app@latest ``` ```bash pnpm create vitnode-app@latest ``` ```bash bun create vitnode-app@latest ``` -------------------------------- ### Sheet Component Usage Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/sheet.mdx Provides a practical example of implementing the Sheet component in a React application. It showcases how to use the SheetTrigger to open the Sheet, and how to structure content within SheetContent, including headers, descriptions, footers, and close actions. ```tsx Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. ``` -------------------------------- ### Get Category by ID using Path Parameter Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/rest-api.mdx Defines a GET API endpoint to retrieve a specific category by its unique identifier. It utilizes a path parameter '{id}' for resource identification and Zod for schema validation of the parameter. The handler extracts the ID, simulates a lookup, and returns category details or a 404 error. ```TypeScript import { z } from '@hono/zod-openapi'; import { buildRoute } from '@vitnode/core/api/lib/route'; import { HTTPException } from 'hono/http-exception'; import { CONFIG_PLUGIN } from '@/config'; export const getCategoryByIdRoute = buildRoute({ ...CONFIG_PLUGIN, route: { method: 'get', path: '/{id}', // Dynamic path parameter request: { params: z.object({ id: z.string().openapi({ description: 'Unique identifier for the category', example: 'tech-category-123', }), }), }, responses: { 200: { content: { 'application/json': { schema: z.object({ id: z.string(), name: z.string(), description: z.string().optional(), }), }, }, description: 'Category details retrieved successfully', }, 404: { description: 'Category not found', }, }, }, handler: c => { const { id } = c.req.valid('param'); // Extract the path parameter // Simulate database lookup if (id === 'nonexistent') { throw new HTTPException(404); } return c.json({ id, name: `Category ${id}`, description: 'A fantastic category for amazing content', }); }, }); ``` -------------------------------- ### VitNode Available Scripts Source: https://github.com/axendeveloper/vitnode/blob/canary/README.md A list of common scripts provided by VitNode for managing the development and build process. These scripts cover development, building, linting, database operations, and email server management. ```bash pnpm dev # Start development server with auto-reload pnpm build # Build for production pnpm start # Start production server pnpm lint # Check code quality pnpm lint:fix # Fix code quality issues pnpm db:push # Push database schema changes pnpm db:migrate # Run database migrations pnpm dev:email # Start email development server ``` -------------------------------- ### Toggle Component Usage Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/toggle.mdx Provides an example of using the Toggle component in JSX, including passing an aria-label for accessibility and nesting an icon within it. ```tsx ``` -------------------------------- ### Order Configuration Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/data-table.mdx Shows how to configure sorting for the DataTable, specifying which columns are sortable and setting the default sort column and direction. ```tsx order={{ columns: ['createdAt', 'id', 'name'], defaultOrder: { column: 'createdAt', order: 'desc', } }} ``` -------------------------------- ### Combobox Async Usage Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/combobox-async.mdx Renders the AutoForm with the AutoFormComboboxAsync field, demonstrating how to provide a fetchData function for asynchronous loading and searching of categories. ```tsx ( { const res = await fetcherClient(categoriesModule, { path: '/', method: 'get', module: 'categories', args: { query: { search, }, }, }); const data = await res.json(); return data.edges.map(category => ({ label: category.title, value: category.id.toString(), })); }} id="categoryId" label="Category" /> ), }, ]} /> ``` -------------------------------- ### Basic Badge Rendering Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/badge.mdx Demonstrates how to render a basic Badge component with an icon and text content. This example shows the integration of an icon within the Badge. ```tsx Default ``` -------------------------------- ### Get Captcha Config in View (TypeScript/React) Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/captcha/overview.mdx Retrieves the captcha configuration from the middleware API within a server component. This configuration is then passed down to client components. ```tsx import { getMiddlewareApi } from '@vitnode/core/lib/api/get-middleware-api'; // [!code ++] export const SignUpView = async () => { const { captcha } = await getMiddlewareApi(); // [!code ++] return ; }; ``` -------------------------------- ### Connect Blog Plugin to VitNode Config Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/guides/blog.mdx Integrate the blog plugin into your main VitNode configuration file (`src/vitnode.config.ts`). This step ensures the blog features are recognized and enabled by the VitNode build system. ```ts import { blogPlugin } from '@vitnode/blog/config'; export const vitNodeConfig = buildConfig({ plugins: [blogPlugin()], // [!code highlight] }); ``` -------------------------------- ### Alert Callout Example Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/alert.mdx Demonstrates the usage of the Callout component to display a warning message. This component is used to present important information or status updates to the user. ```UIComponent We're working hard to bring you the best documentation experience. ``` -------------------------------- ### Connect Blog Plugin to VitNode API Config Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/guides/blog.mdx Connect the blog plugin to your VitNode API configuration file (`src/vitnode.api.config.ts`). This allows the blog plugin to integrate with your project's API layer. ```ts import { blogApiPlugin } from '@vitnode/blog/config.api'; export const vitNodeApiConfig = buildApiConfig({ plugins: [blogApiPlugin()], // [!code highlight] }); ``` -------------------------------- ### Create Basic Page in VitNode Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/layouts-and-pages.mdx Defines a basic React component for a page in VitNode using Next.js App Router patterns. This component renders a simple welcome message and is typically placed in `app/page.tsx`. ```tsx export default function BlogHomePage() { return (

Welcome to Our Blog! 🚀

Where awesome content lives

); } ``` -------------------------------- ### Radix UI Tooltip API Reference Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/tooltip.mdx Provides a link to the official Radix UI Tooltip component API reference, detailing all available props, methods, and usage guidelines for advanced customization and integration. ```APIDOC External API Reference: [Radix UI - Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference) This entry links to the comprehensive API documentation for the Radix UI Tooltip primitive, which forms the basis for this component. It covers detailed information on: - Props for Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, etc. - Accessibility features and ARIA attributes. - Styling customization options. - Advanced usage patterns and best practices. Consult the linked documentation for complete details on component behavior and available configurations. ``` -------------------------------- ### Custom Email Adapter Configuration Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/email/overview.mdx Illustrates how to add configuration options to a custom email adapter. This includes defining parameters like host, port, security settings, user credentials, and the sender address. ```ts import type { EmailApiPlugin } from '@vitnode/core/api/models/email'; export const MailerEmailAdapter = ({ // [!code ++:13] host = '', port = 587, secure = false, user = '', password = '', from = '', }: { from: string | undefined; host: string | undefined; password: string | undefined; port?: number; secure?: boolean; user: string | undefined; }): EmailApiPlugin => {}; ``` -------------------------------- ### Manual Combobox Implementation (React/TSX) Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/combobox.mdx Provides a manual implementation of a combobox component using React hooks and UI primitives. This example showcases a standalone combobox with search functionality. ```tsx 'use client'; import * as React from 'react'; import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'; import { cn } from '@vitnode/core/lib/utils'; import { Button } from '@vitnode/core/components/ui/button'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@vitnode/core/components/ui/command'; import { Popover, PopoverContent, PopoverTrigger, } from '@vitnode/core/components/ui/popover'; const frameworks = [ { value: 'next.js', label: 'Next.js', }, { value: 'sveltekit', label: 'SvelteKit', }, { value: 'nuxt.js', label: 'Nuxt.js', }, { value: 'remix', label: 'Remix', }, { value: 'astro', label: 'Astro', }, ]; export function ExampleCombobox() { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(''); return ( No framework found. {frameworks.map(framework => ( { setValue(currentValue === value ? '' : currentValue); setOpen(false); }} > {framework.label} ))} ); } ``` -------------------------------- ### Import Drawer Components Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/drawer.mdx Imports essential components for the Drawer UI from the '@vitnode/core/components/ui/drawer' library. This includes the main Drawer, trigger, content, header, footer, title, description, and close elements. ```typescript import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from '@vitnode/core/components/ui/drawer'; ``` -------------------------------- ### Add Path Prefix to API Request Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/fetcher.mdx Illustrates how to use the `prefixPath` option to add a prefix (e.g., '/admin') to the request path when working with nested modules. This example makes a POST request to '/admin/categories'. ```ts const response = await fetcher(categoriesAdminModule, { // [!code ++] prefixPath: '/admin', // Adds prefix to the path path: '/categories', method: 'post', module: 'categories', args: { body: { name: 'Technology', description: 'Tech-related articles', }, }, }); // This will make a request to: /admin/categories ``` -------------------------------- ### Create VitNode API Module Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/rest-api.mdx Demonstrates how to create a basic API module in VitNode using `buildModule`. Modules serve as containers for organizing related API endpoints within a plugin. ```ts import { buildModule } from '@vitnode/core/api/lib/module'; import { CONFIG_PLUGIN } from '@/config'; export const categoriesModule = buildModule({ pluginId: CONFIG_PLUGIN.id, name: 'categories', routes: [], // We'll populate this soon! }); ``` -------------------------------- ### Get Translations (Async RSC) Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/i18n/messages.mdx Demonstrates fetching translations asynchronously in a React Server Component using `getTranslations` from `next-intl/server`. It takes a namespace and returns a translation function for use within the component. ```tsx import { getTranslations } from "next-intl/server"; export const ExampleComponent = async () => { const t = await getTranslations("welcome.home"); // [!code highlight] return
{t("hello")}
; }; ``` -------------------------------- ### Connect Discord SSO Provider to VitNode Application Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/sso/overview.mdx Demonstrates how to integrate the DiscordSSOApiPlugin into the main VitNode application configuration. This involves initializing the OpenAPIHono app and passing the Discord provider details, including client ID and secret from environment variables, to the VitNodeAPI configuration. ```ts 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'; const app = new OpenAPIHono().basePath('/api'); VitNodeAPI({ app, plugins: [], authorization: { ssoAdapters: [ DiscordSSOApiPlugin({ clientId: process.env.DISCORD_CLIENT_ID, clientSecret: process.env.DISCORD_CLIENT_SECRET, }), ], }, }); ``` -------------------------------- ### Manage Database Migrations and Schema Updates (Bash) Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/database/index.mdx VitNode provides commands to manage your database schema. Use 'db:migrate' to generate migration files when your schema changes, and 'db:push' to apply these changes directly to your database. These commands are available via common package managers like Bun, pnpm, and npm. ```Bash bun db:migrate ``` ```Bash pnpm db:migrate ``` ```Bash npm run db:migrate ``` ```Bash bun db:push ``` ```Bash pnpm db:push ``` ```Bash npm run db:push ``` -------------------------------- ### Complete DataTable Usage in a Page Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/data-table.mdx A comprehensive example demonstrating the integration of the DataTable component within a page, fetching data using a custom fetcher and handling search parameters for dynamic content. ```tsx import { DataTable, SearchParamsDataTable, } from '@vitnode/core/components/table/data-table'; import { userModule } from '@/api/modules/user/user.module'; import { fetcher } from '@vitnode/core/lib/fetcher'; export const UsersView = async ({ searchParams, }: { searchParams: Promise; }) => { const query = await searchParams; const res = await fetcher(userModule, { path: '/users', method: 'get', module: 'user', args: { query, }, withPagination: true, }); const data = await res.json(); return ( ( {row.username} ), }, { id: 'email', label: 'Email' }, { id: 'createdAt', label: 'Created at' }, ]} edges={data.edges} order={{ columns: ['id', 'username', 'email', 'createdAt'], defaultOrder: { column: 'createdAt', order: 'desc', }, }} pageInfo={data.pageInfo} /> ); }; ``` -------------------------------- ### Send Email using Context Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/email/overview.mdx Demonstrates how to send an email using the application's email context within a route handler. It shows the necessary import and the call to the `send` method with recipient, subject, and content. ```ts import { z } from 'zod'; import { buildRoute } from '@vitnode/core/api/lib/route'; export const testRoute = buildRoute({ handler: async c => { // [!code ++:5] await c.get('email').send({ to: 'test@test.com', subject: 'Test Email', content: () => 'This is a test email.', }); return c.text('test'); }, }); ``` -------------------------------- ### Auto Form Select Component Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/ui/select.mdx Demonstrates integrating the AutoFormSelect component within an automatic form generation setup. It requires a Zod schema for validation and defines the select options via a 'labels' prop. ```ts import { z } from 'zod'; import { AutoForm } from '@vitnode/core/components/form/auto-form'; import { AutoFormSelect } from '@vitnode/core/components/form/fields/select'; ``` ```ts const formSchema = z.object({ options: z.enum(['option1', 'option2', 'option3']).default('option1'), }); ``` ```tsx ( ), }, ]} /> ``` -------------------------------- ### Backend Pagination with `withPagination` Source: https://github.com/axendeveloper/vitnode/blob/canary/apps/docs/content/docs/dev/database/pagination.mdx Demonstrates the backend implementation of cursor-based pagination using the `withPagination` helper function. It shows how to integrate with a database client and define API responses with pagination metadata. ```ts import { buildRoute } from '@/api/lib/route'; import { dbClient } from '@/database/client'; import { users } from '@/database/schema/users'; import { z } from 'zod'; import { withPagination, zodPaginationPageInfo, zodPaginationQuery, } from '@/api/lib/with-pagination'; export const routeUsersGet = buildRoute({ pluginId: 'core', route: { path: '/users', method: 'get', description: 'Get users list', request: { query: zodPaginationQuery.extend({ order: z.enum(['asc', 'desc']).optional(), orderBy: z.enum(['id', 'username', 'createdAt']).optional(), }), }, responses: { 200: { content: { 'application/json': { schema: z.object({ edges: z.array( z.object({ id: z.number(), username: z.string(), email: z.string(), createdAt: z.date(), }), ), pageInfo: zodPaginationPageInfo, }), }, }, description: 'List of users', }, }, }, handler: async c => { const query = c.req.valid('query'); const data = await withPagination({ params: { query, }, primaryCursor: users.id, // Primary key used for pagination query: async ({ limit, where, orderBy }) => await dbClient .select() .from(users) .where(where) .orderBy(orderBy) .limit(limit), table: users, orderBy: { column: query.orderBy ? users[query.orderBy] : users.createdAt, order: query.order ?? 'desc', }, }); return c.json(data); }, }); ```