AEM - Switching from NPM to Yarn in your AEM Application

• If you want to use Yarn instead of npm on your AEM application for better performance or additional features, here I will guide you through the process. On this post you will:
• • Create AEM App
  • Modify root's pom.xml
  • Select Yarn's Version
  • Modify ui.frontend's pom.xml
  • Build the project
  • Generate the yarn.lock file
• First, let’s create a new app if you don't have one already 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 using Yarn" \
   -D appId="aem-yarn" \
   -D groupId="com.usingyarn"

  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 using Yarn" \
   -D appId="aem-yarn" \
   -D groupId="com.usingyarn"

  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 using Yarn" ^
   -D appId="aem-yarn" ^
   -D groupId="com.usingyarn"

  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 using Yarn" `
   -D appId="aem-yarn" `
   -D groupId="com.usingyarn"

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

  Change npm to yarn

  <yarnVersion>v1.22.22</yarnVersion>

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

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

  Configuration

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

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

  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>
      <yarnVersion>v1.22.22</yarnVersion>
    </configuration>
    <executions>
      <execution>
        <id>install node and yarn</id>
        <goals>
          <goal>install-node-and-yarn</goal>
        </goals>
      </execution>
      <execution>
        <id>yarn ci</id>
        <goals>
          <goal>yarn</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 yarn in all relevant sections:

  Frontend Plugin Configuration

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

• Finally, build the project and then after the node folder has been created, delete the package-lock.json file and run Yarn to generate a yarn.lock file:

  Unix-like Shells

  ./node/yarn/dist/bin/yarn

  Mac

  ./node/yarn/dist/bin/yarn

  Windows Command Prompt (cmd)

  ./node/yarn/dist/bin/yarn

  Windows PowerShell

  ./node/yarn/dist/bin/yarn

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

AEM Project Archetype on GitHub

npm ci equivalent in Yarn