Skip to content

Welcome page

The welcome page is the visual entry point of the PerfShop stack. Displayed at container startup on its own port, it lists the exposed services with their URLs and any credentials. It is a pedagogical landing for students and instructors arriving on a freshly deployed environment.

Sources

welcome/index.html, welcome/welcome.js, welcome/welcome.css, welcome/entrypoint.sh, welcome/nginx.conf, welcome/Dockerfile, welcome/i18n/{fr,en}.json

Architecture

The perfshop-welcome container is a minimalist static Nginx image:

welcome/
├── Dockerfile        ← nginx:1.27-alpine + copies + ENTRYPOINT
├── entrypoint.sh     ← URL and i18n injection at startup
├── nginx.conf        ← static server port 3011
├── index.html        ← page structure
├── welcome.css       ← styles
├── welcome.js        ← service table construction
└── i18n/
    ├── fr.json
    └── en.json

At startup, entrypoint.sh replaces markers in index.html and welcome.js with the values of the environment variables (HOST_IP, PUBLIC_*_URL), then loads the i18n dictionary from i18n/<lang>.json and injects it as window.__I18N__ = {...} at the top of welcome.js.

This model allows building a single image and deploying it to several targets without rebuilding.

Port

The service listens on port 3011 (declared in nginx.conf and exposed by the Dockerfile). This port is dedicated to the welcome page and serves nothing else.

The two modes: ip and dns

The WELCOME_MODE variable controls the URL construction strategy:

Mode When to use it Behavior
ip (default) Docker Desktop, VPS, local Unix All URLs are built from HOST_IP and numeric ports (e.g., http://${HOST_IP}:9091)
dns NAS / production with domains Each URL is injected individually from the PUBLIC_*_URL variables (e.g., https://perfshop-frontend.perfshop.io)

IP mode

In ip mode, entrypoint.sh performs a series of sed -i calls that replace the __URL_FRONTEND__, __URL_API__, __URL_GRAFANA__, etc. markers with dynamically built URLs:

sed -i \
  -e "s|__HOST_IP__|${HOST_IP}|g" \
  -e "s|__URL_FRONTEND__|http://${HOST_IP}:9091|g" \
  -e "s|__URL_API__|http://${HOST_IP}:9080|g" \
  ...

Classroom students use this mode: a single HOST_IP (for example the instructor's machine IP, or localhost on Docker Desktop) is enough to generate all URLs.

DNS mode

In dns mode, each URL must be provided individually via a dedicated environment variable. The script reads:

  • PUBLIC_FRONTEND_URL
  • PUBLIC_API_URL
  • PUBLIC_MONITORING_URL
  • PUBLIC_GRAFANA_URL
  • PUBLIC_CHAOS_URL
  • PUBLIC_ADMIN_URL
  • PUBLIC_DOCS_URL
  • PUBLIC_SQUASH_URL
  • PUBLIC_SELENIUM_VNC_URL
  • PUBLIC_FORGEJO_URL
  • PUBLIC_SCRIPTS_URL
  • PUBLIC_JMETER_URL
  • PUBLIC_OPENSEARCH_URL

This is the mode used in production on a NAS with an HTTPS reverse proxy and dedicated subdomains for each service.

Internationalization

The PERFSHOP_LANG variable controls the language. entrypoint.sh reads /usr/share/nginx/html/i18n/<lang>.json; if the file does not exist, it logs a warning and falls back to fr. The JSON content is injected as window.__I18N__ = {...} at the top of welcome.js:

printf '// i18n — injected by entrypoint.sh\nwindow.__I18N__ = %s;\n\n' "${I18N_JSON}" > "${TMPFILE}"
cat "${WEBROOT}/welcome.js" >> "${TMPFILE}"
mv "${TMPFILE}" "${WEBROOT}/welcome.js"

The __lang__ key is added to the JSON before injection so that the JS knows which language is active. The final chmod 644 ensures that nginx can read the file generated at runtime (otherwise mktemp creates in 600, root-only → nginx worker returns 403).

The lang attribute of the <html> tag is also injected via sed on the __LANG__ marker in index.html.

Page structure

A simple banner with the PerfShop logo (⚡ lightning + title), a localized tagline ("Pedagogical Chaos Engineering Platform") and a green "Stack deployed" badge that visually indicates that all expected services are responding.

Hero

A central section containing:

  • A catchy title ("Welcome to PerfShop!")
  • A subtitle ("Your complete environment for performance testing, chaos engineering and QA is ready.")
  • A gray pill indicating the server IP (🖥️ Server: <HOST_IP>)

Service table

The heart of the page: an HTML table dynamically filled by welcome.js from window.__I18N__ and the URLs injected by entrypoint.sh. Each row follows the same format:

Service URL Description Account(s)
Frontend shop Clickable link PerfShop e-commerce storefront, chaos target —
Spring Boot API Clickable link Backend + /actuator/prometheus —
HTML monitoring Clickable link Real-time container + JVM dashboard —
Grafana Clickable link Observability: delivered dashboards admin / perfshop
Chaos Admin Clickable link Instructor panel + student page admin@perfshop.fr / perfshop
Documentation Clickable link MkDocs — this doc itself —
Squash TM Clickable link Test case management admin / admin
Selenium VNC Clickable link VNC view of Selenium browsers —
Forgejo Clickable link Self-hosted Git forgejo-admin / perfshop
Scripts UI Clickable link Web editor for Robot / pytest scripts admin@perfshop.fr / perfshop
JMeter UI Clickable link JMeter test launcher admin@perfshop.fr / perfshop
OpenSearch Clickable link Dashboards / log sink admin / perfshop

Labels and descriptions are translated from the i18n dictionary. The "Account(s)" column displays the deployment's default credentials — this is intentionally explicit for an isolated pedagogical environment; these values must be changed for any public exposure.

Some ancillary project services are not listed in this documentation. The page can also list other entries added by the local deployment — it simply displays what welcome.js feeds it from the available environment variables.

A minimalist footer with the license mention (AGPL-3.0), the link to perfshop.io and the author contact.

Environment variables consumed

Variable Mode Default
WELCOME_MODE Both ip
HOST_IP ip localhost
PERFSHOP_LANG Both fr
PUBLIC_FRONTEND_URL dns http://localhost:9091
PUBLIC_API_URL dns http://localhost:9080
PUBLIC_MONITORING_URL dns http://localhost:3001
PUBLIC_GRAFANA_URL dns http://localhost:3002
PUBLIC_CHAOS_URL dns http://localhost:3003
PUBLIC_ADMIN_URL dns http://localhost:3004
PUBLIC_DOCS_URL dns http://localhost:9087
PUBLIC_SQUASH_URL dns http://localhost:9086/squash
PUBLIC_SELENIUM_VNC_URL dns http://localhost:7900
PUBLIC_FORGEJO_URL dns http://localhost:3009
PUBLIC_SCRIPTS_URL dns http://localhost:3008
PUBLIC_JMETER_URL dns http://localhost:3005
PUBLIC_OPENSEARCH_URL dns http://localhost:5601

See the environment variables reference for the full details.