Skip to content

feat(examples): add simple-html, Next.js proxy, and Next.js CSR + Kubernetes examples#26

Merged
olamide226 merged 3 commits intomainfrom
feat/more-examples
Mar 5, 2026
Merged

feat(examples): add simple-html, Next.js proxy, and Next.js CSR + Kubernetes examples#26
olamide226 merged 3 commits intomainfrom
feat/more-examples

Conversation

@olamide226
Copy link
Copy Markdown
Contributor

@olamide226 olamide226 commented Mar 5, 2026

What

Three new runnable examples expanding REP's coverage of deployment patterns, plus docs and README updates.

examples/simple-html/ — No build step

  • Single HTML file importing the SDK via esm.sh (no bundler, no npm install)
  • 2-stage Dockerfile: gateway download → FROM scratch (~6MB image)
  • Demonstrates the absolute minimum REP setup

examples/nextjs-proxy/ — Next.js SSR + proxy mode

  • Next.js 15 App Router with 'use client' components using useRep() / useRepSecure()
  • docker-compose.yml runs gateway (proxy mode) + Next.js server as two services
  • Config lives entirely in the gateway — the Next.js image is identical across all environments

examples/nextjs-csr-embedded/ — Static export + Kubernetes ConfigMap

  • next.config.ts: output: 'export' — builds a fully static site, served by gateway in embedded mode
  • 3-stage Dockerfile → FROM scratch final image (~8MB)
  • Full Kubernetes manifests:
    • configmap.yaml + secret.yaml — standard envFrom pattern (rolling restart on config change)
    • configmap-envfile.yaml + deployment.yaml variant — volume-mounted .env file with --hot-reload --hot-reload-mode=file_watch (zero pod restarts for feature flag changes)
    • service.yaml with Ingress (SSE timeout annotations included)
  • FeatureFlags.tsx component demonstrates useRep() hot-reload subscriptions

Why

The only runnable example was the React todo app. New adopters had no reference for:

  • Plain HTML / no-framework usage
  • Next.js integration (most popular React meta-framework)
  • Kubernetes deployment with dynamic ConfigMap-driven config

Type

  • feat — New feature (minor)

Scope

  • cli — CLI tooling
  • docs — Documentation site

Checklist

  • PR title follows conventional commit format (we squash-merge)
  • Tests added/updated for the change
  • All tests pass:
    • TypeScript: pnpm run test — 74 tests pass (no new test surface for example files)
  • No manual version bumps (release-please handles versioning)

@olamide226 @claude
feat(examples): add simple-html, Next.js proxy, and Next.js CSR + Kub…
ece9ce8 
…ernetes examples

Three new runnable examples covering a wider range of REP deployment patterns:

- examples/simple-html: plain HTML file with SDK loaded via esm.sh, no build
  step, 2-stage Dockerfile producing a FROM scratch image (~6MB)

- examples/nextjs-proxy: Next.js SSR app behind the gateway in proxy mode;
  docker-compose.yml orchestrates both services; client components use
  useRep() / useRepSecure() from @rep-protocol/react

- examples/nextjs-csr-embedded: Next.js static export (output: 'export')
  served by gateway in embedded mode; full Kubernetes manifests including
  ConfigMap-driven feature flags with two variants — standard envFrom
  (rolling restart) and volume-mounted ConfigMap + file_watch hot reload
  (zero pod restarts); FROM scratch final image

Also updates:
- docs: three new example pages in examples/ with FileTree, Steps, and Aside
  components; sidebar updated with all three entries
- README: new Examples table linking to all four examples

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings March 5, 2026 20:10
Copilot AI reviewed Mar 5, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds three new runnable examples (plain HTML, Next.js proxy/SSR, Next.js static export + Kubernetes) and documents them in the docs site and root README.

Changes:

  • Added examples/simple-html/ with a single-file SDK import + FROM scratch gateway container.
  • Added examples/nextjs-proxy/ showing Next.js SSR behind the gateway in proxy mode (Compose + Dockerfile).
  • Added examples/nextjs-csr-embedded/ showing Next.js static export served by the gateway + Kubernetes manifests, and linked all examples in docs/README.

Reviewed changes

