Skip to content

Migrate frontend from Create React App to Vite#567

Open
phoenixy1 wants to merge 1 commit intomasterfrom
remove-cra
Open

Migrate frontend from Create React App to Vite#567
phoenixy1 wants to merge 1 commit intomasterfrom
remove-cra

Conversation

@phoenixy1
Copy link
Copy Markdown
Collaborator

@phoenixy1 phoenixy1 commented Apr 17, 2026

Summary

  • Replace Create React App (unmaintained since 2022, deprecated in 2025) with Vite 8, reducing the dependency footprint from ~1,455 to 169 packages and build times from ~10s to ~325ms
  • Port all CRA-specific config (dev server proxy, SCSS imports, env vars) to Vite equivalents
  • Upgrade to React 18 createRoot API and fix plaid-threads CJS interop for Vite compatibility

Details

Build tooling:

  • react-scriptsvite + @vitejs/plugin-react
  • Dev proxy config moved from src/setupProxy.js to vite.config.ts
  • REACT_APP_API_HOST env var renamed to API_HOST

Source changes:

  • index.html moved from public/ to project root (Vite convention)
  • index.tsx upgraded from deprecated ReactDOM.render to createRoot
  • plaid-threads imports changed from default to named exports ({ Button } instead of Button) for CJS/ESM interop
  • ~ prefix removed from SCSS @import paths (webpack convention not needed by Vite)
  • tsconfig.json target bumped to ES2020, Node engine to >= 18

Removed CRA boilerplate:

  • reportWebVitals.ts, setupTests.ts, setupProxy.js, react-app-env.d.ts
  • Testing libraries, web-vitals, sass-loader, react-dev-utils
  • CRA-specific eslintConfig, browserslist, overrides from package.json

README updated with Vite-compatible HTTPS/OAuth instructions and Node >= 18 prerequisite.

Test plan

  • npm run build succeeds (tsc + vite build, ~325ms)
  • npm start serves the app at localhost:3000
  • UI renders correctly in browser (verified via Playwright)
  • API proxy returns expected 502 when backend is not running (confirms proxy config works)
  • Manual test with backend running to verify full Plaid Link flow

🤖 Generated with Claude Code

Claude Session: f239487a-6d2b-41a4-8407-5e2a5b43a546

CRA has been unmaintained since 2022 and is no longer recommended by
React. This replaces it with Vite 8, which provides faster dev server
startup, faster builds, and a smaller dependency footprint (1455 → 169
packages).

- Replace react-scripts with vite + @vitejs/plugin-react
- Move index.html to project root with module script entry point
- Port dev server proxy config from setupProxy.js to vite.config.ts
- Rename REACT_APP_API_HOST env var to API_HOST
- Remove CRA boilerplate (reportWebVitals, setupTests, react-app-env.d.ts)
- Upgrade index.tsx to React 18 createRoot API
- Switch plaid-threads imports from default to named exports for Vite
  CJS interop compatibility
- Remove ~ prefix from SCSS imports (webpack convention, not needed by Vite)
- Bump tsconfig target to ES2020, Node engine to >= 18
- Update README HTTPS/OAuth instructions for Vite

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@phoenixy1 phoenixy1 requested a review from reverentgeek April 17, 2026 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant