Deployment & Optimization

Learn deployment strategies, performance optimization, and best practices for production React applications

80 min•By Priygop Team•Last updated: Feb 2026

Deployment Strategies

Example

// Deployment options for React apps
1. Vercel (Recommended for React)
2. Netlify
3. AWS Amplify
4. Firebase Hosting
5. GitHub Pages
6. Docker + Cloud Platforms

// Vercel deployment
npm install -g vercel

// vercel.json configuration
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ],
  "env": {
    "REACT_APP_API_URL": "https://your-api.com"
  }
}

// Netlify deployment
// netlify.toml
[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

// Environment variables
// .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_GA_TRACKING_ID=GA-XXXXXXXXX
REACT_APP_SENTRY_DSN=https://xxxxx@sentry.io/xxxxx

// Performance optimization
// 1. Code splitting
import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </Suspense>
    );
}

// 2. Image optimization
import { LazyLoadImage } from 'react-lazy-load-image-component';

function OptimizedImage({ src, alt }) {
    return (
        <LazyLoadImage
            src={src}
            alt={alt}
            effect="blur"
            placeholderSrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
        />
    );
}

// 3. Bundle analysis
npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};

// 4. Service Worker for PWA
// public/sw.js
const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
    '/',
    '/static/js/bundle.js',
    '/static/css/main.css',
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

// 5. SEO optimization
// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Your app description" />
    <meta name="keywords" content="react, javascript, web development" />
    <meta name="author" content="Your Name" />
    
    <!-- Open Graph -->
    <meta property="og:title" content="Your App Title" />
    <meta property="og:description" content="Your app description" />
    <meta property="og:image" content="%PUBLIC_URL%/og-image.jpg" />
    <meta property="og:url" content="https://yourapp.com" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Your App Title" />
    <meta name="twitter:description" content="Your app description" />
    <meta name="twitter:image" content="%PUBLIC_URL%/og-image.jpg" />
    
    <title>Your App Title</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
</html>

Performance Monitoring

Example

// Performance monitoring and analytics
// 1. React Profiler
import { Profiler } from 'react';

function onRenderCallback(
    id, // the "id" prop of the Profiler tree that has just committed
    phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
    actualDuration, // time spent rendering the committed update
    baseDuration, // estimated time to render the entire subtree without memoization
    startTime, // when React began rendering this update
    commitTime, // when React committed this update
    interactions // the Set of interactions belonging to this update
) {
    console.log(`Component ${id} took ${actualDuration}ms to render`);
}

function App() {
    return (
        <Profiler id="App" onRender={onRenderCallback}>
            <YourApp />
        </Profiler>
    );
}

// 2. Performance monitoring with Sentry
import * as Sentry from "@sentry/react";

Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    environment: process.env.NODE_ENV,
    integrations: [
        new Sentry.BrowserTracing(),
    ],
    tracesSampleRate: 1.0,
});

// 3. Google Analytics
import ReactGA from 'react-ga';

ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID);

function App() {
    useEffect(() => {
        ReactGA.pageview(window.location.pathname);
    }, []);

    return <YourApp />;
}

// 4. Custom performance hooks
function usePerformanceMonitor(componentName) {
    useEffect(() => {
        const startTime = performance.now();
        
        return () => {
            const endTime = performance.now();
            const duration = endTime - startTime;
            
            if (duration > 100) {
                console.warn(`${componentName} took ${duration.toFixed(2)}ms to render`);
            }
        };
    });
}

// 5. Error boundaries with monitoring
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        Sentry.captureException(error, { extra: errorInfo });
    }

    render() {
        if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}

// 6. Bundle size monitoring
// package.json
{
  "scripts": {
    "analyze": "npm run build && npx webpack-bundle-analyzer build/static/js/*.js",
    "build:analyze": "GENERATE_SOURCEMAP=false npm run build && npx webpack-bundle-analyzer build/static/js/*.js"
  }
}

// 7. Lighthouse CI
// .lighthouserc.js
module.exports = {
    ci: {
        collect: {
            url: ['http://localhost:3000'],
            startServerCommand: 'npm start',
        },
        assert: {
            assertions: {
                'categories:performance': ['warn', { minScore: 0.8 }],
                'categories:accessibility': ['error', { minScore: 0.9 }],
                'categories:best-practices': ['warn', { minScore: 0.8 }],
                'categories:seo': ['warn', { minScore: 0.8 }],
            },
        },
        upload: {
            target: 'temporary-public-storage',
        },
    },
};

