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.
⚛️ 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/- Dependenciesbuild/- Build output.env*- Environment variablescoverage/- Test coverage*.log- Log files
✅ Always Keep
src/- Source codepublic/- Static assetspackage.json- Dependencies manifestREADME.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 cachestorybook-static/- Storybook build*.tsbuildinfo- TypeScript build info
🛠️ Use Our React Tools
❓ 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.