Trying to run React app without running npm install first

Attempting to run a React application without first installing dependencies with npm install (or yarn install) will always fail because your project lacks the required packages to function. Here’s what you need to know to properly set up and run a React project.

Why You Must Run npm install First

1. Dependencies aren’t included in version control – Only package.json is committed, not the node_modules folder
2. All required packages are missing – React, Babel, Webpack, and other critical tools won’t be available
3. Build scripts won’t work – Commands like start, build, and test depend on installed packages
4. Custom configurations won’t load – Any project-specific setups require their dependencies

Proper Project Setup Workflow

1. First-Time Setup

# Clone the repository (if not already done)
git clone https://github.com/username/project.git
cd project

# Install all dependencies
npm install

# Start the development server
npm start

2. After Pulling New Changes

git pull origin main
npm install # In case package.json changed
npm start

Troubleshooting Missing Dependencies

If You Get “Command Not Found” Errors

# If npm itself isn't installed
# Install Node.js which includes npm:
# https://nodejs.org/

# Verify installation
node -v
npm -v

If You Get Module Not Found Errors

# Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# Clear npm cache
npm cache clean --force

# Reinstall fresh
npm install

Common Mistakes to Avoid

1. Running npm start immediately after clone
   ❌ git clone... → npm start
   ✅ git clone... → npm install → npm start
2. Assuming dependencies are included
   The node_modules folder should NEVER be committed to git
3. Skipping installation after pulling changes
   Always run npm install if package.json changed

Alternative Package Managers

If you prefer using Yarn:

# Install Yarn globally (if needed)
npm install -g yarn

# Then in your project
yarn install
yarn start

CI/CD Pipeline Setup

For automated environments, always include the install step:

# Example GitHub Actions workflow
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build

Understanding What npm install Does

1. Reads package.json and package-lock.json
2. Downloads all required packages from npm registry
3. Stores them in the node_modules folder
4. Links binaries to node_modules/.bin/
5. Generates/updates package-lock.json

Special Cases

When Package Versions Matter

If you need exact versions from the lockfile:

npm ci # Clean install (uses package-lock.json exactly)

For Monorepos

If using workspaces (like Lerna):

npm install
npm run bootstrap # If the project uses a bootstrapping command