Rockpack is a zero-configuration toolkit for building React applications - with full support for Server-Side Rendering (SSR), bundling, linting, and testing. In minutes, you can have a modern React app with production-ready quality gates, preconfigured tooling, and built-in support for AI-assisted development.
Key Features
- Zero-config setup: Scaffold a complete React app with a single command.
- SSR out of the box: Universal rendering with hydration and a Node.js server, no manual configuration needed.
- Production-ready quality gates: Enforced ESLint, Prettier, TypeScript, and Jest conventions from day one.
- Test coverage included: Every project template ships with a configured Jest setup, so AI-generated code is validated immediately - before it ever reaches code review.
- AI-first development: Preconfigured
CLAUDE.md with strict quality rules and cost-saving conventions makes working with AI tools like Claude Code fast, reliable, and economical.
- Extensible: Customize Webpack, ESLint, or Jest without ejecting.
AI-Assisted Development
Rockpack is designed to make AI-assisted development safe, fast, and cost-efficient.
Beyond tooling, Rockpack establishes a baseline architecture - consistent project structure, naming conventions, and module boundaries - that AI models can reason about reliably. A well-structured codebase is not just easier for humans to navigate; it dramatically improves the quality of AI-generated code because the model has clear patterns to follow and fewer ambiguous decisions to make.
The combination of a defined architecture, test coverage, strict quality gates, and a well-tuned CLAUDE.md means AI tools like Claude Code can contribute to your codebase without introducing regressions or inconsistencies. Because every Rockpack project starts with linting and tests already configured, AI-generated code is reviewed automatically on every change.
The CLAUDE.md configuration is optimized for:
- Minimal context usage - rules guide the AI to read only what is relevant, reducing token consumption
- Cost-efficient workflows - targeted test runs instead of full-suite scans for isolated changes
- Architecture consistency - the AI preserves existing patterns instead of introducing unnecessary abstractions
- Safe incremental changes - small, predictable diffs that are easy to review
- Quality enforcement - ESLint, TypeScript strict mode, and Jest act as automated reviewers on every AI-generated change
Requirements
Getting Started
Rockpack is a good fit for:
- Developers new to React - bootstrap a project of any complexity in minutes, with Webpack, ESLint, and Jest already configured.
- Large projects from scratch - best-practice Webpack, ESLint, TypeScript, and Jest configuration that scales well.
- Startups and prototypes - skip the setup and validate ideas quickly.
- Libraries and React components - UMD, ESM, and CJS builds with TypeScript declarations, no configuration required.
- Existing projects - Rockpack is modular; use only the packages you need.
Fast setup →
Also, take a look at iSSR - a small module for adding SSR to an existing React app:
Motivation
Every new React project raises the same questions:
- How do I set up an efficient build system with TypeScript support?
- Which ESLint rules should I use?
- How do I configure Jest to work with Babel or TypeScript?
- How do I set up SSR with Redux, Apollo, or other solutions?
- How do I configure Webpack for server-side rendering and get a production-ready artifact with a working dev server?
Setting this up from scratch takes weeks. Rockpack solves it in minutes.
With Rockpack, you go from zero to a fully configured, running project in minutes and focus on writing the code that matters.
Modules overview
Rockpack is modular. Each package can be used independently or together.
@rockpack/starter
A CLI scaffolding tool for React applications. Follows a feature-based project structure (see this article).
Supported application types:
- React SPA - Client-side React app with Webpack, TypeScript, ESLint, and Jest preconfigured.
- React SPA + SSR - Universal React app with SSR, hydration, and a Node.js server.
- React Component - NPM-ready React component with TypeScript declarations and an optimized bundle.
- Library - Framework-agnostic library for NPM in UMD, ESM and CommonJS, zero configuration required.
All project types include:
- Import support for many file formats. Full list
- Image and SVG optimization; SVG files importable as React components
- CSS/SCSS/Less modules with TypeScript support
- PostCSS: Tailwind, autoprefixer, postcss-custom-media, postcss-media-minmax
- SEO and React optimizations
- Dotenv and Dotenv safe support
- GraphQL support
Every project also gets:
- @rockpack/codestyle - ESLint, Stylelint, Prettier and Commitlint with best-practice rules, git hooks and knip
Optional add-on:
More details...
@rockpack/compiler
A Webpack-based bundler with best-practice loaders and plugins preconfigured.
@rockpack/compiler supports:
- React applications (TypeScript or Babel)
- React components and VanillaJS UMD libraries
- Node.js backend applications
- Isomorphic (SSR) applications
More details...
@rockpack/tester
Pre-configured Jest with TypeScript and Babel support, HTML reporting, and best-practice defaults for React projects.
More details...
@rockpack/codestyle
Opinionated ESLint configuration with Prettier, Stylelint, and Commitlint - ready to use out of the box.
More details...
For more information, follow the links to each module.
Rockpack is a free and open-source project. Contributions are always welcome.
Alternatives
The Rockpack project was inspired by:
Why Rockpack?
- One command to start -
@rockpack/starter scaffolds a complete app with TypeScript, Jest, ESLint, and SSR support.
- Flexible architecture - no opinions on state management or libraries; design the app the way you want.
- No magic - Rockpack is a curated set of best practices and libraries, not a black box.
- Modular - use only the packages you need, even in a legacy project.
- No eject - extend the Webpack config directly without losing the ability to update Rockpack.
- No reinventing the wheel - built on top of existing, well-maintained tools.
Contributing
Requirements: Node.js 24.15 or newer (.nvmrc pins the major, 24) and npm 11. npm install also installs the git hooks: pre-commit lints the staged files, pre-push runs the full lint and the unit tests.
The packages are tested with the built @rockpack/tester from packages/tester/lib, so build before running tests:
npm install
npm run build # builds the packages in dependency order
npm run lint # ESLint and tsc in every workspace
npm run lint:deps # syncpack (one version per dependency) and knip (unused files and dependencies)
npm run test:unit # unit tests of the packages
npm run e2e # e2e in pinned mode: packaging, compiler fixtures and examples, generated starter projects
npm run e2e:runtime # browser and dev-server checks (run `npm exec -w e2e/tools -- puppeteer browsers install chrome` once)
npm run e2e:latest # generated projects installed for real with the local packages as tarballs
npm test # all workspaces: package unit tests, examples and e2e
CI (.github/workflows/ci.yml) runs the checks and npm run e2e on every push and pull request, and npm run e2e:runtime on pushes to next and on pull requests labelled e2e:runtime. e2e-latest.yml (manual and on release tags) runs npm run e2e:latest, and deps-canary.yml (manual) builds and tests the monorepo with updated dependencies and opens an issue when that fails.
Updating dependencies
npm run updater -- --dry-run # print the plan, write nothing
npm run updater -- --no-major # skip major updates and list them at the end
npm run updater
The updater bumps every workspace to the latest versions, skips an update when it would break a peer range of another dependency, and updates the dependency majors the starter writes into generated projects (packages/starter/src/versions.json).
Release
All workspaces share one version (Lerna fixed mode). Set it with:
npm run version:set -- 9.0.0
The script validates the version, then updates lerna.json, the root and every workspace package.json, and the @rockpack/* cross-references. It reads all files before writing any, so a malformed file leaves the tree untouched.
Publish with npm run production: every package runs its lint and npm publish, and prepublishOnly rebuilds the package first.
The MIT License
LICENSE
