Skip to content

Migrate from Create React App and add Vite #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
didoesdigital merged 60 commits into from
Nov 9, 2025
Merged

Migrate from Create React App and add Vite #260

didoesdigital merged 60 commits into from
Nov 9, 2025

Conversation

@didoesdigital
Copy link
Owner

@didoesdigital didoesdigital commented Nov 2, 2025 •
edited
Loading

This PR closes #251

  • Adds "vite"
  • Adds "vite-plugin-svgr"
  • Adds "vite-tsconfig-paths"
  • Adds "vite-plugin-checker"
  • Removes webpack

This PR also:

  • Adds package.json scripts for linting/lint-fixing, test coverage, vite preview, and type-checking, and splits build script into build:staging and build:production
  • Switches from Jest to Vitest and removes "jest-mock-random"
    • Upgrades Sentry from "@sentry/browser": "^6.17.9" to "@sentry/react": "^10.22.0"
  • Removes "@sentry/cli" and instead uses "@sentry/vite-plugin"
  • Upgrades eslint from "8.23.0" to "8.57.1"
  • Replaces "sass": "^1.49.8" with "sass-embedded": "^1.91.0"
    • Updates Sass syntax using "sass-migrator": "^2.4.2" (but did not save the dependency)
  • Changes tsconfig.json settings like "jsx": "react" to "jsx": "react-jsx", "moduleResolution": "node", to "moduleResolution": "bundler",
  • Adds "@typescript-eslint/eslint-plugin" and "@typescript-eslint/parser" ahead of replacing "eslint-config-react-app"
  • Switches Storybook from webpack to vite
  • Removes "@storybook/preset-create-react-app"
  • Updates "eslint-plugin-storybook" from ^0.6.15 to "0.12.0"
  • Removes "@storybook/node-logger" (unused) and resolutions for "fork-ts-checker-webpack-plugin": "^6.5.3"
  • Updates "@types/node": "^22.15.19"
  • Removes "browserslist" and uses Vite's "baseline-widely-available" build.targetfor JS support
  • Makes widespread code changes (mostly syntax) for Vitest, Sentry, Sass changes
  • Addresses: 3 critical, 12 high, 41 moderate, and 3 low severity vulnerabilities

Mostly unrelated changes:

  • Adds guards against missing flashcard content errors
  • Renames .js diagrams to .jsx
  • Add --itemize-changes to staging/qa deploy rsync steps
  • Change PageNotFound GA/Sentry trigger to location.pathname

To test this PR:

  • Set up the repo (see the README)
  • Check out the branch migrate-off-cra
  • Run yarn to install the changed dependencies
  • Run all the scripts:
    • yarn start and check that Typey Type still works like it should! Lessons and progress especially!
    • yarn test should pass and watch
    • yarn test:unit should pass
    • yarn test:ui should pass
    • yarn storybook should run
    • yarn types should pass without error
    • yarn lint should pass without error or warnings

