How React JS Helps You Land a DevOps Engineer Job Faster

# .github/workflows/frontend.yml
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 -- --watchAll=false
      - run: npm run build
      - uses: actions/upload-artifact@v4
        with:
          name: web-build
          path: dist

npm install  -> may update package-lock.json, versions can drift
npm ci       -> uses package-lock.json exactly, fails if it is out of sync
Use npm ci in CI for repeatable builds.
Output folder: "dist" for Vite projects, "build" for Create React App.

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

  location / {
    try_files $uri /index.html;
    add_header Cache-Control "no-cache";
  }

  location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }

  gzip on;
  gzip_types text/css application/javascript application/json image/svg+xml;
}

# Multi-stage build: Node builds, Nginx serves
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

# Vite reads VITE_* variables at build time
VITE_API_URL=https://api.staging.example.com npm run build
# The value is baked into the JS files in dist/
grep -r "api.staging.example.com" dist/assets | head -1

// public/config.js — replaced per environment at deploy time
window.APP_CONFIG = { apiUrl: "https://api.example.com" };

// index.html loads it before the app:
// <script src="/config.js"></script>

// In React code:
const apiUrl = window.APP_CONFIG.apiUrl;

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web
spec:
  replicas: 2
  selector:
    matchLabels: { app: web }
  template:
    metadata:
      labels: { app: web }
    spec:
      containers:
        - name: web
          image: registry.example.com/web:1.0.3
          ports: [{ containerPort: 80 }]
          readinessProbe:
            httpGet: { path: /, port: 80 }

node_modules
dist
build
.git
.env*
coverage

Front-end release checklist
[ ] npm ci used, Node version pinned
[ ] Tests pass in CI
[ ] Correct environment config for target
[ ] index.html served with no-cache
[ ] Hashed assets cached long-term
[ ] Deep link refresh works (try_files)
[ ] Rollback image tag noted