Skip to content

Latest commit

 

History

26 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

regexp.cheminfo.org

Interactive pedagogic tool to learn regular expressions — guided tutorial, live playground, self-paced exercises with hints and instant validation, and a complete cheatsheet.

This website is provided by Luc Patiny from EPFL

Live site: https://regexp.cheminfo.org

A live regular expression tester with a railroad diagram, a guided tutorial, an exercise module with hints and instant validation, and a printable cheatsheet — all built to the cheminfo ensure-string standards.

Features

  • 🎓 Tutorial — 8 guided steps walking the student through literals, escaping, character classes, shortcuts, quantifiers, anchors, groups and look-around. Each step preloads a regex and a sample text the student can edit live.
  • 🧪 Playground — type any regex, toggle all six flags (g, i, m, s, u, y), paste any text and see matches highlighted in real time. Optional replacement preview with $& and $1 syntax.
  • 🏆 Exercises — 11 increasing-difficulty challenges, from "match the word hello" to "find a duplicate word with a backreference". Each exercise has test cases that must all pass for the regex to be accepted. Students can reveal hints one at a time, toggle a live railroad diagram of the regex they are writing, or peek at the sample solution. Progress is persisted in localStorage.
  • 📚 Reference — printable cheatsheet covering the basics, character classes, quantifiers, anchors, groups, look-around, flags, replacement specials and special characters.

Stack

  • React 18 + TypeScript 6 + Vite 8
  • BlueprintJS for UI components
  • Custom-built railroad-style regex diagram (no external regex engine)
  • Vitest for unit tests, ESLint 9 + Prettier for linting
  • Static-only deployment — no backend, no API calls

Local development

npm install
npm run dev

Then open http://localhost:10605. The dev server port is PORT + 1, so the single derived PORT (10604, from 2026-06-04 — the creation date's own number was already taken by a sibling site) drives both the container and the dev server. Override with VITE_PORT.

Tests, lint and type checks

npm run test       # vitest + tsc + eslint + prettier
npm run test-e2e   # Playwright (Chromium) end-to-end suite

npm run test runs the fast gate: unit tests with coverage, the TypeScript checker, ESLint and Prettier.

npm run test-e2e boots the Vite dev server and exercises the live UI (tutorial, playground, exercises with localStorage persistence, cheatsheet, glossary, about, header links, hash routing). First-time setup requires npx playwright install --with-deps chromium. Use npm run test-e2e-ui for the interactive Playwright runner.

Production build

npm run build
npm run preview

The static site is emitted to dist/.

Docker deployment

Three deployment modes are shipped, one compose file each. Every one exposes both image: and build: ., so you can either pull the released image (docker compose pull && docker compose up -d) or build from the current checkout (docker compose up -d --build).

cp .env.example .env
# uncomment exactly one COMPOSE_FILE line, then:
docker compose up -d

With no COMPOSE_FILE uncommented, docker compose uses compose.yaml.

Port mode (compose.yaml)

Publishes the static site on PORT (default 10604), which is also the port the container serves on.

Traefik (compose.traefik.yaml)

For an existing Traefik instance serving regexp.cheminfo.org. Requires an external Docker network named traefik with a websecure entrypoint and a letsencrypt cert resolver. No host port is published. Adjust the Host(...) label for a different hostname.

Cloudflare Tunnel (compose.cloudflared.yaml)

Public HTTPS via Cloudflare Tunnel, by default at regexp.lactame.com. No host port is published.

  1. Cloudflare dashboard: Networking → Tunnels → Create a tunnel → Cloudflared connector.
  2. Copy the connector token into .env as TUNNEL_TOKEN=....
  3. Open the tunnel, Published applications tab, add an application with Service = HTTP, URL regexp-cheminfo-org:10604, hostname regexp.lactame.com.

Deploy and rollback

Deployment is handled by the deploy script installed on the server, not by anything in this repository. Never deploy by hand with git pull && docker compose up -d --build: the build overwrites the running tag in place while git pull moves the source underneath it, leaving neither an image nor a commit to go back to.

What this repository provides is what that script consumes: every compose file resolves ${IMAGE_NAME:-…}:${IMAGE_TAG:-latest}, so each build gets an immutable tag that stays reachable for a rollback, and both variables are declared in .env.example. The script rewrites IMAGE_TAG in .env and keeps its per-host state in .deploy/, which is gitignored.

Where the site is served

The site does not assume it owns the root of a host. SITE_URL is read at build time and carries the origin and the path together; its path half is what every asset, route, canonical link, social card and sitemap entry is written under, so putting the tool under a path is one variable and no code change:

SITE_URL=https://example.org/regexp/ npm run build
docker build --build-arg SITE_URL=https://example.org/regexp/ .

Left unset it is https://regexp.cheminfo.org/ — its own host, at the root of it — which is what every deployment does today. Note that a crawler only reads robots.txt from the root of a host, so a site mounted under a path is covered by whatever answers that root, not by the file the build writes.

Environment variables

Name Description
SITE_URL Build time only: where the site will be served, origin and mount path together. Unset, https://regexp.cheminfo.org/.
COMPOSE_FILE Deployment mode: compose.yaml (default), compose.traefik.yaml, compose.cloudflared.yaml.
PORT Port the container serves on, and publishes in port mode. Defaults to 10604.
IMAGE_NAME Image selected by every compose file. Defaults to ghcr.io/cheminfo/regexp.cheminfo.org.
IMAGE_TAG Tag deployed. Rewritten by the server's deploy script — do not edit by hand.
TUNNEL_TOKEN Cloudflare Tunnel token (cloudflared deployment only).

Changelog

See CHANGELOG.md. The file is managed automatically by release-please based on Conventional Commits.

License

MIT

Releases

Packages

Contributors

Languages