@didoesdigital
Rename .js diagrams to .jsx
b079291
@didoesdigital
Guard against missing flashcard content errors
6e5bb45
@didoesdigital
Convert create-react-app to vite
e1104b2
@didoesdigital
Update TS and eslint dependencies
3600a0c
@didoesdigital
Update lint-related packages
e13e00b
@didoesdigital
Update lint config and vite lint config
a3cb0a6
@didoesdigital
Update lint packages lock file
33ec249
@didoesdigital
Add --itemize-changes to staging/qa deploys
2de396a
@didoesdigital
Hush jsx-eslint/jsx-ast-utils MetaProperty warning
34ac704 
The prop value with an expression type of MetaProperty could not be
resolved. Please file an issue (
https://github.com/jsx-eslint/jsx-ast-utils/issues/new ) to get this
fixed immediately.
@didoesdigital
Add vitest deps
276ea3f
@didoesdigital
Convert jest tests to vitest
ea8a165
@didoesdigital
Change stubGlobal to spyOn
b6cdc6d
@didoesdigital
Add @vitest/ui
1ae8e40
@didoesdigital
Update yarn.lock
c000ad5
@didoesdigital
Add lint:fix script
99a1d02
@didoesdigital
Don't run eslint during vitest unit tests
acf346d
@didoesdigital
Fix up CI lint and build steps
0d6ca04
@didoesdigital
Remove old react-scripts eject script
9966b3c
@didoesdigital
Remove triple slash type reference
ce71472
@didoesdigital
Remove mockRandomForEach
42f72ab
@didoesdigital
Remove "jest-mock-random"
fec5e19
@didoesdigital
Update yarn.lock to remove "jest-mock-random"
2d37cdc
@didoesdigital
Remove "@storybook/preset-create-react-app" addon
36b1210
@didoesdigital
Remove "@storybook/preset-create-react-app" dep
3235836
@didoesdigital
Update yarn.lock to remove SB dep
80f1827
@didoesdigital
Replace @storybook/react-webpack5 with /react-vite
23384c9
@didoesdigital
Update yarn.lock for SB /react-vite
5c1a78c
@didoesdigital
Fix Storybook config for /react-vite
a98ee04
@didoesdigital
Treat VITE_PUBLIC_URL as '.' in Storybook
9740cff 
Fixes LessonOverview.stories.tsx and LessonsIndex.stories.tsx stories
@didoesdigital
Upgrade eslint to 8.57.1
ed35b95
@didoesdigital
Update eslint-plugin-storybook to v0.12.0
548fb8e
@didoesdigital
Update eslint-plugin-storybook in yarn.lock
29f8480
@didoesdigital
Run "sass-migrator": "^2.4.2"
9b77e3e
@didoesdigital
Fix sass function-units warnings
ab6504f
@didoesdigital
Remove sass
4392b51
@didoesdigital
Update yarn.lock
a81695c
@didoesdigital
Remove unused resolutions
e068076
@didoesdigital
Remove webpack
819c292
@didoesdigital
Update yarn.lock to remove webpack
805babd
@didoesdigital
Remove unused browserslist
8b07549 
Vite relies on `build.target` config
@didoesdigital
Change PageNotFound GA/Sentry trigger to pathname
3734272
@didoesdigital
Upgrade Sentry dependencies
43f1961
@didoesdigital
Update Sentry imports
d2f8c2a
@didoesdigital
Update yarn.lock with Sentry changes
34b568e
@didoesdigital
Use updated Sentry methods
a67dfd7
@didoesdigital
Instrument Sentry
a0942b2
@didoesdigital
Add Sentry vite plugin
c9833d0
@didoesdigital
Update yarn.lock with Sentry vite plugin
b44e2ca
@didoesdigital
Add .env.sentry-build-plugin and ignore it
4822586
@didoesdigital
Use Vite Sentry plugin and updated Sentry
727f46e
@didoesdigital
Prevent undefined Sentry release name
5855def
@didoesdigital
Set core storybook settings before env
07ca554 
This ensures core settings are applied even if vite.config.ts has an
error in it
@didoesdigital
Only run sentryVitePlugin if TYPEY_TYPE_RELEASE
6deb89d 
This ensures Sentry releases only happen when running builds from
deploy scripts with TYPEY_TYPE_RELEASE and not when running vite builds
or build-storybook from the command line
@didoesdigital
Simplify Sentry release name, rely on deploy.env
c31660f 
Turn off debug now because we're done testing
@didoesdigital
Don't run prod build in CI without Sentry token
089907a
@didoesdigital
Update README for Vite instead of Create React App
848ae02
@didoesdigital didoesdigital changed the title Migrate off Create React App Migrate from Create React App and add Vite Nov 2, 2025
@didoesdigital didoesdigital merged commit aca0a03 into master Nov 9, 2025
1 check passed
@didoesdigital didoesdigital deleted the migrate-off-cra branch November 9, 2025 05:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Migrate off create-react-app

2 participants

@didoesdigital