homebase-app icon indicating copy to clipboard operation
homebase-app copied to clipboard

Migration to Vite Tooling

Open ashutoshpw opened this issue 5 months ago • 1 comments

This PR migrates the project from using Craco (Create React App Configuration Override) to Vite for significantly improved build performance and modern development experience.

🚀 Key Benefits

  • ⚡ Faster Development: Vite's HMR is significantly faster than Webpack
  • 🏗️ Faster Builds: Vite uses Rollup for optimized production builds
  • 📦 Better Tree Shaking: Improved bundle optimization
  • 🔧 Modern Tooling: Native ES modules and better TypeScript support

📋 Changes Made

Build System Migration

  • Replaced @craco/craco and react-scripts with vite and @vitejs/plugin-react
  • Removed craco.config.js and created vite.config.ts with equivalent configuration
  • Updated package.json scripts:
    • yarn dev (replaces craco start)
    • yarn build (replaces craco build)
    • yarn preview (new - preview production build)

Configuration & Dependencies

  • Node.js Polyfills: Added vite-plugin-node-polyfills to maintain compatibility with crypto, buffer, stream, etc.
  • SVG Support: Added vite-plugin-svgr for React component SVG imports
  • Environment Variables: Configured to support existing REACT_APP_ prefixed variables
  • Path Aliases: Maintained absolute imports from src/ directory

Code Updates

  • HTML Structure: Moved index.html to root with Vite entry point structure
  • CSS Imports: Updated relative CSS imports (e.g., "./App.css")
  • SVG Imports: Updated all SVG imports to use ?react suffix for SVGR compatibility
  • Dynamic Imports: Fixed dynamic imports to use explicit file extensions for Vite compatibility

Build Output

  • Maintains build/ directory structure for deployment compatibility
  • Source maps enabled for debugging
  • Optimized chunking and tree shaking
  • Compatible with existing _redirects file for SPA routing

📊 Performance Impact

Build times are significantly reduced and development server startup is faster. The warnings about large chunks are expected for this application size and can be addressed in future optimizations if needed.

ashutoshpw avatar Jun 03 '25 13:06 ashutoshpw

Deploy Preview for tezos-homebase failed. Why did it fail? →

Name Link
Latest commit 4b434c8c4bf7e4e80b344bd926c8d17a66ac7222
Latest deploy log https://app.netlify.com/projects/tezos-homebase/deploys/6888c30f4c264800085283b7

netlify[bot] avatar Jun 03 '25 13:06 netlify[bot]