Migrate from Create React App to Vite

[dauglyon]

Summary

Migrate the UI from Create React App (CRA) to Vite, along with related tooling updates for TypeScript 5, Vitest, and Storybook 8.

Why Vite?

• CRA is deprecated - No longer maintained by Facebook/Meta, stuck on older webpack and babel versions with known security vulnerabilities
• Faster development - Vite uses native ES modules during development, providing near-instant hot module replacement (HMR) instead of rebundling
• Modern tooling - First-class TypeScript 5 support, modern browser targets, native ESM
• Better DX - Faster cold starts, on-demand compilation, cleaner error messages
• Active ecosystem - Vitest for testing, native Storybook support, growing plugin ecosystem

---

Migration Details

1. Build System Changes

Add Vite configuration files (d5a2945)

New files added:

• vite.config.ts - Main Vite config with:
  • React plugin with Fast Refresh
  • SVGR plugin for importing SVGs as React components
  • Proxy config for /services → KBase API
  • Vitest configuration (test globals, jsdom environment)
  • Browser targets: Chrome 143+, Firefox 146+, Safari 18+, Edge 143+
• tsconfig.node.json - TypeScript config for Vite config file itself
• src/vite-env.d.ts - Type declarations for:
  • Vite client types and SVGR
  • ImportMetaEnv interface with all VITE_* environment variables
  • Global fetchMock for vitest-fetch-mock

Move index.html to project root (40d2379)

Vite expects the entry HTML at the project root (not in public/). Added the entry script tag:

<script type="module" src="/src/index.tsx"></script>

Update tsconfig.json (b3a112a)

• Target: es5 → ES2020 (modern browsers only)
• Module resolution: Added bundler for Vite compatibility
• Added types: vitest/globals, @testing-library/jest-dom
• References tsconfig.node.json for composite builds

Update package.json (52526b4)

Scripts changed:

- "start": "react-scripts start"
+ "start": "vite"
- "build": "react-scripts build"
+ "build": "tsc && vite build"
- "test": "react-scripts test"
+ "test": "vitest"

---

2. Environment Variables

Vite uses VITE_ prefix instead of REACT_APP_ and import.meta.env instead of process.env.

Rename in .env files (222540a)

- REACT_APP_KBASE_DOMAIN=ci.kbase.us
+ VITE_KBASE_DOMAIN=ci.kbase.us
- REACT_APP_KBASE_ENV=ci
+ VITE_KBASE_ENV=ci

Update source files (35ce731)

Mechanical find/replace across 15 files:

- process.env.REACT_APP_KBASE_DOMAIN
+ import.meta.env.VITE_KBASE_DOMAIN
- process.env.NODE_ENV
+ import.meta.env.MODE

---

3. Test Migration (Jest → Vitest)

Vitest is a Vite-native test runner with Jest-compatible API but faster execution.

Rewrite setupTests.ts (93d6ddf)

Major changes:

• jest-fetch-mock → vitest-fetch-mock
• Added custom console.error handler to suppress expected React warnings
• Set IS_REACT_ACT_ENVIRONMENT = true for React 18
• Import @testing-library/jest-dom/vitest for matcher types

Replace Jest APIs in test files (80a2031)

Across 34 test files:

- jest.fn()
+ vi.fn()
- jest.spyOn(module, 'method')
+ vi.spyOn(module, 'method')
- jest.mock('./module')
+ vi.mock('./module')

Also wrapped MUI components with <ThemeProvider> where needed for proper styling in tests.

Update test utilities (2ec950e)

• mockRTKQuery.ts - Updated mock function types for Vitest
• kbaseServiceMock.ts - Minor type adjustments
• jsonrpc11.ts - Compatible with both Jest and Vitest

---

4. Storybook Migration (v6 → v8)

Storybook 8 has native Vite support and a new component story format.

Migrate config to TypeScript/Vite (1a1ad60)

- // .storybook/main.js
- module.exports = {
-   framework: '@storybook/react',
-   core: { builder: 'webpack5' },
-   addons: ['@storybook/preset-create-react-app']
- }

+ // .storybook/main.ts
+ const config: StorybookConfig = {
+   framework: '@storybook/react-vite',
+   // No CRA preset needed with Vite
+ }

Update story files (bd14b80)

16 story files updated for Storybook 8 API:

- import { ComponentStory, ComponentMeta } from '@storybook/react'
+ import type { Meta, StoryObj } from '@storybook/react'

- export const Primary: ComponentStory<typeof Button> = ...
+ export const Primary: StoryObj<typeof Button> = ...

---

5. Sass Deprecation Fixes

Fix Sass module syntax (470d982)

26 SCSS files updated for Dart Sass 2.0 compatibility:

- @import "../common/colors";
+ @use "../common/colors" as *;

- $color: map-get($palette, 'primary');
+ @use "sass:map";
+ $color: map.get($palette, 'primary');

- $lightness: lightness($color);
+ @use "sass:color";
+ $lightness: color.channel($color, "lightness", $space: hsl);

---

6. TypeScript 5 Fixes

Fix typeof syntax (b21c3ed, 21f84cb)

TypeScript 5 requires parentheses around typeof in certain type positions:

- type Foo = typeof bar['key']
+ type Foo = (typeof bar)['key']

Affects collectionsApi.ts, kbaseBaseQuery.ts, and 16 other files.

Fix circular dependency (4a607e0)

Vite's ES module handling is stricter than webpack. Fixed circular import between Routes.tsx and Legacy.tsx by extracting route constants to src/app/routes.constants.ts.

---

7. Cleanup

Remove unused web-vitals (44dec9a)

web-vitals was included by CRA but never configured to send metrics anywhere. Removed dead code:

• Deleted src/reportWebVitals.ts
• Removed import and call from src/index.tsx
• Removed web-vitals dependency

Update .nvmrc (d3b3e94)

Node.js version: v20.11.1 → v22.22.0

Update redirectValidation (2a7f398)

Update env var references to use VITE_REDIRECT_WHITELIST.

Update README (df305bd)

Rewrote documentation to reflect Vite migration:

• New Tech Stack section
• Updated Available Scripts for Vitest
• Added Environment Variables and API Proxy docs
• Removed obsolete CRA troubleshooting

---

Dependency Changes

Package	Before	After	Notes
Build
react-scripts	5.0.1	❌ removed	Replaced by Vite
vite	-	7.3.1	New build tool
@vitejs/plugin-react	-	5.1.2	React Fast Refresh
TypeScript
typescript	4.9.4	5.9.3	Major upgrade
State
@reduxjs/toolkit	1.9.5	2.11.2	RTK 2.0
react-redux	8.0.5	9.2.0	Hooks improvements
Testing
jest	(via CRA)	❌ removed	Replaced by Vitest
vitest	-	4.0.17	Vite-native testing
@testing-library/react	14.0.0	16.3.1	React 18 support
Storybook
@storybook/react	6.5.14	8.6.14	Major upgrade
@storybook/builder-webpack5	6.5.14	❌ removed	Using Vite
@storybook/react-vite	-	8.6.14	Vite framework
Sass
node-sass	9.0.0	❌ removed	Deprecated
sass	-	1.97.2	Dart Sass
Other
web-vitals	1.1.2	❌ removed	Unused CRA boilerplate

---

Testing Checklist

• npm install - Dependencies install correctly
• npm start - Dev server starts, HMR works
• npm test - All tests pass
• npm run build - Production build succeeds
• npm run storybook - Storybook runs
• npm run lint - No lint errors

---

🤖 Generated with Claude Code