Try It Yourself — Real-World Projects

Try It Yourself — Real-World ProjectsHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #282c34; color: white; }
  .app { background: #363c48; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); max-width: 500px; margin: auto; }
  h1 { color: #61DAFB; }
  .counter { display: flex; align-items: center; gap: 15px; margin: 20px 0; }
  button { background: #61DAFB; color: #282c34; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px; }
  button:hover { background: #4fa8c9; }
  .count { font-size: 32px; font-weight: bold; color: #61DAFB; min-width: 60px; text-align: center; }
  .items { margin-top: 15px; }
  .item { background: #282c34; padding: 10px; margin: 5px 0; border-radius: 6px; display: flex; justify-content: space-between; }
  input { padding: 8px 12px; border: none; border-radius: 6px; font-size: 14px; margin: 5px; width: 200px; }
  p { color: #abb2bf; }
</style>
</head>
<body>
<div class="app">
  <h1>⚛️ Performance Demo</h1>
  <p>Simulating React performance concepts!</p>
  <div class="counter">
    <button onclick="decrement()">−</button>
    <span class="count" id="count">0</span>
    <button onclick="increment()">+</button>
  </div>
  <input id="todoInput" placeholder="Add item..." />
  <button onclick="addItem()">Add</button>
  <div class="items" id="items"></div>
</div>
<script>
  let count = 0;
  let items = [];
  function increment() { count++; document.getElementById('count').textContent = count; }
  function decrement() { count--; document.getElementById('count').textContent = count; }
  function addItem() {
    const input = document.getElementById('todoInput');
    if (input.value.trim()) {
      items.push(input.value.trim());
      input.value = '';
      renderItems();
    }
  }
  function removeItem(i) { items.splice(i, 1); renderItems(); }
  function renderItems() {
    const el = document.getElementById('items');
    el.innerHTML = items.map((item, i) =>
      '<div class="item"><span>' + item + '</span><button onclick="removeItem(' + i + ')">✕</button></div>'
    ).join('');
  }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #282c34; color: white; }
  .app { background: #363c48; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); max-width: 500px; margin: auto; }
  h1 { color: #61DAFB; }
  .counter { display: flex; align-items: center; gap: 15px; margin: 20px 0; }
  button { background: #61DAFB; color: #282c34; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px; }
  button:hover { background: #4fa8c9; }
  .count { font-size: 32px; font-weight: bold; color: #61DAFB; min-width: 60px; text-align: center; }
  .items { margin-top: 15px; }
  .item { background: #282c34; padding: 10px; margin: 5px 0; border-radius: 6px; display: flex; justify-content: space-between; }
  input { padding: 8px 12px; border: none; border-radius: 6px; font-size: 14px; margin: 5px; width: 200px; }
  p { color: #abb2bf; }
</style>
</head>
<body>
<div class="app">
  <h1>⚛️ Performance Demo</h1>
  <p>Simulating React performance concepts!</p>
  <div class="counter">
    <button onclick="decrement()">−</button>
    <span class="count" id="count">0</span>
    <button onclick="increment()">+</button>
  </div>
  <input id="todoInput" placeholder="Add item..." />
  <button onclick="addItem()">Add</button>
  <div class="items" id="items"></div>
</div>
<script>
  let count = 0;
  let items = [];
  function increment() { count++; document.getElementById('count').textContent = count; }
  function decrement() { count--; document.getElementById('count').textContent = count; }
  function addItem() {
    const input = document.getElementById('todoInput');
    if (input.value.trim()) {
      items.push(input.value.trim());
      input.value = '';
      renderItems();
    }
  }
  function removeItem(i) { items.splice(i, 1); renderItems(); }
  function renderItems() {
    const el = document.getElementById('items');
    el.innerHTML = items.map((item, i) =>
      '<div class="item"><span>' + item + '</span><button onclick="removeItem(' + i + ')">✕</button></div>'
    ).join('');
  }
</script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|53 lines|2157 chars|✓ Valid syntax

UTF-8

Quick Quiz — Real-World Projects

Next Module →

Deployment & Optimization

Deployment Strategies

Performance Monitoring

Try It Yourself — Real-World Projects

Quick Quiz — Real-World Projects

Additional Resources

Recommended Reading

Online Resources