원클릭으로 Manus에서 모든 스킬 실행

preview-worktree

스타8

포크3

업데이트2026년 7월 13일 06:13

Spin up live preview servers (frontend + backend) for an offshoot worktree on its own port slot (localhost:4201-4209), and tear them down after checking. Use when the user wants to preview a worktree's changes in the UI, see a branch running live, or stop a running preview.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

wiredmonash

wiredmonash/monstar

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Preview Worktree

Run a worktree's frontend and backend on their own ports so its changes can be checked in the browser without touching the main checkout's servers (4200/8080 stay reserved for main).

Port slots

Slot X (1-9) maps to frontend 4200+X and backend 8080+X. The scripts pick the lowest slot where both ports are free. One slot per worktree; re-running preview-up.sh on a worktree with a live preview reuses its slot.

Start

bash <this-skill-dir>/preview-up.sh <worktree-path>

The script allocates a slot, writes <worktree>/.preview/ (generated proxy config, PIDs, logs), starts both servers detached, waits until they answer, and prints the URL. Report the URL to the user. Logs: .preview/backend.log, .preview/frontend.log.

Visual verification

For UI changes, do not stop at HTTP status checks — screenshot the changed pages and look at them (the webapp-testing skill has the Playwright patterns). Conventions here:

Python with Playwright lives in the dedicated venv: ~/.venvs/playwright/bin/python. If it's missing on this machine, run bash <this-skill-dir>/ensure-playwright.sh once — it creates the venv and downloads Chromium.
Save screenshots to <worktree>/.preview/shots/ — it is inside the gitignored .preview/ dir and gets wiped by preview-down.sh. Never scatter shots in /tmp or the repo.
Point the browser at the slot URL (http://localhost:4200+X), wait for networkidle, then page.screenshot(path=..., full_page=True) and view the PNG with the Read tool. Compare against main's UI on 4200 when a before/after matters.
Skip with_server.py from webapp-testing — preview-up.sh/preview-down.sh already manage the servers.
Signed-in flows hit the Google OAuth origin limitation below; verify those on main's 4200 or skip.

Stop — always, once checking is done

bash <this-skill-dir>/preview-down.sh <worktree-path>

Kills both server process groups and deletes .preview/. Never leave a preview running after the user finishes checking; if the conversation moves on, stop it.

Considerations beyond the port

Build configuration: previews must NOT use the default development build config — its fileReplacement swaps in environment.development.ts, which hardcodes http://localhost:8080 and bypasses the proxy (that's main's backend: wrong server and a CORS block). The up script serves the preview configuration (relative /api URLs via environment.preview.ts, dev-speed build), falling back to production for worktrees branched before that config existed.
Proxy config: the frontend reaches the backend through the dev-server proxy. The up script generates a per-slot proxy file (/api prefix, no path rewrite — the backend mounts its routes under /api) targeting localhost:8080+X, passed via --proxy-config. The checked-in frontend/src/proxy.conf.json stays untouched; note its pathRewrite stripping /api does not match the backend's mounts, so don't copy it.
CORS: the backend allows only http://localhost:4200. Proxied /api calls are same-origin so previews work, but code that calls the backend port from the browser will be blocked. Treat that as a signal the code should use the proxy path.
Google sign-in: the OAuth client lists authorized JavaScript origins. If http://localhost:4201-4209 are not registered in the Google Cloud console, sign-in fails with an origin mismatch on preview ports. Features behind auth need those origins added once, or must be checked on main's 4200.
Shared MongoDB and Redis: the worktree copies backend/.env, so previews hit the same Atlas database and Upstash cache as main dev. Writes are real, and cache invalidations affect the shared cache. Do not run destructive flows just to "see" them.
swagger.json: a backend dev boot can regenerate backend/swagger.json and dirty the worktree. Do not commit that churn; if the branch did not intend swagger changes, restore the file before committing.
Dependencies: previews need node_modules in both frontend/ and backend/ (the offshoot setup script installs them). The up script refuses to start without them rather than half-booting.

이 저장소의 다른 Skills

같은 저장소

angular-component

wiredmonash/monstar

Create modern Angular standalone components following v18 best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.

2026-07-058

angular-routing

wiredmonash/monstar

Implement routing in Angular v18 applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.

2026-07-058

angular-signals

wiredmonash/monstar

Implement signal-based reactive state management in Angular v18. Use for creating reactive state with signal(), derived state with computed(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.

2026-07-058

name	preview-worktree
description	Spin up live preview servers (frontend + backend) for an offshoot worktree on its own port slot (localhost:4201-4209), and tear them down after checking. Use when the user wants to preview a worktree's changes in the UI, see a branch running live, or stop a running preview.

Preview Worktree

Run a worktree's frontend and backend on their own ports so its changes can be checked in the browser without touching the main checkout's servers (4200/8080 stay reserved for main).

Port slots

Start

bash <this-skill-dir>/preview-up.sh <worktree-path>

Visual verification

For UI changes, do not stop at HTTP status checks — screenshot the changed pages and look at them (the webapp-testing skill has the Playwright patterns). Conventions here:

Python with Playwright lives in the dedicated venv: ~/.venvs/playwright/bin/python. If it's missing on this machine, run bash <this-skill-dir>/ensure-playwright.sh once — it creates the venv and downloads Chromium.
Save screenshots to <worktree>/.preview/shots/ — it is inside the gitignored .preview/ dir and gets wiped by preview-down.sh. Never scatter shots in /tmp or the repo.
Point the browser at the slot URL (http://localhost:4200+X), wait for networkidle, then page.screenshot(path=..., full_page=True) and view the PNG with the Read tool. Compare against main's UI on 4200 when a before/after matters.
Skip with_server.py from webapp-testing — preview-up.sh/preview-down.sh already manage the servers.
Signed-in flows hit the Google OAuth origin limitation below; verify those on main's 4200 or skip.

Stop — always, once checking is done

bash <this-skill-dir>/preview-down.sh <worktree-path>

Kills both server process groups and deletes .preview/. Never leave a preview running after the user finishes checking; if the conversation moves on, stop it.

Considerations beyond the port

Build configuration: previews must NOT use the default development build config — its fileReplacement swaps in environment.development.ts, which hardcodes http://localhost:8080 and bypasses the proxy (that's main's backend: wrong server and a CORS block). The up script serves the preview configuration (relative /api URLs via environment.preview.ts, dev-speed build), falling back to production for worktrees branched before that config existed.
Proxy config: the frontend reaches the backend through the dev-server proxy. The up script generates a per-slot proxy file (/api prefix, no path rewrite — the backend mounts its routes under /api) targeting localhost:8080+X, passed via --proxy-config. The checked-in frontend/src/proxy.conf.json stays untouched; note its pathRewrite stripping /api does not match the backend's mounts, so don't copy it.
CORS: the backend allows only http://localhost:4200. Proxied /api calls are same-origin so previews work, but code that calls the backend port from the browser will be blocked. Treat that as a signal the code should use the proxy path.
Google sign-in: the OAuth client lists authorized JavaScript origins. If http://localhost:4201-4209 are not registered in the Google Cloud console, sign-in fails with an origin mismatch on preview ports. Features behind auth need those origins added once, or must be checked on main's 4200.
Shared MongoDB and Redis: the worktree copies backend/.env, so previews hit the same Atlas database and Upstash cache as main dev. Writes are real, and cache invalidations affect the shared cache. Do not run destructive flows just to "see" them.
swagger.json: a backend dev boot can regenerate backend/swagger.json and dirty the worktree. Do not commit that churn; if the branch did not intend swagger changes, restore the file before committing.
Dependencies: previews need node_modules in both frontend/ and backend/ (the offshoot setup script installs them). The up script refuses to start without them rather than half-booting.