React Application Deployment Checklist

React Application Deployment Checklist

Deploying a React application to production involves more than npm run build. Use this checklist to ship confidently.

Build Optimization

# Production build
NODE_ENV=production npm run build

# Analyze bundle size
npx source-map-explorer 'build/static/js/*.js'

• [ ] Production build with minification and tree-shaking
• [ ] Bundle size analyzed — no oversized dependencies
• [ ] Code splitting configured for routes
• [ ] Images optimized and served in modern formats (WebP/AVIF)

Environment Variables

# .env.production
REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=$npm_package_version

• [ ] All REACT_APP_* variables set for production
• [ ] No secrets in client-side environment variables
• [ ] API URLs point to production endpoints

Security

• [ ] Content Security Policy headers configured
• [ ] X-Frame-Options: DENY to prevent clickjacking
• [ ] Subresource Integrity for CDN assets
• [ ] No console.log statements in production
• [ ] Source maps uploaded to error tracker (not public)

Performance

• [ ] Lazy loading for below-the-fold components
• [ ] Service worker configured (or explicitly disabled)
• [ ] Critical CSS inlined
• [ ] Preconnect hints for external domains

<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://api.example.com" />

CDN & Caching

• [ ] Static assets served from CDN
• [ ] Cache-Control headers: max-age=31536000 for hashed assets
• [ ] index.html served with no-cache
• [ ] Gzip/Brotli compression enabled

Error Tracking

import * as Bugsly from '@bugsly/react';

Bugsly.init({ dsn: 'your-dsn' });

// Wrap your app with error boundary
<Bugsly.ErrorBoundary fallback={<ErrorFallback />}>
  <App />
</Bugsly.ErrorBoundary>

• [ ] Error tracking initialized before app renders
• [ ] Source maps uploaded for readable stack traces
• [ ] Error boundary wrapping top-level app component

Hosting

• [ ] SPA fallback configured (all routes serve index.html)
• [ ] HTTPS enforced
• [ ] Custom 404 page configured
• [ ] Redirect from www to non-www (or vice versa)