Changes of Frontend module changes to deploy AEM local | Community
Skip to main content
V
varaande
Level 5
April 2, 2024
Solved

Changes of Frontend module changes to deploy AEM local

  • April 2, 2024
  • 3 replies
  • 1154 views

Hi Team

 

Kindly let me know if any command  build only Frontend module changes to deploy AEM local  Same as core module (other than mvn clean install for ui.frontend module.

 

Core Module:

mvn clean install -PautoInstallBundle

 

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,

 

The problem is that the ui.frontEnd module needs to be compiled, built, minified, and packaged using webpack to be deployable on the AEM server. So, there isn't a direct Maven command, but you would have to run at least 2 commands. However, you could use two approaches:

  1. Sync the HTML/HTL code using an external tool such as AEM Sync for VS. You can learn more about this tool here: AEM Sync for VS.

  2. Use the webpack static server to develop your front-end code in a hot-swap manner. Simply run the command npm run dev once you're set up in the ui.frontEnd folder. You can learn more about this approach here:

I hope this helps.

3 replies

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

Hi,

 

The problem is that the ui.frontEnd module needs to be compiled, built, minified, and packaged using webpack to be deployable on the AEM server. So, there isn't a direct Maven command, but you would have to run at least 2 commands. However, you could use two approaches:

  1. Sync the HTML/HTL code using an external tool such as AEM Sync for VS. You can learn more about this tool here: AEM Sync for VS.

  2. Use the webpack static server to develop your front-end code in a hot-swap manner. Simply run the command npm run dev once you're set up in the ui.frontEnd folder. You can learn more about this approach here:

I hope this helps.

Esteban Bustamante
    V
    varaandeAuthor
    Level 5
    April 9, 2024

    Hi Team

     

    Challenges is not able to install any extensions at Visual Source code due secure network.

    we are able build all module except ui-frontend which required install npm and node. 

    Is possible stop Insall or download npm and node used local installed npm and node   while using "frontend-maven-plugin" or advise how refer the proxy local registry.

     
    Here is Error:
    [ERROR] Failed to execute goal org.codehaus.mojo:exec-maven-plugin:1.3.2:exec (npm install (clean)) on project dmaf.ui.frontend: Command execution failed.: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
     
    npm ERR! code ETIMEDOUT
    npm ERR! syscall connect
    npm ERR! errno ETIMEDOUT
    npm ERR! network request to https://registry.npmjs.org/acorn failed, reason: connect ETIMEDOUT 104.16.31.34:443
    npm ERR! network This is a problem related to network connectivity.
    npm ERR! network In most cases you are behind a proxy or have bad network settings.
    npm ERR! network
    npm ERR! network If you are behind a proxy, please make sure that the
    npm ERR! network 'proxy' config is set properly. See: 'npm help config'
     
    ui-frontend module POM.xml
    <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <executions>
                        <execution>
                            <id>npm run prod</id>
                            <phase>generate-resources</phase>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <configuration>
                                <arguments>run prod</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>

    main pom.xml

    <configuration>
    <nodeVersion>v18.18.2</nodeVersion>
                <npmVersion>9.8.1</npmVersion>
              </configuration>


    Local env
    npm and node versions same

    C:\Users\userid\npmrc.txt 

    always-auth=true

    registry=http://xxxxxxxxxxxxxxxx/nexus/repository/Publicnpm/

    //xxxxxxxxxxx:8081/:_auth=xxxxxxxxxxxxxxxxx


    Not sure how to check npmrc.txt  configuration working or not?

    Regards
    Vara

     

    Anudeep_Garnepudi
    Community Advisor
    Anudeep_GarnepudiCommunity Advisor
    Community Advisor
    April 2, 2024

    @varaande 

     

    We can't deploy ui.frontend module directly to aem instance as the purpose of frontend module is to build and bundle the frontend code and push to clientlib(s) under ui.apps.

     

    Use storybook to test the frontend changes quickly.

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    April 5, 2024

    You can use AEM FED && AEM Sync w/ WebPack for local development for the best results. Hot-reloading works perfectly. The latest AEM maven module already has all this setup, https://github.com/adobe/aem-project-archetype/blob/develop/src/main/archetype/ui.frontend.general/package.json


    AEM FED -> https://aemfed.io/

     

     

      Terms & ConditionsAccessibility statement

      Loading footer...