portfolio-admin/.github/copilot-instructions.md

Copilot / AI coding agent instructions — portfolio-admin

Keep this short and actionable. Reference files below when making edits.

Big picture

• This is an Angular 20 standalone application (no NgModule). The app bootstraps with bootstrapApplication in src/main.ts and uses appConfig (src/app/app.config.ts) for providers.
• Server-side rendering (SSR) is enabled via @angular/ssr. Server entry and Express integration live in src/server.ts. The SSR configuration merges appConfig with config from src/app/app.config.server.ts.

Key workflows (commands you can run)

• Start dev server (live reload):

npm run start

• Build for production (browser + server artifacts go to dist/portfolio-admin):

npm run build

• Run SSR server from built artifacts (package.json):

npm run serve:ssr:portfolio-admin
# which runs: node dist/portfolio-admin/server/server.mjs

Tests

• Unit tests use Karma (configured via angular.json):

npm run test

Project-specific patterns & conventions

• Standalone components only. Example: src/app/app.ts uses @Component({ ... imports: [RouterOutlet] }) and signals (signal('...')) instead of classic NgModule state.
• Routing: routes are defined in src/app/app.routes.ts (currently empty array). Server-side routes for SSR are in src/app/app.routes.server.ts and use RenderMode.Prerender by default.
• Hydration: client hydration and event replay are enabled in src/app/app.config.ts via provideClientHydration(withEventReplay()) — keep event handlers idempotent where possible.
• Styling: SCSS is used project-wide. Components expect .scss files; Prettier settings for HTML are in package.json.

Integration points & important files

• src/server.ts — Express + AngularNodeAppEngine handler. Static files served from dist/.../browser and reqHandler is exported for hosting.
• src/main.server.ts — SSR bootstrap used by server builds.
• package.json — scripts of interest: start, build, test, serve:ssr:portfolio-admin.
• angular.json — build targets and SSR options (outputMode: "server", server entry, and ssr.entry).

Editing guidance / examples

• Add an API endpoint (server-side): edit src/server.ts and add app.get('/api/...', (req,res)=>{...}). Keep the handler pure and return JSON; SSR handler sits after static middleware.
• Add a route (client + server): update src/app/app.routes.ts with the new Route and ensure any server prerender behavior is acceptable (serverRoutes uses ** prerender by default).
• When changing providers, update src/app/app.config.ts (client) and src/app/app.config.server.ts (server merge) if the provider is required at SSR time.

What NOT to change without confirming

• The SSR glue in src/server.ts and the AngularNodeAppEngine usage — small mistakes here will break server rendering. If adding features, keep existing request flow (static -> SSR handler).
• import.meta.dirname usage in src/server.ts implies ESM-style builds. Don't switch CommonJS unless you also adjust build outputs and package.json fields.

If anything is unclear or you need more examples (routing, adding an API, or running SSR locally), tell me which area and I'll expand the file with a short example patch.