React in the Enterprise: Architecture, Secure Delivery, and Production Implementation

Overview

React is a declarative JavaScript library for building user interfaces, especially single-page applications and complex front-end experiences. Enterprises adopt React because it supports reusable components, strong ecosystem integration, incremental modernization, and predictable UI composition across large engineering teams.

React is commonly used for customer portals, internal administration consoles, analytics dashboards, and identity-aware applications. In enterprise environments, its value comes from maintainability, testability, compatibility with TypeScript, and support for modern delivery patterns such as static generation, server-side rendering, and containerized deployment.

Architecture

A production React platform usually includes the UI application, a build pipeline, a web server or CDN, API backends, and enterprise identity services.

Core components

• React UI layer for rendering components and managing state
• Router such as react-router-dom for navigation
• State/data layer using React Query, Redux Toolkit, or context
• Build tooling with Vite for fast builds and optimized assets
• Reverse proxy or CDN such as NGINX, CloudFront, or Azure Front Door
• API services exposed through REST or GraphQL
• Identity provider such as Microsoft Entra ID or Okta using OIDC/OAuth 2.0

Deployment models

• Static SPA hosted on object storage and CDN
• Containerized app served by NGINX in Kubernetes
• SSR/hybrid with frameworks like Next.js when SEO or edge rendering is required

Data flow

[User Browser] ---- 1. HTTPS request ----> [CDN/WAF] ---- 2. static assets ----> [React App]
[React App] ---- 3. OIDC auth redirect ----> [Microsoft Entra ID]
[Microsoft Entra ID] ---- 4. ID/Access token ----> [React App]
[React App] ---- 5. Bearer token API call ----> [API Gateway]
[API Gateway] ---- 6. routed request ----> [Backend Services]
[Backend Services] ---- 7. data ----> [API Gateway] ---- 8. JSON response ----> [React App]

Implementation Guide

1. Create the application with Vite and React.

npm create vite@latest enterprise-react-app -- --template react-ts
cd enterprise-react-app
npm install
npm install react-router-dom @tanstack/react-query
npm install @azure/msal-browser @azure/msal-react
npm run build

1. Add environment configuration in .env.production.

VITE_API_BASE_URL=https://api.example.com
VITE_AAD_CLIENT_ID=11111111-2222-3333-4444-555555555555
VITE_AAD_TENANT_ID=aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee

1. Build a production image.

docker build -t enterprise-react-app:1.0.0 .

1. Deploy behind NGINX with strict security headers and SPA routing.
2. Publish through CI/CD with signed artifacts, dependency scanning, and environment-specific secrets.

Production NGINX config

server {
  listen 80;
  server_name _;
  root /usr/share/nginx/html;
  index index.html;
  add_header X-Frame-Options "DENY" always;
  add_header X-Content-Type-Options "nosniff" always;
  add_header Referrer-Policy "strict-origin-when-cross-origin" always;
  add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https://api.example.com https://login.microsoftonline.com; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none';" always;
  location / {
    try_files $uri /index.html;
  }
}

Code Examples

1. Build and deploy with Docker

cat > Dockerfile <<'EOF'
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:1.27-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
EOF
docker build -t enterprise-react-app:1.0.0 .

2. Kubernetes deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: enterprise-react-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: enterprise-react-app
  template:
    metadata:
      labels:
        app: enterprise-react-app
    spec:
      containers:
        - name: web
          image: registry.example.com/enterprise-react-app:1.0.0
          ports:
            - containerPort: 80
          resources:
            requests:
              cpu: "100m"
              memory: "128Mi"
            limits:
              cpu: "500m"
              memory: "256Mi"
---
apiVersion: v1
kind: Service
metadata:
  name: enterprise-react-app
spec:
  selector:
    app: enterprise-react-app
  ports:
    - port: 80
      targetPort: 80

3. Front-end environment contract

{
  "appName": "enterprise-react-app",
  "apiBaseUrl": "https://api.example.com",
  "auth": {
    "authority": "https://login.microsoftonline.com/aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee",
    "clientId": "11111111-2222-3333-4444-555555555555",
    "redirectUri": "https://app.example.com"
  },
  "security": {
    "cspEnabled": true,
    "requireHttps": true,
    "sessionStorageTokens": true
  }
}

Security Hardening

• Enforce HTTPS only with HSTS at the edge.
• Use OIDC Authorization Code Flow with PKCE for browser-based authentication.
• Never store long-lived secrets in the React bundle; use runtime configuration and backend token exchange where needed.
• Apply Content Security Policy, X-Frame-Options, and Referrer-Policy.
• Restrict API CORS to approved origins only.
• Sign builds, pin dependencies with npm ci, and scan with SCA tools such as Snyk or GitHub Advanced Security.
• Encrypt data in transit with TLS 1.2+ and rely on backend encryption for data at rest.
• Use role-based access control in the API, not only UI-based hiding of features.

Comparison

Troubleshooting

1. SPA routes returning 404

Log sample:

10.0.4.12 - - [14/Nov/2026:09:12:33 +0000] "GET /reports/monthly HTTP/1.1" 404 153 "-" "Mozilla/5.0"

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

2. CORS failure to API

Log sample:

Access to fetch at 'https://api.example.com/v1/users' 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 exact application origin to the API CORS allowlist and permit required methods and headers.

3. OIDC redirect mismatch

Log sample:

AADSTS50011: The redirect URI 'https://app.example.com/auth/callback' specified in the request does not match the redirect URIs configured for the application.

Fix: Register the exact redirect URI in Microsoft Entra ID and keep environment values synchronized across stages.

Best Practices

Do

• Use TypeScript and shared component libraries for consistency.
• Keep configuration externalized through environment variables and deployment manifests.
• Cache immutable assets with content hashes.
• Protect APIs with centralized authorization checks.
• Add observability through browser telemetry and release correlation IDs.

Don't

• Do not embed API secrets in client code.
• Do not rely on front-end route guards as the only access control.
• Do not disable CSP just to accommodate unsafe scripts; refactor integrations instead.
• Do not deploy unpinned dependencies with npm install in CI when npm ci is available.