Migrate ootb AEM React SPA to AEM React SPA with Vite instead of Webpack? Or upgrade Webpack 4 to Webpack 5 | Community
Skip to main content
A
andrija_sm
Level 2
July 9, 2024
Solved

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

  • July 9, 2024
  • 2 replies
  • 1182 views

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-headless/spa-editor/react/create-project

- 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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by 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.

 

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 9, 2024

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

Esteban Bustamante
    A
    andrija_smAuthor
    Level 2
    July 9, 2024

    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
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      July 9, 2024

      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.

       

      Esteban Bustamante
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        July 16, 2024

        @andrija_sm Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...