Before moving forward, we must know, What is CRA and Vite? Why we should always use Vite over CRA? Let's have clarity to these questions first.

1. CRA (Create React App)

What it is:
CRA is a scaffolding tool by Facebook that lets you spin up a React app with zero config. It uses Webpack under the hood and provides out-of-the-box setup for Babel, ESLint, Jest, etc.

Pros (back when it launched):

• Zero config setup for React.

• Batteries included (build, dev server, testing).

• Widely adopted → big community, lots of tutorials.

Cons (nowadays):

• Webpack-based → slower builds, slower hot reload.

• Large dev server memory usage.

• Outdated: CRA is effectively unmaintained (Facebook stopped investing, React docs themselves suggest alternatives).

• Harder to customize build without eject.

• No built-in support for modern features like ESM-first, lightning-fast HMR, TS/JS mixing, etc.

2. Vite

What it is:
Vite (by Evan You, creator of Vue) is a next-gen frontend build tool. It uses esbuild for dev (super fast) and Rollup for optimized production builds.

Pros:

• Instant dev server startup (no big bundle first, serves ESM on-demand).

• Fast HMR (hot module replacement) — changes reflect almost instantly.

• Lightweight (low memory usage).

• First-class TypeScript support.

• Built-in support for JSX/TSX, CSS, Sass, PostCSS without plugins.

• Simple config (vite.config.js).

• Supports code splitting, dynamic imports, tree-shaking out of the box.

• Ecosystem: official plugins for React, Vue, PWA, SSR, etc.

Cons:

• Smaller ecosystem than Webpack (but growing fast).

• Sometimes plugin compatibility issues if you rely on niche Webpack loaders.

Why migrate from CRA to Vite?

1. Performance

   • CRA (Webpack) = ~20s cold start, HMR delay.

   • Vite = <1s cold start, almost instant HMR.
     For larger apps, dev productivity boost is huge.

2. Maintenance

   • CRA is no longer actively developed.

   • Vite is modern, actively maintained, and recommended by React docs for new projects.

3. Better DX (Developer Experience)

   • Simple config.

   • Fast reloads.

   • Cleaner builds with Rollup.

4. Future-proof

   • Vite is ESM-first (the future of JS).

   • CRA is stuck on older bundling approaches.

5. Customizability

   • CRA requires eject to customize Webpack.

   • Vite lets you configure via plugins and vite.config.js without ejecting.

Overall Conclusion:

• CRA was great in 2017–2019 for newcomers, but today it’s heavy, slow, and basically abandoned.

• Vite is the modern replacement: fast dev server, instant HMR, simple config, actively maintained.

• Migrating makes your project faster, lighter, and future-proof.

  ---

   

Now, as we have clear understanding of CRA and Vite. Let's move to the step by step migration process.

Quick prerequisites & naming (important)

• Liferay 7.4+ uses Client Extensions defined by client-extension.yaml. You’ll reference your JS/CSS bundles there, and you’ll typically copy the built files into the CX ZIP via the assemble block.

• Decide on the