Kilka razy po demonstracji podejścia Spec-Driven Development dostałem pytanie, jak samemu uruchomić takie środowisko i pozwolić Claude'owi kodować nasze marzenia. Zamieszczam zatem opis (wygenerowany przez Claude, a jakże), jak krok po kroku ustawić sobie Angulara na komputerze z edytorem VS Code. Korzystam z Angular po stronie przeglądarki, natomiast po stronie serwera mam Google Cloud i Firebase. Tego drugiego opisu tutaj nie załączam. Ale do wielu pomysłów przeglądarka w zupełności wystarcza, szczególnie że możemy małą ilość danych przechowywać lokalnie w pamięci samej przeglądarki.

Poniżej recepta krok po kroku, a ja w ten sposób stworzyłem system Verbalu.

Pierwszy projekt w Angular — Windows i macOS (VS Code)

Przejście od zera do działającej aplikacji zajmuje kilkanaście minut na obu systemach. Kroki są niemal identyczne — różnice dotyczą głównie instalacji Node.js i obsługi terminala. Terminal to mały programik, który pozwala na uruchamianie komend z linii poleceń, jest dostępny w obu systemach MacOS i Windows.

Wersje na dzień 8 lipca 2026: najnowszą stabilną wersją jest Angular 21 (wydany 20 listopada 2025), a Angular 22 pojawił się około maja 2026 zgodnie z półroczną kadencją wydań. Angular 21 wymaga Node.js 22.22.0+ lub 24.13.1+, dlatego aktualne LTS jest bezpiecznym wyborem.

1. Zainstaluj Node.js

Angular działa na Node.js — to fundament całego środowiska.

Windows

Wejdź na nodejs.org i pobierz wersję LTS (instalator .msi). Podczas instalacji zostaw domyślne opcje — npm oraz dodanie do PATH instalują się automatycznie.

macOS

Instalator z nodejs.org** — pobierz pakiet .pkg (LTS) i przeklikaj instalację.

Wskazówka dla obu systemów: jeśli przewidujesz pracę na kilku projektach wymagających różnych wersji Node, warto od razu użyć menedżera wersji — nvm (macOS/Linux) lub nvm-windows (Windows). Pozwala przełączać wersje jednym poleceniem.

2. Sprawdź instalację

