Why Every Cloud Engineer Should Learn React JS in 2026

# Requires Node.js 18+ and npm
npm create vite@latest cloud-console -- --template react
cd cloud-console
npm install

# Start the dev server (http://localhost:5173)
npm run dev

# Production build -> static files in dist/
npm run build
ls dist
# index.html  assets/

cloud-console/
  index.html          # entry HTML
  package.json        # scripts: dev, build, preview
  vite.config.js
  src/
    main.jsx          # mounts <App /> into #root
    App.jsx           # top-level component
    components/
      InstanceTable.jsx
  dist/               # created by npm run build
    index.html
    assets/index-[hash].js
    assets/index-[hash].css

import { useEffect, useState } from "react";

const API = import.meta.env.VITE_API_URL; // set in .env, not a secret

export default function InstanceTable() {
  const [rows, setRows] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${API}/instances`)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(setRows)
      .catch((e) => setError(e.message));
  }, []);

  if (error) return <p>Could not load instances: {error}</p>;
  return (
    <table>
      <thead><tr><th>ID</th><th>State</th><th>Owner</th></tr></thead>
      <tbody>
        {rows.map((i) => (
          <tr key={i.id}><td>{i.id}</td><td>{i.state}</td><td>{i.owner}</td></tr>
        ))}
      </tbody>
    </table>
  );
}

# lambda_function.py — runs with a read-only IAM role
import json
import boto3

ec2 = boto3.client("ec2")

def lambda_handler(event, context):
    rows = []
    for page in ec2.get_paginator("describe_instances").paginate():
        for res in page["Reservations"]:
            for inst in res["Instances"]:
                tags = {t["Key"]: t["Value"] for t in inst.get("Tags", [])}
                rows.append({
                    "id": inst["InstanceId"],
                    "state": inst["State"]["Name"],
                    "owner": tags.get("Owner", "untagged"),
                })
    return {
        "statusCode": 200,
        "headers": {"Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "https://console.example.com"},
        "body": json.dumps(rows),
    }

#!/usr/bin/env bash
set -euo pipefail
BUCKET="my-cloud-console-site"
DIST_ID="E1234567890ABC"

npm ci
npm run build

# Hashed assets: cache for a long time
aws s3 sync dist/assets "s3://$BUCKET/assets" --delete \
  --cache-control "public,max-age=31536000,immutable"

# index.html: always revalidate
aws s3 cp dist/index.html "s3://$BUCKET/index.html" \
  --cache-control "no-cache"

# Clear the CDN copy of the entry page
aws cloudfront create-invalidation --distribution-id "$DIST_ID" \
  --paths "/index.html"

# Is the bucket blocked from public access?
aws s3api get-public-access-block --bucket my-cloud-console-site

# What headers does CloudFront return?
curl -sI https://console.example.com/ | grep -iE "cache-control|x-cache|content-type"

# Does a deep link work after refresh?
curl -s -o /dev/null -w "%{http_code}\n" https://console.example.com/reports
# Expect 200 once error responses map to /index.html

# Check invalidation status
aws cloudfront list-invalidations --distribution-id E1234567890ABC

# .github/workflows/deploy.yml
name: deploy-frontend
on:
  push:
    branches: [main]
permissions:
  id-token: write   # for OIDC role assumption
  contents: read
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: arn:aws:iam::123456789012:role/frontend-deploy
          aws-region: ap-south-1
      - run: aws s3 sync dist/ s3://my-cloud-console-site --delete
      - run: aws cloudfront create-invalidation --distribution-id E1234567890ABC --paths "/index.html"

REACT HOSTING REVIEW CHECKLIST

[ ] Bucket has Block Public Access ON
[ ] CloudFront uses Origin Access Control to read the bucket
[ ] HTTPS only (redirect HTTP to HTTPS)
[ ] ACM certificate for custom domain is in us-east-1
[ ] Default root object = index.html
[ ] 403/404 -> /index.html with 200 (if app uses client routing)
[ ] index.html Cache-Control: no-cache
[ ] assets/* long cache (hashed file names)
[ ] No secrets in VITE_ variables or the build
[ ] Deploy role limited to this bucket and distribution
[ ] Access logs or monitoring enabled

CORS FOR THE CONSOLE API (API Gateway HTTP API example)

Allowed origins : https://console.example.com
Allowed methods : GET, POST, OPTIONS
Allowed headers : content-type, authorization
Max age         : 3600
Credentials     : true only if you send cookies

Do NOT use * for origins on an authenticated internal API.
Test preflight:
curl -si -X OPTIONS https://api.example.com/instances \
  -H "Origin: https://console.example.com" \
  -H "Access-Control-Request-Method: GET"