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
• 🎨 Icon migration from semantic-ui-react to CustomIcon
• 📝 Automatic JS → JSX file renaming
• 🧹 CRA file cleanup
• 🔍 Dry-run mode for previewing changes

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
bunx t1-vite-migrate --app-name regional-operator

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

# Skip icon migration
bunx t1-vite-migrate --skip-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 (e.g., regional-operator) | | --dry-run | -d | Preview changes without applying | | --skip-icons | -s | Skip Icon migration | | --yes | -y | Auto-confirm all prompts | | --path <dir> | -p | Target directory (default: current) | | --help | -h | Show help message |

What It Does

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. Migrates Icon Components

Replaces <Icon name="..."> from semantic-ui-react with <CustomIcon name="...">:

• Transforms icon names (e.g., "caret down" → "caret-down")
• Validates icons against list-icons.js
• Adds TODO comments for missing icons
• Updates import statements automatically

3. 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

4. Renames JS to JSX

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

5. 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

After Migration

1. Install dependencies:

   bun install
   # or
   npm install

2. Review TODO comments: Search 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:

   bun run start

5. Run linting:

   bun run lint

6. 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

• Check if src/semantic-ui/components/custom-icon/list-icons.js exists
• Review the icon mappings in the script
• Use --skip-icons to skip icon migration entirely

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