Building for Production

Building for Production

Your development build is optimized for you, the developer. It has helpful warnings, larger files, and slower performance. Production build flips that — optimized for your users with fast load times and tiny file sizes.

Running npm run build transforms your code into a bundle ready for the real world. Think of it like rough drafts becoming a polished final copy.

What Happens During Build

The build process minifies your code, removing spaces, comments, and shortening variable names. It tree-shakes unused code, combines files, and applies optimizations that make your app load faster.

// Your development code
function greetUser(userName) {
  const greeting = "Hello, " + userName + "!"
  console.log(greeting)
  return greeting
}

// What production build might look like
function e(n){return"Hello, "+n+"!"}

The logic stays the same, but the file is much smaller. Smaller files mean faster downloads, especially on mobile networks.

Environment Variables

Environment variables let you use different values for development and production. API keys, base URLs, feature flags — anything that changes between environments.

// .env.development
REACT_APP_API_URL=http://localhost:3001/api
REACT_APP_ENABLE_ANALYTICS=false

// .env.production
REACT_APP_API_URL=https://api.myapp.com
REACT_APP_ENABLE_ANALYTICS=true

// In your code
const apiUrl = process.env.REACT_APP_API_URL
const analytics = process.env.REACT_APP_ENABLE_ANALYTICS === 'true'

Files starting with REACT_APP_ get injected into your build automatically. Never put secrets like API keys in these files — they end up in the client bundle where anyone can see them.

Bundle Analysis

Bundle analysis shows you what is in your build and how big each piece is. It helps you find and remove bloat.

npm install --save-dev source-map-explorer

# Add to package.json scripts
# "analyze": "source-map-explorer 'build/static/js/*.js'"

npm run build && npm run analyze

The analysis tool shows a visual breakdown of your bundle. Large dependencies stand out immediately. If you see a library taking up 200KB, maybe you can find a lighter alternative.