Kirby Boilerplate

Kirby Boilerplate is an opinionated Next.js starter that preconfigures testing, CI/CD, linting, database access, and a design system so you can focus on building React components.

What is Kirby Boilerplate?

Kirby Boilerplate is an open-source front-end boilerplate created by Fabien Greard and hosted on GitHub. It provides a Next.js application with TypeScript and Tailwind CSS, along with a full toolchain: Jest and Testing Library for unit tests, Cypress for end-to-end tests, Storybook for component review, Prisma for database migrations, and Apollo Client for GraphQL. The project explicitly states it has no connection to Kirby CMS, despite the similar name.

Key Features

• Next.js + TypeScript: A React framework with static and server rendering, preconfigured with type safety and Tailwind CSS for styling.
• Testing out of the box: Unit tests use Jest with Testing Library (react, jest-dom, react-hooks); end-to-end tests use Cypress; both run via yarn test and yarn e2e.
• Prisma integration: Commands for migrating, seeding, and generating the Prisma client are included, with support for PostgreSQL, MySQL, SQL Server, and others by editing the datasource block.
• Apollo GraphQL: Apollo Client is wired up, and yarn codegen generates TypeScript types from your GraphQL schema using Apollo tooling.
• Storybook: Launch an isolated component workspace with yarn storybook on port 6006 for design-system development.
• CI/CD with GitHub Actions: Prebuilt workflows run tests and CodeQL security analysis on each push.
• Commit conventions: Commitlint enforces conventional commit types, and Standard-version automates semantic version bumps (patch, minor, major).
• Bootstrap script: Run yarn bootstrap to install dependencies, copy environment defaults, and prepare the Prisma client automatically.

Who is it for?

• Front-end developers who want a ready-to-code Next.js environment without manually wiring up test runners, linters, and CI pipelines.
• Full-stack teams that need Prisma and Apollo integrated with a React front end, and are willing to connect their own database and GraphQL endpoint.
• Open-source contributors looking for a structured project with clear commit guidelines and automated checks.

What can you do with Kirby Boilerplate?

• Bootstrap a new project with one command, yarn bootstrap, and then run yarn dev to start at http://localhost:3000.
• Write and run tests: yarn test runs Jest silently, yarn coverage generates code coverage, and yarn e2e runs Cypress headlessly.
• Generate GraphQL types with yarn codegen once your endpoint is reachable.
• Manage your database with prisma:migrate, prisma:seed, and prisma:generate scripts.
• Build a design system with Storybook and share components across your team.

How does Kirby Boilerplate work?

After cloning, you copy .env.example to .env, then run yarn bootstrap to install dependencies and set up the project. The environment variables NEXT_PUBLIC_GRAPHQL_ENDPOINT and DATABASE_URL connect the app to your backend services. You can then use the provided scripts for development, testing, and deployment preparation.

Pros and cons

• Pros: Full setup is automated; CI/CD, linting, and testing are preconfigured; the stack is modern and actively maintained.
• Cons: Because it is opinionated, it includes many tools (Apollo, Prisma, Storybook) that may not be needed for smaller projects, and you must supply your own database and GraphQL endpoint for full-stack features.

Pricing

The boilerplate is open source and distributed under the MIT license, so it is free to use and modify.

FAQ

Is Kirby Boilerplate related to Kirby CMS?

No, the README explicitly states that this project has nothing to do with Kirby CMS. It is a standalone front-end boilerplate built on Next.js.

How do I change the database?

Edit the datasource block in prisma/schema.prisma to use a different provider, update the connection URL in your environment, and run yarn prisma:migrate to initialise your schema.

What environment variables are required for Vercel deployment?

You need to set NEXT_PUBLIC_GRAPHQL_ENDPOINT and DATABASE_URL. The .env.example file provides default values if you copy it to .env.

Which testing libraries are included?

Jest with Testing Library (react, jest-dom, react-hooks) for unit tests, and Cypress with the Testing Library integration for end-to-end tests.