Otwórz terminal:

  • Windows — PowerShell lub Terminal Windows
  • macOS — Terminal (Cmd+Spacja → „Terminal")
node -v
npm -v

Jeśli pokażą się numery wersji — środowisko jest gotowe.

3. Zainstaluj Angular CLI

npm install -g @angular/cli

Zweryfikuj, wpisując:

ng version

Uwagi specyficzne dla systemu:

  • Windows / PowerShell — jeśli ng zostanie zablokowane komunikatem o polityce wykonywania skryptów, uruchom jednorazowo:

    Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

  • macOS — jeśli przy instalacji globalnej pojawi się błąd uprawnień (EACCES), nie używaj sudo. Zamiast tego najlepiej zainstalować Node przez nvm lub Homebrew, które trzymają pakiety globalne w katalogu użytkownika.

4. Zainstaluj VS Code i rozszerzenia

Pobierz VS Code — jest ten sam na Windows i macOS.

Dodaj przydatne rozszerzenia (zakładka Extensions, Ctrl+Shift+X / Cmd+Shift+X):

  • Angular Language Service — oficjalne, autouzupełnianie i sprawdzanie szablonów
  • Angular Essentials lub Nx Console — opcjonalnie
  • Prettier — formatowanie kodu

Włączenie polecenia code w terminalu

  • Windows — działa domyślnie (instalator dodaje do PATH).
  • macOS — otwórz VS Code, naciśnij Cmd+Shift+P, wpisz „Shell Command: Install 'code' command in PATH" i zatwierdź. Od tej pory code . zadziała w Terminalu.

5. Utwórz projekt

Przejdź do katalogu na projekty (załóż dla porządku taki katalog na dysku) i uruchom generator:

Windows

cd C:\Projekty
ng new pierwszy-projekt

macOS

cd ~/Projekty
ng new pierwszy-projekt

CLI zada kilka pytań. Bezpieczne odpowiedzi dla pierwszego projektu:

  • Arkusze stylów: CSS (lub SCSS, jeśli wolisz)
  • SSR/SSG: na start No

W najnowszych wersjach Angulara nowe projekty domyślnie używają standalone components i pomijają Zone.js — nie musisz nic dodatkowo konfigurować.

6. Otwórz projekt w VS Code

cd pierwszy-projekt
code .

code . otwiera bieżący folder w VS Code.

7. Uruchom aplikację

W zintegrowanym terminalu w VS Code (Terminal → New Terminal, skrót Ctrl+`):

ng serve --open

Flaga --open automatycznie otworzy przeglądarkę pod adresem http://localhost:4200. Serwer deweloperski ma hot-reload — po zapisaniu pliku strona odświeży się sama.

Podłączenie Claude do VS Code (generowanie plików Angular)

Do pracy z Claude bezpośrednio w edytorze służy Claude Code — agentowe narzędzie Anthropic, które czyta Twój projekt, tworzy i edytuje pliki oraz uruchamia polecenia w terminalu. Ma oficjalne rozszerzenie do VS Code (wydawca: anthropic).

Wymagania: VS Code w wersji 1.98.0 lub nowszej oraz płatny plan Anthropic (Pro, Max, Team lub Enterprise) albo klucz API. Claude Code nie ma darmowego poziomu.

Krok 1 — Zainstaluj rozszerzenie

Kroki są takie same na Windows i macOS:

Otwórz widok Extensions (Ctrl+Shift+X na Windows / Cmd+Shift+X na macOS). Wpisz „Claude Code" i zainstaluj rozszerzenie od wydawcy anthropic (nie mylić z podobnie nazwanymi). Jeśli po instalacji ikona się nie pojawi, uruchom z palety poleceń (Ctrl/Cmd+Shift+P) komendę „Developer: Reload Window".

Rozszerzenie zawiera własną kopię CLI na potrzeby panelu czatu — nie musisz nic instalować osobno. Działa też w forkach VS Code (Cursor, Windsurf, VSCodium) przez rejestr Open VSX.

Krok 2 — Zaloguj się

Przy pierwszym otwarciu rozszerzenie poprosi o zalogowanie kontem Anthropic. Panel Claude otworzysz na kilka sposobów:

kliknięcie ikony Spark (✱) w prawym górnym rogu edytora (pojawia się, gdy masz otwarty plik), ikona Spark na pasku Activity Bar po lewej, paleta poleceń → „Claude Code: Open".

Krok 3 — Otwórz projekt jako folder roboczy

Claude Code pracuje na całym katalogu projektu, nie na luźnych plikach. Użyj File → Open Folder i wskaż korzeń projektu (np. pierwszy-projekt). To ten katalog Claude traktuje jako kontekst.

Krok 4 — Ustaw kontekst Angular (plik CLAUDE.md)

Aby Claude generował pliki zgodne z Twoimi standardami Angular, utwórz w korzeniu projektu plik CLAUDE.md — jest czytany na początku każdej sesji. Zgodnie z zasadami SDD tam możemy wstawić treść konstytucji. Ja natomiast mam osobny plik CONSTITUTION.md i w razie potrzeby tylko piszę Claude'owi, aby wziął ten plik pod uwagę. Po co marnować tokeny.

Przykładowa zawartość, z jakiej ja korzystam:

# Constitution

## General functions requirements.

Every tool and game should:
- be prepared for multilingual interface. Currently language Polish and English is used.
- be shortly described on landing page on a tile in proper section, and also there should be details page.
- have manual page accessible for teacher after login in.
- be in header menu in tool or game section.
- have description in array used for generating agenda by AI for an event

Every tool and game should have standard set of screens for teacher:
- session list with ability to add new session, delete it, see deleted sessions and revert deleted session.
- session details and edit screen with link to be copied and QR code for students.

Activities on tools and sessions should be counted on daily activity report https://verbalu.com/admin/activity

Number of activities in tool and game should be display on https://verbalu.com/home as a number and expandable list of sessions

Every screen should be optimized for mobile screens.

## Technical requirements

Try to create and reuse components if possible.

If there is a requirement to upload and use file, reuse file folder component, suggesting user to add file to newly created or existing file folder, and then attaching file folder to the designed component. All uploaded files should be access via file foldeer component.

There are two main roles:
- teacher - who is logged in
- student - who uses system anonymously after following a link to training sessions

A tutaj możecie zobaczyć tego efekt: https://verbalu.com

#sdd#spec-driven development
Wróć do wszystkich artykułów