Changes of Frontend module changes to deploy AEM local

[varaande]

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

[EstebanBustamante · Accepted solution]

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:

   • Adobe Experience League: Using Webpack
   • Medium: AEM UI Frontend Module Complete Guide

I hope this helps.

[varaande]

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]

@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]

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

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