Skip to content

MIGRATION.md

Latest commit

 

History

History
109 lines (73 loc) · 3.41 KB

MIGRATION.md

File metadata and controls

109 lines (73 loc) · 3.41 KB
Raw

AI generated Notes: Migration from Create React App to Vite - Summary

✅ Completed Migration

Your portfolio has been successfully migrated from Create React App to Vite!

Changes Made

1. Configuration Files

  • ✅ Created vite.config.js with React plugin and esbuild configuration for JSX in .js files
  • ✅ Moved public/index.html to root directory
  • ✅ Updated index.html to remove %PUBLIC_URL% references and add Vite script tag

2. Package.json Updates

  • ✅ Removed react-scripts and testing libraries
  • ✅ Added Vite and @vitejs/plugin-react
  • ✅ Upgraded React from v17 to v18
  • ✅ Upgraded React Router from v5 to v6
  • ✅ Updated scripts:
    • npm run dev - Start development server
    • npm run build - Build for production
    • npm run preview - Preview production build
    • npm run deploy - Deploy to GitHub Pages (dist folder)
  • ✅ Added "type": "module" for ES modules support

3. Source Code Updates

  • ✅ Updated src/index.js to use React 18's createRoot API
  • ✅ Updated src/App.js for React Router v6 (Routes instead of Switch, element instead of component)
  • ✅ Updated src/utils/ScrollToTop.js to use useLocation hook instead of withRouter
  • ✅ Changed environment variables from process.env.REACT_APP_* to import.meta.env.VITE_*
  • ✅ Updated .env.sample with new VITE_ prefix

4. Other Files

  • ✅ Updated .gitignore to include /dist and .vite folders

Development Commands

# Start development server (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

# Deploy to GitHub Pages
npm run deploy

Important Notes

Environment Variables

  • Old format: process.env.REACT_APP_SERVICE_ID
  • New format: import.meta.env.VITE_SERVICE_ID

If you have a .env file, update all variables:

  • REACT_APP_SERVICE_ID → VITE_SERVICE_ID
  • REACT_APP_TEMPLATE_ID → VITE_TEMPLATE_ID
  • REACT_APP_USER_ID → VITE_USER_ID

GitHub Pages Deployment

The base in vite.config.js is currently set to / for root deployment. If you need to deploy to a subdirectory (like /krishkash.github.io/), update it in vite.config.js:

base: '/krishkash.github.io/',

Build Output

  • Old: build/ folder
  • New: dist/ folder

Make sure your GitHub Pages deployment is configured to use the dist folder.

Performance Improvements

Vite offers several advantages over Create React App:

  • ⚡ Faster startup: Development server starts almost instantly
  • 🔥 Hot Module Replacement (HMR): Updates reflect immediately without full page reload
  • 📦 Optimized builds: Faster production builds with Rollup
  • 🎯 Better dev experience: Instant feedback during development

Next Steps

  1. ✅ Development server is running successfully
  2. Test all features of your portfolio
  3. If you have environment variables, create a .env file with VITE_ prefixes
  4. Run npm run build to test production build
  5. Update GitHub Actions workflow if you have CI/CD (change from build/ to dist/)

Troubleshooting

If you encounter any issues:

  1. Clear cache: rm -rf node_modules .vite dist and npm install --legacy-peer-deps
  2. Check console: Open browser dev tools to see any runtime errors
  3. Environment variables: Ensure they're prefixed with VITE_ and the .env file is in the root directory