DOCSEARCHbyAlgolia
Submit Docs

Kirimase

repository·master·Indexed 25 days ago

https://github.com/vercel/kirimase

A Rails-like CLI scaffolding tool for building full-stack Next.js apps using the App Router. Kirimase automates the generation of boilerplate code for ORMs (Drizzle-ORM, Prisma), authentication providers (Auth.js, Clerk, Lucia, Kinde), and other packages like tRPC, Shadcn-UI, Stripe, and Resend. It includes commands to initialize projects, add configurations, and generate models, controllers, and views with built-in CRUD operations.

Tokens
21.7K
Snippets
21
Records
125
Agent score
83%

What's inside kirimase

  1. Add and Configure Packages with `kirimase add`

    master

    The kirimase add command initializes and configures essential packages for your Next.js project. Supported categories include:

    ORM

    • Drizzle-ORM: Sets up Drizzle-ORM, drizzle-zod for validation, and drizzle-kit for migrations based on your database (PostgreSQL, MySQL, or SQLite). Adds migration scripts to package.json.
    • Prisma: Sets up Prisma with zod-prisma for validations.

    Authentication

    • Auth.js (Next-Auth): Generates files including the Drizzle adapter, a generic sign-in component, root layout auth provider, and auth check/redirect utilities.
    • Clerk: Generates all necessary configuration, wraps the root layout with the auth provider, and generates auth utilities.
    • Lucia: Generates configuration, UI, and API routes for sign-in and sign-up.
    • Kinde: Generates configuration, a sign-in component, and a route handler.

    Other

    • tRPC: Configures tRPC with the App Router, provides client-side tRPC, scaffolds server-side configuration using the experimental server-invoker pattern, and wraps the root layout in a provider.
    • Shadcn-UI: Installs and configures Shadcn-UI (including button and toast components) and inserts the <Toaster /> into the root layout.
    • Stripe: Installs and configures Stripe for subscription payments.
    • Resend: Installs and configures Resend for email.

    Kirimase also automatically adds relevant keys to your .env file.

  2. Run Kirimase in Non-Interactive Mode

    master

    You can run kirimase init and kirimase add entirely via the command line using flags to bypass the interactive UI.

    Example command:

    kirimase init -sf yes -pm bun --orm prisma -db pg -a next-auth -ap github discord -mp trpc stripe resend -cl shadcn-ui -ie yes

  3. Scaffold Resources with `kirimase generate`

    master

    The kirimase generate command allows you to scaffold models, controllers, and views, similar to rails scaffold.

    Generated Components:

    • Model: Generates a Drizzle schema with column types matching your SQL flavor, drizzle-zod schemas for frontend/backend validation, and fully typed CRUD queries and mutations.
    • Controller: Provides options to scaffold tRPC, Server Actions, and/or API routes. It uses Zod schemas from models for validation and includes built-in error handling for API routes.
    • Views: Scaffolds views using Shadcn-UI for immediate CRUD operations (including select fields for relations and datepickers). You can choose between React Hook Form with tRPC or plain React (using useOptimistic and useValidated Form hooks).

  4. Install and Initialize Kirimase

    master

    To use Kirimase in your Next.js project, install the CLI globally and initialize it within your project directory.

    Note: Kirimase is only compatible with the Next.js App Router and is not compatible with the pages directory.

    1. Install the CLI globally:
    npm install -g kirimase
    1. Navigate to your Next.js project directory.
    2. Initialize Kirimase:
    kirimase init
    npm install -g kirimase

