-
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"
Macmvn -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 PowerShellmvn -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':
-
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.
Sometimes you want to copy files to or from a container that doesn’t have a volume previously created, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes. 1. Pre-reqs Have Docker installed 2. Start a Docker container For this video I will be using a Jenkins image as an example, so let’s first download it by using docker pull docker pull jenkins/jenkins:lts ...