Hello,
I am trying to add new frontend module which is "npm nx build". I have seen npm install & build are working fine using "com.github.eirslett" plugin, but same plugin is not working for nx install and nx build. Please let me know if anyone have tried this approach.
Thanks and regards,
Swathi.
Views
Replies
Total Likes
Hi @SwathiCh1 ,
Integrating a custom frontend module using NX monorepo into an AEM project can be accomplished by extending the existing frontend-maven-plugin configuration to support NX commands. The frontend-maven-plugin is commonly used in AEM projects to run frontend build processes such as npm install and npm build.
To run NX-specific commands like nx install and nx build, you will need to configure the frontend-maven-plugin to execute these commands. Here's how you can achieve this:
Add frontend-maven-plugin to your Maven POM file:
Ensure you have the frontend-maven-plugin in your pom.xml:
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.10.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v16.13.0</nodeVersion>
<npmVersion>8.1.0</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>nx build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run nx build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
Customize the Plugin Configuration for NX:
If you need to run additional NX commands or handle different tasks, you can add more executions to the frontend-maven-plugin configuration. For example, to run nx lint, nx test, and other NX-specific tasks:
<execution>
<id>nx lint</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run nx lint</arguments>
</configuration>
</execution>
<execution>
<id>nx test</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run nx test</arguments>
</configuration>
</execution>
Ensure Compatibility with Your NX Monorepo:
"scripts": {
"nx": "nx",
"build": "nx build",
"lint": "nx lint",
"test": "nx test"
}
Run Maven Build:
After setting up the frontend-maven-plugin in your pom.xml, you can run your Maven build commands as usual. Maven will handle the frontend tasks via the frontend-maven-plugin
mvn clean install
Verify the Build Process:
Ensure that the build process correctly executes the NX commands and that the frontend build artifacts are generated as expected.
Your project structure might look like this:
/my-aem-project
|-- /ui.apps
|-- /ui.content
|-- /ui.frontend
| |-- /apps
| |-- /libs
| |-- /nx-workspace
| |-- /apps
| |-- /libs
| |-- package.json
| |-- nx.json
| |-- angular.json
|-- pom.xml
In the example above, the ui.frontend module contains your NX workspace, and the pom.xml is set up to run the necessary NX commands via the frontend-maven-plugin.
By following these steps, you should be able to integrate and build your NX-based frontend module within an AEM project using Maven. This approach leverages the frontend-maven-plugin to handle the frontend build process seamlessly within the AEM build lifecycle.
Try checking this earlier question which is not the same might help you with the configuration.
@SwathiCh1 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.
Views
Likes
Replies
Views
Likes
Replies