Mocking up web app with Reactive-rr
-
🗂️ File based routing with layouts support, with a bundled skill to guide router usage
-
🎨 Tailwindcss - A utility-first CSS framework packed with classes
-
🌍 I18n ready — with a dedicated linter (eslint-plugin-lingui) and bundled skills to keep translations consistent
-
🦾 TypeScript, of course
-
🥊 Git hooks with lefthook
-
⚙️ Unit Testing with Vitest
-
🔎 Inspect code with - Vite Inspect, visit it at
/__inspect. code visualization (open stats.html file).
Reactive-rr requires Node >=20.x
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit ws-rush/reactive-rr my-reactive-app
cd my-reactive-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpmWhen you use this template, try follow the checklist to update your info properly
- Remove the
.githubfolder - Clean up the READMEs and remove routes
- Remove tests and write your own
And, enjoy :)
Just run and visit http://localhost:5173
pnpm devTo build the App, run
pnpm buildAnd you will see the generated file in dist that ready to be served.
First, build the reactive-rr image by opening the terminal in the project's root directory.
## SPA build
podman build -t reactive-rr-spa -f apps/web/Containerfile.spa apps/web
## MPA build
podman build -t reactive-rr-mpa -f apps/web/Containerfile.mpa apps/webRun the image and specify port mapping with the -p flag.
## SPA run
podman run --rm -p 8080:80 reactive-rr-spa:latest
## MPA run
podman run --rm -env-file apps/web/.env -p 3000:3000 reactive-rr-mpa:latestThis is a template, not a dependency — it evolves over time. Here's how to spot new releases and see exactly which files differ between your version and a newer one.
The template's version lives in the root package.json under "version" (e.g. 8.2.0-0). A bump there means a new release — compare it to the version you started from. Releases and version tags also appear on GitHub.
Tip: leave that version value untouched (in
package.jsonor aTEMPLATE_VERSIONfile) — it is your baseline. Overwriting it with your app's own version loses the reference you need to track upstream changes.
Compare the two versions inside the template (your baseline → the target version) to see which files changed — not against your own project, which has diverged.
Easiest: GitHub's compare view between the two version tags (no clone needed):
https://github.com/ws-rush/reactive-rr/compare/<your-version>...<target-version>
Or, in a clone of the template, list the changed files:
git diff <your-version>..<target-version> --stat # changed files
git diff <your-version>..<target-version> --name-only # file paths only
git diff <your-version>..<target-version> -- <file> # one file's diffThen port the changes that make sense into your project by hand.
Configure apps is a headeach, I loved vitesse template for vue, so I decided do one for react.