Why Every DevOps Engineer Should Learn React.js in 2026

{
  "name": "team-dashboard",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest run"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.0",
    "vite": "^5.4.0",
    "vitest": "^2.0.0"
  }
}

// Vite exposes variables prefixed with VITE_ at build time
const apiUrl = import.meta.env.VITE_API_URL;

// In CI:
// VITE_API_URL=https://api.staging.example.com npm run build
// The value is written into the built JavaScript files.
// Never put secrets in VITE_ variables - they become public.

# Stage 1: build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL
RUN npm run build

# Stage 2: serve
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

name: frontend
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm test
      - run: npm run build
      - run: docker build --build-arg VITE_API_URL=${{ vars.API_URL }} -t team-dashboard:${{ github.sha }} .

server {
    listen 80;
    root /usr/share/nginx/html;

    # Hashed assets can be cached for a long time
    location /assets/ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Always revalidate index.html so new releases load
    location = /index.html {
        add_header Cache-Control "no-cache";
    }

    # Client-side routing fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

# Is the route served?
curl -I https://dashboard.example.com/reports
# Which cache headers come back?
curl -sI https://dashboard.example.com/index.html | grep -i cache-control
# Inside the container: are build files present?
kubectl exec deploy/team-dashboard -- ls /usr/share/nginx/html

import { useEffect, useState } from "react";

export default function DeployStatus() {
  const [services, setServices] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch("/api/deployments")
      .then(r => (r.ok ? r.json() : Promise.reject(r.status)))
      .then(setServices)
      .catch(() => setError("Could not load deployments"));
  }, []);

  if (error) return <p role="alert">{error}</p>;
  return (
    <table>
      <thead><tr><th>Service</th><th>Version</th><th>Status</th></tr></thead>
      <tbody>
        {services.map(s => (
          <tr key={s.name}><td>{s.name}</td><td>{s.version}</td><td>{s.status}</td></tr>
        ))}
      </tbody>
    </table>
  );
}

React for DevOps engineers - focused plan
1. JavaScript basics: functions, arrays, promises, fetch
2. React basics: components, props, state, useEffect
3. Build tools: npm scripts, Vite, build output
4. Routing and environment variables
5. Testing basics with Vitest
6. Build one internal dashboard end to end

Frontend release checklist
[ ] npm ci + tests pass in CI
[ ] Correct API URL for the environment
[ ] No secrets in front-end env vars
[ ] Routing fallback configured
[ ] Cache headers: no-cache index, long-cache assets
[ ] Smoke test key pages after deploy