React .gitignore Template
React projects built with Create React App, Vite, or Next.js each have slightly different output directories and caching patterns, but they share a common core of files that must be excluded from version control. A comprehensive React .gitignore must account for all three build system variants if you want a single file that works across projects.
The node_modules exclusion is universal and most critical. React projects have large dependency trees — a fresh Create React App project installs over 1,400 packages. Committing node_modules would add hundreds of megabytes to your repository and make git operations slow. Always add node_modules to .gitignore before your first commit, or before running npm install if you forgot.
Build output varies by toolchain. Create React App compiles to build/. Vite compiles to dist/ by default (configurable). Next.js compiles to .next/ for the framework cache and out/ when using next export for static site generation. All of these are fully regenerable from source and should be excluded. Including all three patterns (build/, dist/, .next/, out/) in your React .gitignore future-proofs the file if you switch build tools.
Testing artifacts from Jest and React Testing Library: coverage/ directory (generated by jest --coverage), junit.xml report files, and .jest-cache/ if configured. The coverage directory contains HTML, JSON, and LCOV format coverage reports that can be gigabytes in size for large test suites.
Storybook generates its own build output (.storybook/public if configured, storybook-static/). If your project uses Storybook for component development, exclude the static build output.
For TypeScript React projects, the TypeScript compiler generates compiled JavaScript in tsconfig.json's outDir (often dist/ or build/). TypeScript's incremental compilation feature also creates *.tsbuildinfo files — exclude these with *.tsbuildinfo to prevent cross-developer state from being committed.
Environment-specific files (.env, .env.local, .env.development.local, .env.test.local, .env.production.local) all contain sensitive or environment-specific values. Create React App's convention includes all of these variants; Next.js adds .env*.local. Exclude all of them and commit a .env.example with placeholders.
Template Preview
{"environment":"react","includesNodeModules":true,"includesBuildOutput":true,"includesNextJS":true,"includesTesting":true,"includesTypeScript":true,"includesEnvFiles":true,"includesStorybook":true}Customize this template with your own details using the free generator:
▸Open in GeneratorFAQ
- Should I commit the .next/ directory for faster Vercel builds?
- No — but Vercel handles this for you automatically. Vercel caches the .next/ build output between deployments and restores the cache for incremental builds without you committing anything. The .next/ directory contains the build cache and development server state, which is environment-specific and should never be in version control. Committing it would cause cross-environment conflicts.
- Should I commit .eslintcache and .prettierignore?
- Commit .prettierignore and .eslintrc.* — these are configuration files that standardize code style for the whole team. Do not commit .eslintcache — it is a performance cache file that stores lint results to speed up subsequent runs and is specific to your machine's file paths and timestamps. Add .eslintcache to your .gitignore explicitly since ESLint creates it in the project root by default.
- The Vite build output folder is configurable — what pattern should I use?
- Vite defaults to dist/ but allows configuring build.outDir in vite.config.ts. For a universal React .gitignore, include both build/ and dist/. If your project customizes the output directory to something else, add that directory explicitly to your .gitignore. Include a comment in the .gitignore noting if you have customized the output directory so future developers understand why it is excluded.