How do I compare two .gitignore files?

Use our GitIgnore Diff tool to paste both .gitignore files and instantly see the differences. The tool highlights added, removed, and unchanged patterns side-by-side.

Is there a free gitignore diff tool online?

Yes, GitIgnore.pro offers the only free online gitignore diff tool that compares two .gitignore files and shows detailed differences.

Can I compare gitignore files from different projects?

Absolutely! Our diff tool works with any .gitignore files, allowing you to compare patterns between different projects and tech stacks.

What is a .gitignore file?

A .gitignore file tells Git which files and directories to ignore when tracking changes in your repository. It helps keep your repository clean by excluding build files, dependencies, and other unnecessary files.

How to fix gitignore not working?

If your .gitignore file is not working, try: 1) Clear Git cache with 'git rm -r --cached .', 2) Make sure the file is named exactly '.gitignore', 3) Check file syntax and patterns, 4) Ensure the file is in the repository root.

How to use gitignore for Python projects?

For Python projects, include patterns like __pycache__/, *.pyc, .env, venv/, and .pytest_cache/. Use our Python gitignore template at https://gitignore.pro/python-gitignore for a complete setup.

React .gitignore Template & Complete Guide

Perfect .gitignore template for React projects. Covers Create React App, Next.js, Vite, and all React frameworks. Ignore node_modules, build files, and environment variables properly.

Deployment checklist for React teams

Run through this list before committing your next build and you will avoid 90% of noisy diffs we see in React repositories.

•Build outputs – make sure dist/, build/ and .next/ folders are ignored across all frameworks.
•Environment files – keep .env* in gitignore and use platform secrets for production keys.
•Testing artifacts – clear coverage/ and playwright/ Cypress outputs before merging.
•Storybook assets – ignore storybook-static/ unless you intentionally publish a static version.

⚛️ React .gitignore Template (2025)

# React .gitignore Template - Updated 2025

# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Build outputs
build/
dist/
out/
.next/
.vercel/
.netlify/

# React specific
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Testing
coverage/
*.lcov
.jest/
.nyc_output/

# IDEs and editors
.vscode/
.idea/
*.swp
*.swo
*~

# OS generated files
.DS_Store
.DS_Store?
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
Desktop.ini

# Logs
logs
*.log

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# Storybook build outputs
storybook-static/

# Temporary folders
tmp/
temp/

# Webpack
.webpack/

# Parcel
.cache/
.parcel-cache/

# Vite
.vite/

# Rollup
.rollup.cache/

# TypeScript
*.tsbuildinfo

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# Firebase
.firebase/
firebase-debug.log
firestore-debug.log

# Serverless directories
.serverless/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v0 lock file
yarn.lock

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

🎯 Framework-Specific Additions

Create React App

# Additional for CRA
.env.local
.env.development.local  
.env.test.local
.env.production.local

# Service worker
public/sw.js
public/workbox-*.js

Next.js

# Additional for Next.js
.next/
out/
.vercel/

# Next.js build info
.next-env.d.ts

# Generated types
types/generated/

Vite

# Additional for Vite
.vite/
dist-ssr/

# Vite dev server
vite.config.ts.timestamp-*

📁 What Files Should React .gitignore Ignore?

❌ Always Ignore

node_modules/ - Dependencies
build/ - Build output
.env* - Environment variables
coverage/ - Test coverage
*.log - Log files

✅ Always Keep

src/ - Source code
public/ - Static assets
package.json - Dependencies manifest
README.md - Documentation
.env.example - Env template

🔐 Environment Variables Best Practices

React Environment Variables

React apps only expose environment variables that start with REACT_APP_. Still ignore all .env files to prevent accidental exposure.

✅ .env.example (commit this)

REACT_APP_API_URL=https://api.example.com
REACT_APP_FIREBASE_KEY=your_key_here
REACT_APP_GOOGLE_ANALYTICS=GA-XXXXXX

❌ .env.local (ignore this)

REACT_APP_API_URL=https://api.myapp.com
REACT_APP_FIREBASE_KEY=actual_secret_key
REACT_APP_GOOGLE_ANALYTICS=GA-123456789

🔧 Common React .gitignore Issues

Problem: node_modules already tracked

If node_modules is already in your repository:

git rm -r --cached node_modules/
echo "node_modules/" >> .gitignore
git add .gitignore
git commit -m "Remove node_modules from tracking"

Problem: Build folder changes not ignored

Make sure your build output directory is properly ignored:

# For Create React App
build/

# For Next.js
.next/
out/

# For Vite
dist/

Problem: Package manager conflicts

Choose one package manager and ignore the others' lock files:

• Using npm? Ignore yarn.lock and pnpm-lock.yaml
• Using yarn? Ignore package-lock.json and pnpm-lock.yaml
• Using pnpm? Ignore package-lock.json and yarn.lock

🧪 Testing & Development Files

Testing Files to Ignore

coverage/ - Test coverage reports
.nyc_output/ - NYC coverage
.jest/ - Jest cache
*.lcov - Coverage files

Development Tools

.eslintcache - ESLint cache
.stylelintcache - Stylelint cache
storybook-static/ - Storybook build
*.tsbuildinfo - TypeScript build info

🛠️ Use Our React Tools

⚛️ React Template Generator

Generate a custom React .gitignore with your specific framework (CRA, Next.js, Vite) and requirements.

✅ Validate Your React .gitignore

Test your React .gitignore patterns to ensure they work correctly with your project structure.

❓ React .gitignore FAQ

Should I ignore package-lock.json in React projects?

No! Always commit package-lock.json (or yarn.lock). These files ensure everyone on your team uses the exact same dependency versions, preventing "works on my machine" issues.

Can I commit .env files in React?

Never commit .env files with actual values. Create .env.example with dummy values for your team. Remember: React only exposes REACT_APP_ variables to the browser, but other secrets might still be in .env files.

What about the build folder?

Always ignore build outputs (build/, dist/, .next/, out/). They're generated from your source code and can be rebuilt anytime. Committing them adds unnecessary bloat to your repository.

Should I ignore TypeScript build files?

Yes, ignore *.tsbuildinfo files. These are TypeScript's incremental build cache files. Also ignore any generated type files in types/generated/ or similar directories.

Ship production-ready React projects

Download the curated React template and automate clean deployments.

Download React template Compare with gitignore.io

Navigation

Quick Tools