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
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.
- 🎓 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$1syntax. - 🏆 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 inlocalStorage. - 📚 Reference — printable cheatsheet covering the basics, character classes, quantifiers, anchors, groups, look-around, flags, replacement specials and special characters.
- 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
npm install
npm run devThen 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.
npm run test # vitest + tsc + eslint + prettier
npm run test-e2e # Playwright (Chromium) end-to-end suitenpm 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.
npm run build
npm run previewThe static site is emitted to dist/.
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 -dWith no COMPOSE_FILE uncommented, docker compose uses compose.yaml.
Publishes the static site on PORT (default 10604), which is also the
port the container serves on.
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.
Public HTTPS via Cloudflare Tunnel, by default at regexp.lactame.com.
No host port is published.
- Cloudflare dashboard: Networking → Tunnels → Create a tunnel → Cloudflared connector.
- Copy the connector token into
.envasTUNNEL_TOKEN=.... - Open the tunnel, Published applications tab, add an application
with
Service = HTTP, URLregexp-cheminfo-org:10604, hostnameregexp.lactame.com.
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.
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.
| 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). |
See CHANGELOG.md. The file is managed automatically
by release-please based on Conventional Commits.