feat: install React, ReactDOM, and Vite build tooling for Angular-to-React migration#172
feat: install React, ReactDOM, and Vite build tooling for Angular-to-React migration#172devin-ai-integration[bot] wants to merge 1 commit intomasterfrom
Conversation
…React migration - Add react and react-dom as dependencies - Add @types/react, @types/react-dom, @vitejs/plugin-react, and vite as dev dependencies - Update @types/node to ^20.19.33 for Vite compatibility - Add tsconfig.react.json with JSX support (react-jsx) and strict TypeScript settings - Add vite.config.ts with React plugin and path aliases - Add react:dev, react:build, and react:preview npm scripts Co-Authored-By: Matthew Guerra <matthew.guerra@cognition.ai>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| sourcemap: true, | ||
| }, | ||
| server: { | ||
| port: 4200, |
There was a problem hiding this comment.
🟡 Vite dev server port 4200 conflicts with Angular CLI default port
The Vite dev server is configured to use port 4200, which is the same default port used by Angular CLI's ng serve (invoked by npm start). Running npm run react:dev while npm start is already running (or vice versa) will fail with an EADDRINUSE error because both servers attempt to bind to the same port.
Root Cause and Impact
In vite.config.ts:17, the server port is hardcoded to 4200. Angular CLI's default dev server port is also 4200 (as seen in angular.json where no custom port is configured, so the default applies). Since this PR adds React alongside Angular, developers are likely to want to run both dev servers, but they cannot coexist on the same port.
Impact: Developers cannot run both the Angular and React dev servers simultaneously. One will fail to start. The Vite server should use a different port (e.g., 5173 which is Vite's default, or 4201).
| port: 4200, | |
| port: 5173, |
Was this helpful? React with 👍 or 👎 to provide feedback.
feat: install React, ReactDOM, and Vite build tooling for migration
Summary
Adds the foundational React packages and Vite build tooling to prepare for the Angular-to-React migration. No Angular code is modified or removed — this is purely additive infrastructure.
New dependencies:
react,react-dom(v19)@types/react,@types/react-dom,@vitejs/plugin-react,vite(v5) as devDependenciesNew files:
vite.config.ts— Vite config with React plugin,@path alias, sourcemaps, output todist/reacttsconfig.react.json— Separate tsconfig for React/TSX withjsx: "react-jsx", strict mode, bundler resolutionNew npm scripts:
react:dev,react:build,react:previewOther:
@types/nodebumped from^12.11.1→^20.19.33(required by Vite 5).Review & Testing Checklist for Human
package-lock.jsonalongside the existingyarn.lock. Both were modified. Decide whether the project should standardize on npm or yarn going forward to avoid lockfile drift.@types/nodemajor bump (v12 → v20): Verify the existing Angular build (ng build,ng serve) still compiles without type errors after this change, since the Angular 9 codebase was written against Node 12 types.ng serveand the newreact:devscript default to port 4200. Confirm this is acceptable (they won't be run simultaneously) or adjust one.vite.config.tshas noindex.htmlor app entry — this is expected for an infra-only PR but meansnpm run react:devwon't serve anything until a subsequent PR adds one.Suggested test plan: Run
export NODE_OPTIONS=--openssl-legacy-provider && npm startto confirm the existing Angular app still boots cleanly after these dependency changes.Notes