AEM - Switching from NPM to PNPM in your AEM Application

• If you want to use pnpm instead of npm on your AEM application for better performance or additional features, here's a comprehensive guide on how to make the switch. In this post, you will learn how to:
• • Create AEM App
  • Modify root's pom.xml
  • Select pnpm's Version
  • Modify ui.frontend's pom.xml
  • Build the project
• Hi there, I'm Manuel Gutierrez from dlighthouse.co, and in this quick tips series, I will share snackable videos focusing on just one feature or problem. Let's start by creating a new app using Adobe's archetype. Make sure you define the appTitle, appId, and groupId:

  Unix-like Shells

  mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

  Mac

  mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

  Windows Command Prompt (cmd)

  mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

  Windows PowerShell

  mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate  -D archetypeGroupId=com.adobe.aem  -D archetypeArtifactId=aem-project-archetype  -D archetypeVersion=48  -D appTitle="AEM Project"  -D appId="aem-project"  -D groupId="com.project"

• After generating the app, open the root pom.xml file and replace all instances of the word npm with pnpm. The first instance should be the npm version:

  Change npm to pnpm

  <pnpmVersion>8.15.5</pnpmVersion>

• Go to npmjs.com, search for pnpm, and select the desired version. In this case, use the latest version available, and remember to prefix it with a 'v':

  pnpm Versions
• Continue replacing instances of npm with pnpm throughout the file. Ensure the arguments configuration for the execution with id "pnpm ci" reflects the change:

  Configuration

  <arguments>install --frozen-lockfile</arguments>

• com.github.eirslett frontend-maven-plugin configurations using pnpm:

  Plugin Configuration

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>${frontend-maven-plugin.version}</version>
    <configuration>
      <nodeVersion>v16.17.0</nodeVersion>
      <pnpmVersion>8.15.5</pnpmVersion>
    </configuration>
    <executions>
      <execution>
        <id>install node and pnpm</id>
        <goals>
          <goal>install-node-and-pnpm</goal>
        </goals>
      </execution>
      <execution>
        <id>pnpm ci</id>
        <goals>
          <goal>pnpm</goal>
        </goals>
        <configuration>
          <arguments>install --frozen-lockfile</arguments>
        </configuration>
      </execution>
    </executions>
  </plugin>

• Next, navigate to the ui.frontend folder and update the pom.xml file similarly. Replace npm with pnpm in all relevant sections:

  Frontend Plugin Configuration

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <executions>
      <execution>
        <id>pnpm run prod</id>
        <phase>generate-resources</phase>
        <goals>
          <goal>pnpm</goal>
        </goals>
        <configuration>
          <arguments>run prod</arguments>
        </configuration>
      </execution>
      <execution>
        <id>pnpm run dev</id>
        <phase>generate-resources</phase>
        <goals>
          <goal>pnpm</goal>
        </goals>
        <configuration>
          <arguments>run dev</arguments>
        </configuration>
      </execution>
    </executions>
  </plugin>

• Congratulations! You have successfully configured your AEM project to use pnpm instead of npm. Now you can push this code into your repository.

pnpm equivalent command for npm ci