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

• Node.js 24.15 or higher

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:

• ENG: Server-Side Rendering from zero to hero
• RU: Server-Side Rendering с нуля до профи

---

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:

• @rockpack/tester - pre-configured Jest setup

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:

• Vite
• Next.js
• create-react-app
• Rome
• Estrella

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