How to add an effective .gitignore file to your React project

Creating a new React app

When creating a React app using

npx create-react-app <my_app_name>

a .gitignore file is provided and ignores the common files that should not be included in your source repository. The default file will contain the following:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

This .gitignore really provides most everything you’ll probably need while developing your React app. I’ve used it frequently, and I haven’t typically had much of a need to change it in any way.

Open Source Project for .gitignore Files

GitHub has an open-source repository of common .gitignore files you might find useful for the projects you’re doing. This did not have a .gitignore specific to React, but did have a .gitignore for node applications (which covers React, Angular, and any of the innumerable other things that run on Node).

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

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

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# 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 Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

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

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

I have experimented with this, and it works for React projects. However, the boilerplate that comes with create-react-app typically is good enough for my needs. This may be overkill, but is a great reference if you have additional artifacts that need to be ignored.

My .gitignore is not working

Recently, I had an old React app that I had set up years ago, and when I ran

npm install

all the node_module changes were added to git. For some reason my .gitignore seemed to have no effect. I tried multiple changes to .gitignore, but every time I tried to install dependencies, all the node_module packages were added to source control.

My Project and .gitignore file

The project I was working on is a budget tracker react app (github link). When it was originally built, no .gitignore file was used, so several of the node_module dependencies were pushed to the remote branch. However, at some point, a .gitignore file was added.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Problem when attempting to install

I was confused why my .gitignore file wasn’t working. I spent some time looking online to see what recommended templates there were for .gitignore files for React, thinking that maybe I was missing something. It didn’t matter what kind of files I tried. They all failed. I verified that the .gitignore files I used were all formatted correctly and designating the files that should be ignored by source control. I even went so far as completely wiping out my local branch and re-cloning it from the remote repository.

Clearing git cache

I did some more research on why git wasn’t ignoring what I had designated in my .gitignore file. Then I came across this Stack Overflow answer:

git rm -rf --cached .
git add .

I ran the first command, and I saw several node_modules removed and the changes in my local branch showed over 10,000 files deleted, because several node_modules files were checked into the remote branch. I then proceeded to run the second command to stage the changed files, committed, then pushed.

Finally a successful install

I ran the install again, and all the dependencies were successfully ignored by source control. If you find that .gitignore doesn’t seem to be ignoring the changes you want to exclude, clear your git cache using the commands above. I haven’t had to do this before, so in my experience, it is rare, but good to know in the cases that you’re finding a lot of files added to source control that should be ignored.