Before you start

Below is the step-by-step recipe how to make your computer ready for creating first project with Speckit.

Make sure that you have enough space on MacBook and some time. It should take you about 15-20 minutes.

First Angular Project — Windows and macOS (VS Code)

Going from zero to a working application takes about fifteen minutes on both systems. The steps are nearly identical — the differences mainly concern Node.js installation and terminal handling. A terminal is a small program that lets you run commands from the command line, available on both macOS and Windows.

Versions as of July 8, 2026: the latest stable version is Angular 21 (released November 20, 2025), and Angular 22 appeared around May 2026, following the six-month release cadence. Angular 21 requires Node.js 22.22.0+ or 24.13.1+, so the current LTS is a safe choice.

1. Install Node.js

Angular runs on Node.js — it's the foundation of the whole environment.

Windows

Go to nodejs.org and download the LTS version (the .msi installer). During installation, leave the default options — npm and adding to PATH are installed automatically.

macOS

Installer from nodejs.org — download the .pkg package (LTS) and click through the installation.

Tip for both systems: if you anticipate working on several projects requiring different Node versions, it's worth using a version manager right away — nvm (macOS/Linux) or nvm-windows (Windows). It lets you switch versions with a single command.

2. Verify the installation

Open a terminal:

Windows — PowerShell or Windows Terminal
macOS — Terminal (Cmd+Space → "Terminal")

node -v
npm -v

If version numbers show up — the environment is ready.

3. Install Angular CLI

npm install -g @angular/cli

Verify by typing:

ng version

System-specific notes:

Windows / PowerShell — if ng gets blocked with a script execution policy message, run this once:
```
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
```
macOS — if you get a permissions error (EACCES) during global installation, don't use sudo. Instead, it's best to install Node via nvm or Homebrew, which keep global packages in the user directory.

4. Install VS Code and extensions

Download VS Code — it's the same on Windows and macOS.

Add useful extensions (Extensions tab, Ctrl+Shift+X / Cmd+Shift+X):

Angular Language Service — official, autocomplete and template checking
Angular Essentials or Nx Console — optional
Prettier — code formatting

Enabling the code command in the terminal

Windows — works by default (the installer adds it to PATH).
macOS — open VS Code, press Cmd+Shift+P, type "Shell Command: Install 'code' command in PATH" and confirm. From then on, code . will work in Terminal.

5. Create a project

Navigate to a directory for your projects (create one on disk for organization) and run the generator:

Windows

cd C:\Projects
ng new first-project

macOS

cd ~/Projects
ng new first-project

The CLI will ask a few questions. Safe answers for a first project:

Stylesheets: CSS (or SCSS, if you prefer)
SSR/SSG: No for now

In the latest Angular versions, new projects use standalone components by default and skip Zone.js — you don't need to configure anything extra.

6. Open the project in VS Code

cd first-project
code .

code . opens the current folder in VS Code.

7. Run the application

In the integrated terminal in VS Code (Terminal → New Terminal, shortcut Ctrl+`):

ng serve --open

The --open flag automatically opens the browser at http://localhost:4200. The dev server has hot-reload — after saving a file, the page refreshes on its own.

Connecting Claude to VS Code (generating Angular files)

To work with Claude directly in the editor, there's Claude Code — Anthropic's agentic tool that reads your project, creates and edits files, and runs terminal commands. It has an official VS Code extension (publisher: anthropic).

Requirements: VS Code version 1.98.0 or newer, and a paid Anthropic plan (Pro, Max, Team, or Enterprise) or an API key. Claude Code has no free tier.

8. Install the extension

The steps are the same on Windows and macOS:

Open the Extensions view (Ctrl+Shift+X on Windows / Cmd+Shift+X on macOS). Type "Claude Code" and install the extension from publisher anthropic (don't confuse it with similarly named ones). If the icon doesn't appear after installation, run the "Developer: Reload Window" command from the command palette (Ctrl/Cmd+Shift+P).

The extension includes its own copy of the CLI for the chat panel — you don't need to install anything separately. It also works in VS Code forks (Cursor, Windsurf, VSCodium) via the Open VSX registry.

9. Log in

The first time you open it, the extension will ask you to log in with an Anthropic account. You can open the Claude panel a few different ways:

clicking the Spark (✱) icon in the top-right corner of the editor (appears when you have a file open),
the Spark icon in the Activity Bar on the left,
command palette → "Claude Code: Open".

10. Open the project as a working folder

Claude Code works on the entire project directory, not on loose files. Use File → Open Folder and point to the project root (e.g., first-project). This is the directory Claude treats as context.

11. Set the Angular context (CLAUDE.md file)

So that Claude generates files consistent with your Angular standards, create a CLAUDE.md file in the project root — it's read at the start of every session. Following SDD principles, this is where we can insert the constitution content. I, however, have a separate CONSTITUTION.md file, and when needed I just tell Claude to take that file into account. Why waste tokens.

Angular, Firebase on MacBook with VS Code