Expand my Community achievements bar.

SOLVED

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

Avatar

Level 5

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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/arche... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/changes-of-frontend-module... 

 

Hope this helps



Esteban Bustamante

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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/arche... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/changes-of-frontend-module... 

 

Hope this helps



Esteban Bustamante

Avatar

Community Advisor

@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