ui-frontend module not able sync using "vscode aem sync" extension or mvn command | Community
Skip to main content
V
varaande
Level 5
April 15, 2024
Solved

ui-frontend module not able sync using "vscode aem sync" extension or mvn command

  • April 15, 2024
  • 2 replies
  • 1187 views

Hi Team

I am not able sync changes of ui-frontend module either using vscode aem sync extension or mvn command. Please let me know how to sync. ui-frontend module changes to do the unit testing or debugging as part of frontend module changes. 

 

1) Using VS Code AEM Sync, I  am able to sync changes ui-apps but not ui-frontend module changes.

https://marketplace.visualstudio.com/items?itemName=yamato-ltd.vscode-aem-sync

2) Using below mvn command able see the changes to ui-apps but not able deploy directly changes to AEM Server unless deploy ui-apps modules (first build the frontend module then deploy the ui-apps module)
frontend module: mvn clean install -PautoInstallPackage  (can I use mvn clean install also because we are not able to deploy the changes to aem server)
then 
ui-apps module :mvn clean install -PautoInstallPackage

Regards

Vara

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

Hi,

 

I would recommend using the static server that comes with webpack as part of the AEM archetype. This will enable you to experience 'hot reload,' thereby avoiding the need to deploy your code multiple times on your AEM server. The process is straightforward: navigate to your ui.frontEnd module and execute the command 'npm run dev.' This will launch a static server that serves content from the path 'ui.frontend/src/main/webpack/static/index.html.' In this file, the client libraries (your CSS/JS) are already imported, so you will likely only need to adjust the HTML. This approach can significantly speed up your debugging and testing process.

 

You can learn more here:

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/archetype/front-end#using-webpack 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/changes-of-frontend-module-changes-to-deploy-aem-local/td-p/663840 

 

Hope this helps

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
April 15, 2024

Hi,

 

I would recommend using the static server that comes with webpack as part of the AEM archetype. This will enable you to experience 'hot reload,' thereby avoiding the need to deploy your code multiple times on your AEM server. The process is straightforward: navigate to your ui.frontEnd module and execute the command 'npm run dev.' This will launch a static server that serves content from the path 'ui.frontend/src/main/webpack/static/index.html.' In this file, the client libraries (your CSS/JS) are already imported, so you will likely only need to adjust the HTML. This approach can significantly speed up your debugging and testing process.

 

You can learn more here:

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/archetype/front-end#using-webpack 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/changes-of-frontend-module-changes-to-deploy-aem-local/td-p/663840 

 

Hope this helps

Esteban Bustamante
    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    May 27, 2024

    @varaande  

    Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

     

    cc: @kautuk_sahni 

    Esteban Bustamante
      Terms & ConditionsAccessibility statement

      Loading footer...