# Inside your Next.js project
kirimase init

  5. Understand the tRPC architecture generated by Kirimase

    master

    When using Kirimase to add tRPC support, the tool generates a full-stack tRPC implementation including:

    • Server-side: A root router, a tRPC server initialization file (server/trpc.ts), and a Next.js API route handler (api/trpc/[trpc]/route.ts).
    • Context: A context creator (lib/trpc/context.ts) that integrates your database (ORM) and authentication session.
    • Client-side (React): A React hook-based client (lib/trpc/client.ts) and a TrpcProvider component for client components.
    • Server-side (RSC): A specialized api proxy client (lib/trpc/api.ts) designed for React Server Components that allows calling procedures directly on the server without HTTP overhead.
    • Utilities: Helper functions for URL resolution (lib/trpc/utils.ts) and a server-side caller (lib/trpc/serverClient.ts).

  6. Lucia Authentication Code Generation Logic

    master

    When using kirimase add auth lucia, the tool generates a complete authentication system using Lucia. The generated code includes:

    • Auth Directory Files: Core Lucia configuration (lucia.ts) and utility functions (utils.ts) for session validation and cookie management.
    • User Server Actions: Server-side actions for signInAction, signUpAction, signOutAction, and updateUser (compatible with both Prisma and Drizzle ORMs).
    • Views and Components: Pre-built React components for SignUpPage, SignInPage, Loading states, and an AuthFormError component.
    • UI Integration: Automatically detects if shadcn-ui is used in your project to provide styled components (using Button, Input, Label) or standard HTML elements.

    Key Generated Utilities:

    • getUserAuth(): Retrieves the current user session.
    • checkAuth(): A helper that redirects to /sign-in if no session exists.
    • validateRequest(): A cached function to validate the session via cookies.

  7. Scaffold views and components for a database table

    master

    When the trpc and shadcn-ui packages are present in your project, Kirimase can automatically scaffold a complete set of UI views and components for a specific database table.

    This scaffolding process creates:

    • A Page View: Located at app/(app)/[tableName]/page.tsx. This is the main entry point for the table's UI.
    • A List Component: Located at components/[tableName]/[TableName]List.tsx. Displays a list of records.
    • A Form Component: Located at components/[tableName]/[TableName]Form.tsx. Handles creating and updating records using react-hook-form and zod.
    • A Modal Component: Located at components/[tableName]/[TableName]Modal.tsx. Wraps the form in a Shadcn UI Dialog for easy creation/editing.

    Automatic Shadcn UI dependency detection: Kirimase inspects your table schema to install necessary Shadcn UI components:

    • boolean fields $\rightarrow$ checkbox
    • references fields $\rightarrow$ select
    • date, timestamp, or DateTime fields $\rightarrow$ popover and calendar
    • Base components always included: dialog, form.

  8. Configure Next.js for Argon2/Bcrypt compatibility

    master

    When adding authentication (which may use @node-rs/argon2 or @node-rs/bcrypt), you may need to update your next.config.mjs to handle external dependencies in Webpack. Kirimase can automate this by adding the following configuration:

    const nextConfig = {
  webpack: (config) => {
    config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
    return config;
  },
};

    If next.config.mjs is not found, you must update it manually.

  10. Add Resend email service with `kirimase add`

    master

    When using the kirimase add command, you can integrate the Resend email service into your Next.js project. This integration automatically generates the following files and structures:

    • Client-side Page: A testing page at app/resend/page.tsx containing a form to trigger emails.
    • Email Template: A React component for your email content at components/emails/FirstEmailTemplate.tsx.
    • API Route Handler: A POST route at app/api/email/route.ts that processes the email sending request.
    • Email Utilities: A Zod schema for validating email payloads (name and email) at emailUtils.
    • Resend Client: An initialized Resend instance using your RESEND_API_KEY at the email index file.

    Post-installation steps:

    1. Create a Resend account and verify your domain.
    2. Create an API Key in Resend.
    3. Add your API key to your .env file as RESEND_API_KEY.
    4. Update the from: field in app/api/email/route.ts to use your verified domain (e.g., onboarding@resend.dev is the default placeholder).

  11. Install Shadcn UI via Kirimase

    master

    You can use Kirimase to initialize and configure Shadcn UI in your project. This process installs necessary dependencies (tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes), creates tailwind.config.ts, updates your global CSS, sets up a lib/utils.ts helper with the cn function, and generates a components.json configuration file. It also sets up a ThemeProvider and a ThemeToggle component, automatically adding the provider to your root layout.

    If you are running in non-headless mode, it will also add a ShadcnToast context provider to your App Layout and generate a loading page.

  12. Configure Lucia Auth with Drizzle ORM

    master

    When using kirimase add auth lucia with Drizzle, the tool automatically configures the necessary adapter and database schema based on your database type.

    Supported database types and their corresponding Drizzle adapters:

    • PostgreSQL (pg): Uses @lucia-auth/adapter-drizzle with DrizzlePostgreSQLAdapter. Supported drivers include neon, supabase, postgresjs, node-postgres, and vercel-pg.
    • MySQL (mysql): Uses @lucia-auth/adapter-drizzle with DrizzleMySQLAdapter. Supported drivers include mysql-2 and planetscale.
    • SQLite (sqlite): Uses @lucia-auth/adapter-drizzle with DrizzleSQLiteAdapter. Supported drivers include better-sqlite3 and turso.

    The tool will generate a schema file (typically at ../db/schema/auth) containing users and sessions tables/models.