Migrate from Create React App to Vite

.github/workflows/ci.yml

@@ -13,17 +13,22 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
 
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
 
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 9
+
     - name: Setup Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'yarn'
+        cache: 'pnpm'
 
     - name: Install dependencies
       run: make install
@@ -50,11 +55,16 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v4
 
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 9
+
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
         node-version: 20.x
-        cache: 'yarn'
+        cache: 'pnpm'
 
     - name: Install dependencies
       run: make install

.gitignore

@@ -21,3 +21,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+
+# TypeScript
+*.tsbuildinfo
+
+# pnpm
+.pnpm-store

Makefile

@@ -1,51 +1,66 @@
-.PHONY: help install test test-coverage build lint lint-fix clean ci start
+.PHONY: help install dev start test test-ui test-coverage build preview lint lint-fix clean ci
 
 # Default target
 help:
 	@echo "Available targets:"
 	@echo "  make install        - Install dependencies"
-	@echo "  make test           - Run tests"
+	@echo "  make dev            - Start Vite development server"
+	@echo "  make start          - Start Vite development server (alias for dev)"
+	@echo "  make test           - Run tests with Vitest"
+	@echo "  make test-ui        - Run tests with Vitest UI"
 	@echo "  make test-coverage  - Run tests with coverage"
 	@echo "  make build          - Build production bundle"
+	@echo "  make preview        - Preview production build locally"
 	@echo "  make lint           - Check code formatting"
 	@echo "  make lint-fix       - Fix code formatting"
 	@echo "  make clean          - Clean build artifacts"
 	@echo "  make ci             - Run all CI checks (test + build + lint)"
-	@echo "  make start          - Start development server"
 
 # Install dependencies
 install:
-	yarn install --frozen-lockfile
+	pnpm install --frozen-lockfile
 
-# Run tests without coverage
+# Start Vite development server
+dev:
+	pnpm dev
+
+# Alias for dev
+start: dev
+
+# Run tests with Vitest
 test:
-	yarn test --watchAll=false
+	pnpm test --run
+
+# Run tests with Vitest UI
+test-ui:
+	pnpm test:ui
 
 # Run tests with coverage
 test-coverage:
-	yarn test --watchAll=false --coverage
+	pnpm test:coverage --run
 
 # Build production bundle
 build:
-	yarn build
+	pnpm build
+
+# Preview production build
+preview:
+	pnpm preview
 
 # Check code formatting with Prettier
 lint:
-	yarn prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
+	pnpm prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
 
 # Fix code formatting with Prettier
 lint-fix:
-	yarn prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
+	pnpm prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
 
 # Clean build artifacts
 clean:
 	rm -rf build
 	rm -rf coverage
 	rm -rf node_modules
+	rm -f pnpm-lock.yaml
 
 # Run all CI checks
 ci: test-coverage build lint
-
-# Start development server
-start:
-	yarn start

package.json

@@ -2,43 +2,26 @@
   "name": "mathjojo",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/katex": "^0.14.0",
-    "@types/lz-string": "^1.3.34",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/shallowequal": "^1.1.1",
-    "@types/styled-components": "^5.1.26",
-    "husky": "^8.0.1",
     "katex": "^0.16.2",
     "latex.css": "^1.8.0",
-    "lint-staged": "^13.0.3",
     "lz-string": "^1.4.4",
-    "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-is": "^19.2.0",
     "shallowequal": "^1.1.0",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.4.2",
+    "styled-components": "^6",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   },
   "browserslist": {
     "production": [
@@ -61,5 +44,29 @@
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^14",
+    "@testing-library/user-event": "^14",
+    "@types/jest": "^30.0.0",
+    "@types/katex": "^0.16.7",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/shallowequal": "^1.1.5",
+    "@types/styled-components": "^5.1.36",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^4.0.13",
+    "@vitest/ui": "^4.0.13",
+    "husky": "^8.0.1",
+    "jsdom": "^27.2.0",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.13"
   }
 }