CI Pipeline / backend-test (push) Successful in 5m39s
CI Pipeline / frontend-test (push) Successful in 27s
CI Pipeline / frontend-build (push) Successful in 30s
CI Pipeline / backend-lint (push) Successful in 9s
CI Pipeline / backend-test (pull_request) Successful in 5m24s
CI Pipeline / frontend-test (pull_request) Successful in 22s
CI Pipeline / frontend-build (pull_request) Successful in 30s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 2s
CI Pipeline / backend-lint (pull_request) Successful in 8s
- Replace await import('./main.server.js') with lazy getEngine()
(original path was wrong — main.server.ts lives in src/, not root)
- AngularNodeAppEngine handles manifest registration internally;
no manual bootstrap import needed
- Add npm scripts: build:ssr, build:prerender, serve:ssr:radio-station
- Add PRERENDER.md build documentation
Verified: clean build prerenders all 5 routes, 54 tests pass
3.2 KiB
3.2 KiB
Prerendering & SSR Build Guide
Overview
The KMountain Flower Radio application uses Angular SSR with prerendering (SSG — Static Site Generation) for its five public-facing routes. Prerendered routes are compiled to static HTML during ng build and served directly from disk at runtime.
Public Routes
All routes listed in prerender-routes.txt:
| Route | Build Output |
|---|---|
/ |
dist/radio-station/browser/index.html |
/about |
dist/radio-station/browser/about/index.html |
/schedule |
dist/radio-station/browser/schedule/index.html |
/events |
dist/radio-station/browser/events/index.html |
/contact |
dist/radio-station/browser/contact/index.html |
Configuration Files
| File | Purpose |
|---|---|
angular.json |
Prerender + SSR config (prerender.routesFile, ssr.entry) |
prerender-routes.txt |
One route per line — the list of routes to prerender |
server.ts |
Node SSR entry point + PRERENDERED_ROUTES constant |
src/app/app.server.routes.ts |
Server-side route definitions |
Build Scripts
npm run build / npm run build:ssr / npm run build:prerender
npm run build:ssr
# or equivalently
npm run build:prerender
# or
ng build
All three scripts execute ng build (default configuration: production). Because angular.json has both prerender and ssr configured, a single ng build produces:
- Browser bundle — client-side JavaScript + CSS under
dist/radio-station/browser/ - Server bundle —
server.mjs+main.server.mjsunderdist/radio-station/server/ - Prerendered HTML — static HTML files for each route in
prerender-routes.txt
npm run serve:ssr:radio-station
node dist/radio-station/server.mjs
Starts the Node SSR server on port 4200. Prerendered routes are served as static HTML; all other routes fall back to SSR or a 404 handler.
Adding a New Prerendered Route
- Add the route path (one per line) to
prerender-routes.txt - Add the route to
PRERENDERED_ROUTESinserver.ts - Rebuild:
npm run build:ssr
Build Output Structure
dist/radio-station/
├── browser/
│ ├── index.html <-- prerendered (/)
│ ├── index.csr.html <-- CSR fallback
│ ├── about/index.html <-- prerendered (/about)
│ ├── schedule/index.html <-- prerendered (/schedule)
│ ├── events/index.html <-- prerendered (/events)
│ ├── contact/index.html <-- prerendered (/contact)
│ └── ... <-- JS/CSS chunks, assets
└── server/
├── server.mjs <-- Node entry point
├── main.server.mjs <-- Angular server bundle
├── angular-app-engine-manifest.mjs
└── ... <-- server chunks