Migrate ootb AEM React SPA to AEM React SPA with Vite instead of Webpack? Or upgrade Webpack 4 to Webpack 5

[gangula2018]

When we create AEM React SPA Archetype project (frontendModule="react") we get AEM SPA Editor JS SDK and the ootb React application (ui.frontend) based on the Create React App with core components with necessary mappings 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

- Is there a definite guide on how to migrate AEMs ui.frontend CRA to React Vite application?

- Any documentation on how to get there with Vite Plugin (aemvite.dev)?

Additionally, is it possible to upgrade from Webpack 4 to Webpack 5 in the context of AEM ui.frontend?

Thanks

[EstebanBustamante]

Hi, 

There is no official guide to migrate from SPA archetypes to Vite. Technically, I think it is possible; however, some things are pre-configured to run smoothly with Webpack. For example, the manifest.json that SPA relies on is set and easy to configure in Webpack, whereas in Vite, you need to do extra configuration, etc.

From what I can read, VitePlugin is a different story. This plugin is meant for swapping Webpack in the regular archetype, not the SPA one, and the steps are described on the same page you posted. Please check here: https://www.aemvite.dev/guide/front-end/ .

Hope this helps

[gangula2018]

Thanks for a quick insight -

I couldn't confirm this statement, from the aem vite plugin documentation - This plugin is meant for swapping Webpack in the regular archetype - Where does this come from?

Thanks again

[EstebanBustamante]

There are hints suggesting that, for example https://www.aemvite.dev/guide/backend/clientlibs/#add-esmodule-htl-binding . You won't use HTL if this would be an SPA project, among others.