Copilot reviewed 36 out of 36 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
examples/simple-html/index.html Plain HTML page demonstrating rep.get, rep.getSecure, and hot reload.
examples/simple-html/Dockerfile Builds a minimal FROM scratch embedded gateway image serving the HTML.
examples/simple-html/.rep.yaml Defines the example’s REP variable manifest.
examples/simple-html/.env.example Provides example runtime environment variables for the HTML example.
examples/nextjs-proxy/tsconfig.json TypeScript config for the Next.js proxy example.
examples/nextjs-proxy/src/components/EnvDisplay.tsx Client component demonstrating useRep / useRepSecure.
examples/nextjs-proxy/src/app/page.tsx Server component shell rendering the client env display.
examples/nextjs-proxy/src/app/layout.tsx App Router root layout + metadata.
examples/nextjs-proxy/package.json Dependencies and scripts for the Next.js proxy example.
examples/nextjs-proxy/next.config.ts Next.js config (currently comments-only).
examples/nextjs-proxy/docker-compose.yml Two-service Compose stack: gateway (proxy) + Next.js app.
examples/nextjs-proxy/Dockerfile Builds/runs the Next.js server container for proxy mode.
examples/nextjs-proxy/.rep.yaml REP manifest for proxy example variables + gateway settings.
examples/nextjs-proxy/.env.example Example env vars intended to be passed to the gateway.
examples/nextjs-proxy/.dockerignore Keeps build context small for the proxy example image.
examples/nextjs-csr-embedded/tsconfig.json TypeScript config for the CSR embedded example.
examples/nextjs-csr-embedded/src/components/FeatureFlags.tsx Demonstrates hot-reload-driven feature flag subscriptions.
examples/nextjs-csr-embedded/src/components/ConfigPanel.tsx Displays public + secure vars and payload metadata in CSR app.
examples/nextjs-csr-embedded/src/app/page.tsx Main page explaining CSR + embedded pattern and rendering panels.
examples/nextjs-csr-embedded/src/app/layout.tsx App Router root layout + metadata for CSR embedded example.
examples/nextjs-csr-embedded/package.json Dependencies and scripts for CSR embedded example.
examples/nextjs-csr-embedded/next.config.ts Configures static export (output: 'export').
examples/nextjs-csr-embedded/k8s/service.yaml Service + Ingress manifest for exposing the gateway in-cluster.
examples/nextjs-csr-embedded/k8s/secret.yaml Secret manifest for sensitive REP vars in Kubernetes.
examples/nextjs-csr-embedded/k8s/deployment.yaml Two Deployment variants: envFrom restart vs file-watch hot reload.
examples/nextjs-csr-embedded/k8s/configmap.yaml Standard ConfigMap holding REP_PUBLIC_* and gateway settings.
examples/nextjs-csr-embedded/k8s/configmap-envfile.yaml ConfigMap storing a .env file payload for file-watch hot reload.
examples/nextjs-csr-embedded/Dockerfile 3-stage build producing a FROM scratch gateway + static export image.
examples/nextjs-csr-embedded/.rep.yaml REP manifest for CSR embedded example vars + settings.
examples/nextjs-csr-embedded/.env.example Example local env file for CSR embedded example.
examples/nextjs-csr-embedded/.dockerignore Keeps build context small for CSR embedded example image.
docs/src/content/docs/examples/simple-html.mdx New docs page for the simple HTML embedded example.
docs/src/content/docs/examples/nextjs-proxy.mdx New docs page for Next.js proxy mode example.
docs/src/content/docs/examples/nextjs-csr-kubernetes.mdx New docs page for CSR embedded + Kubernetes example.
docs/astro.config.mjs Adds the new example docs pages to the sidebar nav.
README.md Adds an “Examples” section linking to all runnable examples.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread examples/simple-html/index.html Outdated
Comment thread examples/simple-html/index.html
Comment thread examples/nextjs-proxy/Dockerfile Outdated
Comment thread examples/nextjs-proxy/next.config.ts Outdated
Comment thread examples/nextjs-proxy/docker-compose.yml Outdated
Comment thread docs/src/content/docs/examples/simple-html.mdx Outdated
Comment thread examples/nextjs-csr-embedded/src/components/FeatureFlags.tsx Outdated
olamide226 and others added 2 commits March 5, 2026 20:22
@olamide226 @claude
feat(examples): add examples/README, integrity verification, and sing…
fb033b5 
…le-container Dockerfile

examples/README.md:
  Summarises all four examples (purpose, run commands, what each demonstrates).
  Includes a plain-English explanation of what rep.verify() / IntegrityBanner
  detects and what it does not claim.

Payload integrity verification (simple-html, nextjs-proxy, nextjs-csr-embedded):
  The gateway embeds a SHA-256 SRI hash as data-rep-integrity on the __rep__
  script tag. The SDK recomputes it via Web Crypto and sets _tampered on
  mismatch. rep.verify() surfaces this synchronously after the microtask
  settles (await Promise.resolve()).

  - simple-html: coloured banner (ok / failed / unavailable) rendered inline
  - nextjs-proxy + nextjs-csr-embedded: shared IntegrityBanner client
    component using useEffect + Promise.resolve() pattern

nextjs-proxy single-container flavour:
  Dockerfile.single: gateway + Next.js in one Node.js Alpine image for
  Kubernetes single-pod deployments (no docker-compose needed).
  docker-entrypoint.sh: starts Next.js in the background, gateway in the
  foreground (exec). next.config.ts updated to output: 'standalone'.
  Docs page updated with Tabs component showing both deployment options.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@olamide226 @claude
fix(examples): address PR review comments
9cbde36 
- simple-html: fix CSS badge class names (badge-dev → badge-development,
  badge-prod → badge-production) to match the ENV_NAME enum values used
  in the JavaScript class assignment

- nextjs-proxy/Dockerfile: remove --omit=dev from deps install; TypeScript
  is a devDependency and is required for the Next.js build step

- nextjs-proxy/docker-compose.yml: fix incorrect comment showing
  `docker compose up -e` (unsupported flag); corrected to
  `REP_PUBLIC_API_URL=... docker compose up`

- docs/examples/simple-html.mdx: correct misleading SRI note; SRI works
  on <script src> / <link> tags, not on bare ES module import statements;
  reword to describe self-hosting + integrity attribute approach

- nextjs-csr-embedded/FeatureFlags.tsx: add role="img" and aria-label
  to emoji indicators so enabled/disabled state is accessible to screen
  readers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@olamide226 olamide226 merged commit 6756695 into main Mar 5, 2026
9 checks passed
@olamide226 olamide226 deleted the feat/more-examples branch March 5, 2026 20:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@olamide226