CRA to Vite Migration Script

A standalone Bun script that automates migration from Create React App (with Craco) to Vite for microfrontends.

Note: This is an internal tool developed for T-one company projects. It is specifically designed to work with T-one's microfrontend architecture and conventions. The script may not function correctly with standard Create React App projects outside of T-one's ecosystem, as it relies on specific project structures, dependencies, and migration patterns used within T-one's codebase.

Features

• 🚀 Single-file script with all templates embedded
• 📦 Intelligent package.json merging
• 🎨 Separate icon migration from semantic-ui-react to CustomIcon (opt-in)
• 📝 Automatic JS → JSX file renaming
• 🧹 CRA file cleanup
• 🔍 Dry-run mode for previewing changes
• 🎯 Auto-detects app name from Dockerfile, craco.config.js, or public/index.html

Prerequisites

• Bun installed on your system

Usage

Run the migration script from any project using bunx:

# Navigate to your CRA project
cd your-cra-project

# Run the migration script
bunx t1-vite-migrate

With Options

# Specify app name directly (auto-detected from Dockerfile/craco.config.js/public/index.html by default)
bunx t1-vite-migrate --app-name regional-operator

# Preview changes without applying
bunx t1-vite-migrate --dry-run

# Run ONLY icons migration (separate from base migration)
bunx t1-vite-migrate --icons

# Auto-confirm all prompts
bunx t1-vite-migrate --yes

# Specify target directory
bunx t1-vite-migrate --path /path/to/project

CLI Options

| Option | Short | Description | |--------|-------|-------------| | --app-name <name> | -a | App name (auto-detected from Dockerfile/craco.config.js/public/index.html if not provided) | | --dry-run | -d | Preview changes without applying | | --icons | -i | Run ONLY icons migration (exits after completion, separate from base migration) | | --yes | -y | Auto-confirm all prompts | | --path <dir> | -p | Target directory (default: current) | | --force-pull | -f | Force pull submodules (reset --hard) | | --help | -h | Show help message |

App Name Auto-Detection

The script automatically detects your app name by checking these files in order:

1. Dockerfile (docker/main/Dockerfile) - Looks for pattern: services/{app-name}/
2. craco.config.js - Looks for pattern: '/services/{app-name}/' or "/services/{app-name}/"
3. public/index.html - Looks for pattern: /services/{app-name}/

If the app name is found, it will be used automatically. You can override it with --app-name flag.

What It Does

Base Migration (Default)

The base migration runs all steps except icon migration:

1. Generates Vite Configuration Files

• vite.config.js - Vite configuration with React, ESLint, and LESS support
• eslint.config.js - ESLint 9 flat config
• index.html - Vite entry point (moved from public/)
• tsconfig.json - TypeScript configuration
• jsconfig.json - JavaScript configuration
• .prettierrc.js - Prettier configuration
• .gitignore - Updated gitignore
• init.sh - Submodule initialization script
• docker/main/default.conf - Nginx configuration
• src/main.jsx - New entry point for Vite
• src/setupTests.js - Vitest setup
• src/modules/plugins/manifestGenerator.js - Asset manifest generator

2. Merges package.json

• Adds Vite and related dependencies
• Removes CRA dependencies (react-scripts, @craco/craco, etc.)
• Updates React to v19
• Updates testing libraries
• Preserves project-specific dependencies

3. Renames JS to JSX

• Renames component files that contain JSX
• Skips utility files (actions.js, reducer.js, saga.js, etc.)
• Updates import statements accordingly

4. Migrates Hot Module Replacement API

• Converts module.hot to import.meta.hot (Vite HMR API)

5. Migrates Environment Variables

• Converts process.env.REACT_APP_* to import.meta.env.VITE_*

6. Fixes Test Files

• Converts Jest APIs to Vitest (jest.* → vi.*)
• Updates requireActual → importActual
• Fixes react-test-renderer imports
• Updates AutoSizer mocks
• Fixes matcher replacements

7. Migrates Dockerfile

• Updates to Node 22
• Adds custom registry prefix
• Updates build command for Vite

8. Cleans Up CRA Files

Removes:

• .eslintrc.js / .eslintrc.json
• .eslintignore
• craco.config.js
• src/logo.svg
• src/react-app-env.d.ts
• src/setupProxy.js
• src/index.js
• yarn.lock
• public/index.html
• public/logo512.png

9. Runs Lint Fix

• Automatically runs ESLint fix on migrated files
• Excludes git submodules from linting

Icons Migration (Separate)

Icon migration is not included in the base migration. To migrate icons, run separately:

bunx t1-vite-migrate --icons

This will:

• Replace <Icon name="..."> from semantic-ui-react with <CustomIcon name="...">
• Transform icon names (e.g., "caret down" → "caret-down")
• Validate icons against list-icons.js
• Add TODO comments for missing icons
• Update import statements automatically

Note: Icons migration runs independently and exits after completion. It does not run any other migration steps.

After Migration

1. Install dependencies:

   yarn install
   # or
   npm install

2. Migrate icons (if needed):

   bunx t1-vite-migrate --icons

   Then review TODO comments by searching for "TODO: add new icon" to find icons that need to be added to CustomIcon.

3. Rename environment variables: Change REACT_APP_* to VITE_* in your code and environment files.

4. Test the application:

   yarn start
   # or
   npm start

5. Review changes: Check the git diff and commit when satisfied.

Icon Mapping

The script includes mappings for common Semantic UI icons to CustomIcon names:

| Semantic UI | CustomIcon | |-------------|------------| | caret down | caret-down | | long arrow alternate down | sorting-asc | | long arrow alternate up | sorting-desc | | close, times | close-icon | | trash, trash alternate | delete | | ... | ... |

See the ICON_MAPPINGS object in the script for the complete list.

Troubleshooting

Script doesn't detect CRA project

Make sure the project has react-scripts or @craco/craco in package.json dependencies.

Icons not migrating correctly

• Icons migration is separate - run bunx t1-vite-migrate --icons separately
• Check if src/semantic-ui/components/custom-icon/list-icons.js exists
• Review the icon mappings in the script
• Icons migration is opt-in only and does not run with base migration

Import errors after migration

• Run the linter to identify issues
• Check that all renamed files have updated imports
• Verify relative paths to CustomIcon are correct

License

MIT