Skip to content

Commit d484fa8

Browse files
committed
docs: add CLAUDE.md with architecture and development guide
Add comprehensive documentation for AI coding assistants including: - Development workflow and commands - Build system architecture and deployment flow - Build target resolution for Angular 17+ - Token injection and CI/CD integration - Testing strategy and debugging techniques
1 parent 27c3050 commit d484fa8

File tree

1 file changed

+212
-0
lines changed

1 file changed

+212
-0
lines changed

CLAUDE.md

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance when working with code in this repository.
4+
5+
## Overview
6+
7+
`angular-cli-ghpages` is an Angular CLI builder/schematic that deploys Angular applications to GitHub Pages, Cloudflare Pages, or any Git repository. It wraps the `gh-pages` npm package and integrates with Angular CLI's deployment infrastructure via `ng deploy`.
8+
9+
## Development Commands
10+
11+
All development commands must be run from the `src` directory:
12+
13+
```bash
14+
cd src
15+
```
16+
17+
### Build
18+
```bash
19+
npm run build
20+
```
21+
Compiles TypeScript to JavaScript and copies necessary files to `dist/`. The build process:
22+
1. Cleans the `dist` directory
23+
2. Generates TypeScript types from `deploy/schema.json`
24+
3. Compiles TypeScript using `tsconfig.build.json`
25+
4. Copies metadata files (builders.json, collection.json, etc.) to `dist/`
26+
27+
### Test
28+
```bash
29+
npm test
30+
```
31+
Runs Jest test suite. Uses `jest.config.js` in the `src` directory.
32+
33+
To run tests in watch mode:
34+
```bash
35+
npm test -- --watch
36+
```
37+
38+
### Local Development with npm link
39+
40+
For testing changes locally with an Angular project:
41+
42+
1. Build and link from `src/dist`:
43+
```bash
44+
cd src
45+
npm run build
46+
cd dist
47+
npm link
48+
```
49+
50+
2. In your Angular test project:
51+
```bash
52+
npm link angular-cli-ghpages
53+
ng add angular-cli-ghpages
54+
ng deploy --dry-run # Test without deploying
55+
```
56+
57+
### Debugging
58+
59+
To debug the deploy builder in VSCode, use this `launch.json` configuration in your Angular project:
60+
61+
```json
62+
{
63+
"type": "node",
64+
"request": "launch",
65+
"name": "Debug ng deploy",
66+
"skipFiles": ["<node_internals>/**"],
67+
"program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
68+
"cwd": "${workspaceFolder}",
69+
"sourceMaps": true,
70+
"args": ["deploy", "--no-build"]
71+
}
72+
```
73+
74+
Alternatively, debug from command line:
75+
```bash
76+
node --inspect-brk ./node_modules/@angular/cli/bin/ng deploy
77+
```
78+
79+
For debugging the standalone engine directly, use the "Launch Standalone Program" task in VSCode (configured in `.vscode/launch.json`).
80+
81+
### Publishing
82+
83+
```bash
84+
cd src
85+
npm run build
86+
npm run test
87+
npm run publish-to-npm
88+
```
89+
90+
For pre-release versions:
91+
```bash
92+
npm dist-tag add angular-cli-ghpages@X.X.X-rc.X next
93+
```
94+
95+
## Architecture
96+
97+
### Entry Points
98+
99+
1. **Angular CLI Integration** (`src/deploy/`):
100+
- `builder.ts` - Angular builder entry point, called by `ng deploy`
101+
- `actions.ts` - Orchestrates build and deployment process
102+
- `schema.json` - Defines CLI options/arguments
103+
104+
2. **Schematic** (`src/ng-add.ts`):
105+
- Implements `ng add angular-cli-ghpages`
106+
- Adds deploy target to `angular.json`
107+
108+
3. **Standalone CLI** (`src/angular-cli-ghpages`):
109+
- Bash script for non-Angular CLI usage
110+
- Uses `commander` for CLI parsing
111+
112+
4. **Core Engine** (`src/engine/`):
113+
- `engine.ts` - Core deployment logic (wraps gh-pages)
114+
- `defaults.ts` - Default configuration values
115+
116+
### Deployment Flow
117+
118+
```
119+
ng deploy
120+
121+
builder.ts (createBuilder)
122+
123+
actions.ts (deploy function)
124+
├─→ Build Angular app (if not --no-build)
125+
│ Uses BuilderContext.scheduleTarget()
126+
└─→ engine.run()
127+
├─→ Prepare options (tokens, CI env vars)
128+
├─→ Create .nojekyll file (bypasses Jekyll on GitHub)
129+
├─→ Create 404.html (copy of index.html for SPAs)
130+
├─→ Create CNAME file (if custom domain)
131+
└─→ Publish via gh-pages package
132+
```
133+
134+
### Build Target Resolution
135+
136+
**Important:** With Angular 17+, the build target resolution is complex due to different builder types. The code tries to guess the correct build target:
137+
138+
1. First tries explicit `--build-target` option
139+
2. Falls back to `${project}:build:production`
140+
3. For prerendering: uses `prerenderTarget` or `${project}:prerender:production`
141+
142+
Output directory resolution:
143+
- Checks `angular.json` for `outputPath`
144+
- If string: appends `/browser` (modern Angular convention)
145+
- If object: uses `${base}/${browser}` properties
146+
- Can be overridden with `--dir` option
147+
148+
### Token Injection
149+
150+
The engine automatically injects authentication tokens into HTTPS repository URLs:
151+
152+
1. Discovers remote URL from current git repo (if `--repo` not specified)
153+
2. Checks environment variables in order: `GH_TOKEN`, `PERSONAL_TOKEN`, `GITHUB_TOKEN`
154+
3. Transforms: `https://github.com/...``https://x-access-token:TOKEN@github.com/...`
155+
156+
**Note:** Tokens only work with HTTPS, not SSH URLs (git@github.com).
157+
158+
### CI Environment Detection
159+
160+
The engine appends CI metadata to commit messages when running on:
161+
- Travis CI (`TRAVIS` env var)
162+
- CircleCI (`CIRCLECI` env var)
163+
- GitHub Actions (`GITHUB_ACTIONS` env var)
164+
165+
Includes commit SHA and build URL in the commit message.
166+
167+
### Option Name Mapping
168+
169+
Angular CLI does NOT rename kebab-case to camelCase for boolean flags with "no" prefix. The engine handles this mapping:
170+
171+
- CLI: `--no-dotfiles` → Code: `noDotfiles` → Internal: `dotfiles: false`
172+
- CLI: `--no-notfound` → Code: `noNotfound` → Internal: `notfound: false`
173+
- CLI: `--no-nojekyll` → Code: `noNojekyll` → Internal: `nojekyll: false`
174+
175+
## Key Files
176+
177+
- `src/deploy/schema.json` - Source of truth for all deployment options
178+
- `src/interfaces.ts` - TypeScript interfaces for the project
179+
- `src/builders.json` - Registers the deploy builder with Angular CLI
180+
- `src/collection.json` - Registers the ng-add schematic
181+
- `src/utils.ts` - Utilities for working with Angular workspace files
182+
183+
## Important Conventions
184+
185+
1. **No Server-Side Rendering**: GitHub Pages only supports static files. SSR/Universal build targets are not supported.
186+
187+
2. **404.html Handling**: By default creates `404.html` as copy of `index.html` to handle SPA routing on GitHub Pages. For Cloudflare Pages, disable with `--no-notfound`.
188+
189+
3. **Jekyll Bypass**: Creates `.nojekyll` to prevent GitHub Pages from processing files through Jekyll (which would break files starting with `_` or `.txt` in assets).
190+
191+
4. **Breaking Changes in v2**: Changed from guessing build conventions in Angular 17+. Projects may need explicit `--build-target` specification.
192+
193+
## Testing Strategy
194+
195+
Tests use Jest and are located alongside source files with `.spec.ts` extension:
196+
- `angular-cli-ghpages.spec.ts` - Standalone CLI tests
197+
- `deploy/actions.spec.ts` - Deployment action tests
198+
- `engine/engine.spec.ts` - Core engine tests
199+
- `ng-add.spec.ts` - Schematic tests
200+
201+
Snapshot tests are stored in `__snapshots__/` directory.
202+
203+
## Related Projects
204+
205+
This project builds upon:
206+
- `gh-pages` npm package (core git operations)
207+
- Angular DevKit (builder/schematic infrastructure)
208+
- Originated from AngularFire deploy schematics
209+
210+
For sync considerations, monitor:
211+
- https://github.com/angular/angularfire/blob/master/src/schematics/deploy/builder.ts
212+
- https://github.com/angular/angularfire/blob/master/src/schematics/deploy/actions.ts

0 commit comments

Comments
 (0)