|
| 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