Phase 1: Scaffolding & tooling (Vite + React + TypeScript)

[devin-ai-integration]

Summary

Phase 1 of the 8-phase Angular 9 → React (Vite + TypeScript) migration: stand up the React build alongside the existing Angular app without porting any UI. The Angular application source stays in place (src/app/**, src/main.ts, src/polyfills.ts, src/index.html, src/styles.scss, src/assets, src/manifest.json, ngsw-config.json) — later phases port it and Phase 6 is the cutover.

The one non-obvious piece: the repo now has two coexisting entrypoints (src/main.ts for Angular, src/main.tsx for React), so tsconfig.json deliberately allow-lists only the new files rather than the whole src tree, which is what keeps npm run build green while Angular sources with decorators/RxJS are still present:

"include": ["src/main.tsx", "src/App.tsx", "src/vite-env.d.ts", "vite.config.ts"]

Vite's entry is a new root index.html (with <div id="root">) — src/index.html is untouched and still belongs to the Angular build.

Migrated in this phase

• package.json: dropped @angular/*, zone.js, rxjs, rxjs-compat, tslib, node-fetch, unfetch, and the karma/jasmine/protractor/tslint tooling; added react 18.3.1, react-dom 18.3.1, react-router-dom 7.18.2, typescript 5.6.2, vite 5.4.21, @vitejs/plugin-react 4.3.1, sass 1.79.4, @types/react(-dom). No HTTP client added — later phases use native fetch.
• Scripts: dev (vite), build (tsc && vite build), preview (vite preview).
• New vite.config.ts, root index.html, src/main.tsx (React 18 createRoot + StrictMode), placeholder src/App.tsx, src/vite-env.d.ts.
• Root tsconfig.json rewritten for React/JSX ("jsx": "react-jsx", moduleResolution: "bundler", strict, noEmit).
• Removed Angular build/tooling config that blocks the Vite build: angular.json, tsconfig.app.json, tsconfig.spec.json, karma.conf.js, the protractor e2e/ directory, and the stale yarn.lock; added a package-lock.json for the new dependency set.

Router version note: this landed on react-router-dom 7.18.2 rather than 6.x — the Snyk check flagged two findings in react-router 6.x (SNYK-JS-REACTROUTER-18313130 unsafe reflection, SNYK-JS-REACTROUTER-18313144 open redirect) that are only fixed in 7.18.0+. Nothing imports the router yet (Phase 1 is a placeholder app), so Phase 6 should be written against the v7 API. vite was likewise bumped 5.4.8 → 5.4.21 for a Snyk finding.

Verified locally: npm install, npm run build (green, emits dist/), and npm run dev (serves the placeholder with <div id="root">).

Remaining for later phases

• Phase 2 — core models & HN API client (+ comment helper)
• Phase 3 — settings context & theming
• Phase 4 — shared/leaf components
• Phase 5 — page components
• Phase 6 — routing & app composition (Angular cutover)
• Phase 7 — PWA service worker & manifest
• Phase 8 — cleanup & docs

Note for later phases: the Hacker News API base URL https://node-hnapi.herokuapp.com must be preserved.

Phase spec (restated)

Goal: stand up the React build alongside/replacing Angular tooling without yet porting UI.

• Create a React + TypeScript project setup with Vite at the repo root.
• Replace package.json Angular dependencies (@angular/*, zone.js, rxjs, rxjs-compat) with react, react-dom, react-router-dom, typescript, vite, @vitejs/plugin-react, sass. Keep native fetch (do not add axios or another HTTP client).
• Add a Vite config, a React entry src/main.tsx rendering a placeholder src/App.tsx, and an index.html with a root <div id="root">.
• Remove/neutralize Angular build config that blocks the React build (angular.json, Angular-specific tsconfig.app.json, karma.conf.js, protractor e2e config). Update the root tsconfig.json for React/JSX (e.g. "jsx": "react-jsx").
• Add npm scripts: dev (vite), build (tsc + vite build), and preview.
• Leave the existing Angular application source under src/app/ in place — later phases port it and Phase 6 is the cutover. Only remove Angular build/tooling config that actually blocks the Vite build. Make sure the Vite build does not attempt to compile src/app/** so the build stays green.
• Note that the Hacker News API base URL https://node-hnapi.herokuapp.com must be preserved in later phases.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/b08019bee50c44a4a2800b537f6e726e
Requested by: @abboudp

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring