React in the Enterprise: Architecture, Secure Delivery, and Operational Best Practices

Overview

React is a JavaScript library for building component-based user interfaces, primarily for single-page applications and complex frontend experiences. Its core purpose is to help teams create reusable UI components, manage state efficiently, and deliver responsive user experiences across large applications.

Enterprises use React because it supports modular development, strong ecosystem integration, and incremental adoption. It fits well with micro-frontend strategies, API-driven backends, design systems, and CI/CD pipelines. React also aligns with modern engineering practices such as TypeScript adoption, automated testing, and edge or CDN-based deployment.

Architecture

A typical enterprise React architecture includes:

• Presentation layer built from reusable components
• State management using React Context, Redux Toolkit, or TanStack Query
• Routing through react-router-dom
• Build tooling with Vite, Webpack, or Next.js
• API integration with REST or GraphQL services
• Observability via Sentry, Datadog RUM, or OpenTelemetry-compatible tooling

Core components

• UI components: buttons, forms, tables, layouts
• Feature modules: billing, identity, reporting, admin
• Shared services: authentication client, API client, logging, feature flags
• Security controls: CSP headers, token handling, dependency scanning

Deployment models

• Static hosting on NGINX, Azure Static Web Apps, Amazon S3 with CloudFront
• Containerized delivery using Docker and Kubernetes
• Server-side rendering with Next.js for SEO and performance-sensitive workloads
• Micro-frontends using Module Federation for domain-aligned teams

Data flow

React generally uses one-way data flow:

1. User action triggers an event.
2. Component updates local or shared state.
3. API client calls backend services.
4. State changes re-render affected components.
5. Telemetry captures errors and performance signals.

Implementation Guide

1. Create the application

npm create vite@latest enterprise-react-app -- --template react-ts
cd enterprise-react-app
npm install
npm install react-router-dom @reduxjs/toolkit react-redux axios
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Add a production build script

Update package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

3. Configure NGINX for SPA delivery

Create nginx.conf:

events: {}
http:
  server:
    listen: 8080
    root: /usr/share/nginx/html
    include: /etc/nginx/mime.types
    location /:
      try_files $uri /index.html
      add_header X-Frame-Options "DENY"
      add_header X-Content-Type-Options "nosniff"
      add_header Referrer-Policy "strict-origin-when-cross-origin"

4. Build and containerize

npm run build
docker build -t enterprise-react-app:1.0.0 .
docker run -p 8080:8080 enterprise-react-app:1.0.0

5. Wire API access securely

• Store API base URLs in environment variables such as VITE_API_BASE_URL.
• Use OAuth 2.0 or OIDC with PKCE for browser-based authentication.
• Keep tokens in memory where possible, not local storage.

Code Examples

Example 1: Build and deploy commands

npm ci
npm run build
kubectl create namespace web
kubectl apply -n web -f k8s/deployment.yaml
kubectl rollout status deployment/react-frontend -n web

Example 2: Kubernetes deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-frontend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-frontend
  template:
    metadata:
      labels:
        app: react-frontend
    spec:
      containers:
        - name: react-frontend
          image: registry.example.com/react-frontend:1.0.0
          ports:
            - containerPort: 8080
          securityContext:
            runAsNonRoot: true
            allowPrivilegeEscalation: false
            readOnlyRootFilesystem: true

Example 3: Frontend runtime configuration

{
  "apiBaseUrl": "https://api.example.com",
  "sentryDsn": "https://examplePublicKey@o0.ingest.sentry.io/0",
  "featureFlags": {
    "enableAdminReports": true,
    "useNewDashboard": false
  }
}

Security Hardening

• Enforce HTTPS everywhere and terminate TLS with modern ciphers.
• Apply Content Security Policy to reduce XSS risk.
• Use OIDC/OAuth 2.0 with PKCE for user authentication.
• Avoid storing access tokens in localStorage; prefer secure cookies or in-memory storage.
• Sanitize and validate all user input before rendering or submission.
• Enable dependency scanning with tools such as GitHub Dependabot, Snyk, or npm audit.
• Restrict CI/CD access using least privilege and signed artifacts.
• Add Subresource Integrity where third-party assets are unavoidable.

Comparison

Troubleshooting

1. SPA route returns 404 after refresh

Log sample:

2026/08/28 10:14:22 [error] 22#22: *15 open() "/usr/share/nginx/html/users/42" failed (2: No such file or directory), client: 10.0.4.18, request: "GET /users/42 HTTP/1.1", host: "app.example.com"

Fix: Configure try_files $uri /index.html in NGINX so client-side routes resolve correctly.

2. CORS failure when calling backend API

Log sample:

Access to XMLHttpRequest at 'https://api.example.com/v1/reports' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Fix: Add the correct Access-Control-Allow-Origin, methods, and headers on the API gateway or backend.

3. Production build fails in CI

Log sample:

src/components/AdminPanel.tsx(18,9): error TS2322: Type 'undefined' is not assignable to type 'string'.
Error: Process completed with exit code 2.

Fix: Align TypeScript types with API responses, enable strict null checks, and fail fast during pull request validation.

Best Practices

Do

• Use TypeScript for maintainability and safer refactoring.
• Adopt a design system with shared components and accessibility rules.
• Split bundles by route or feature to improve load times.
• Centralize API clients for auth headers, retries, and telemetry.
• Instrument the frontend with error tracking and real user monitoring.

Don't

• Do not store secrets in frontend code or public environment files.
• Do not overuse global state for purely local component behavior.
• Do not disable linting or type checks to speed delivery.
• Do not trust browser input without backend validation.
• Do not deploy without cache strategy; use hashed assets and controlled CDN invalidation.