One of the most in-efficiencies that exist in AEM Developer’s workflow is having to do full builds when making minor changes or when content needs to be downloaded from AEM instances (local or other environments). Due to these in-efficiencies developers often resort to using tools like CRXDE Lite to manipulate files or node properties directly in AEM which has several drawbacks. CRXDE doesn’t provide any syntax checking and often changes across multiple files get forgotten and left there – it’s hard to keep track of what you changed when touching multiple files.
In this article, we will look at some modern solutions to quickly get files in and out of your AEM to speed up your local development workflow.
#1: WATCH & SYNC
One approach to speeding up your development is to watch for changes in the file system and immediately sync them into AEM. There are categories of tools available that allow you to do this very efficiently and are most commonly used when you are making CSS, JavaScript, or Sightly changes.
Following are some tools that you can use which are great for achieving this hot reload
#1.1: NPM (AEM Sync)
- One of the popular ways to push your code to the CRX repository is using an NPM plugin created for the same.
- It’s a Node package that you can use to listen to file changes. Have it running in the background, and changes you make in your IDE will be reflected automatically in AEM.
- The only disadvantage of this is you can only push it. There is no option to import files from the CRX repository.
Steps to configure:
- Open terminal and install NPM if you do not have it already. (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- Once NPM is installed, run this command to install AEM Sync Plugin
- Npm i aemsync -g
- Once aemsync is installed, run this command in the terminal.
- Aemsync -t http://admin:admin@localhost:6502/ -w \path\to\workspace
- This can also be run with only the command aemsync from the desired workspace, and it will take the default parameters. You can also use it with the publisher instance by mentioning the respective URL and Port.
- Now, every file and folder under the mentioned path will be automatically synced with the CRX repository when there is a change in the file/folder.
#2: SYNC WITH AEM OR FILE SYSTEM
Another approach to optimize your developer workflow is to use plugins for your favorite IDE to allow on-demand sync of files & nodes with AEM. Below are some of the most popular plugins which we’ve come across and use regularly to sync specific files, folders, or nodes as needed in and out of AEM.
#2.1: IntelliVault Plugin
- JetBrain is known for making great IDEs and INtelliJ is one such IDE. There are several features available OOTB, and a vast marketplace to complement it with plugins.
- IntelliVault is precisely one such plugin to make the developer’s workflow easier.
- Download the FileVault from here.
- Extract it to your preferred directory.
- Open IntelliJ, and Go to Preferences. Select Plugins
- Select the Marketplaces tab and search for IntelliVault.
- Click Install, and once it’s done, restart the IntelliJ.
- Go to Preferences and select “IntelliVault” under the Tools tab.
- Make these configurations for the Vault Directory field.
- Vault Directory: Path to directory where you unzipped FileVault in Part 1.
- Repository Name: Provide repository name (Easy to select when you have multiple repository configured)
- CRX Repository URL: Provide CRX repository URL depending on which environment you are using.
- Username: AEM server username
- Password: AEM server password
- Click OK to save configuration.
- Now you are ready to pull from the CRX repository and push to the CRX repository. To do this, right click on relevant files/directory -> IntelliVault -> Pull from CRX/Push to CRX
- Open VSCode, Go to Extension Tab.
- Search for AEM Sync and Click on Install.
- Go to the AEM Sync extension’s setting.
- Add these configurations:
- Host: AEM Instance hostname/ip
- Password: AEM instance password
- Port: AEM instance port
- Sync Delay: delay between changing a file and syncing
- Username: AEM instance username
- Now you are ready to sync files to and from the CRX repository. To do this right click on relevant file/directory and select the options as shown below
Steps to configure:
Part 1: (FileVault)
Vault-CLI is required for the IntelliVault plugin to function. Vault-CLI zip was included with the AEM Jar at first, and it was simple to set up. However, it was removed (CRX-quickstart/opt/FileVault) in later versions of Adobe Experience Manager.
Part 2: (IntelliVault)
#2.2 : AEM Sync Plugin (VSCode)
An extension for Visual Studio Code that allows AEM Developer to sync their code updates smoothly.
You can sync not only files, also .content.xml, dialog.xml, etc., can be synced by just one click.
Steps to configure:
About Initialyze
Founded in 2015 in San Francisco, Initialyze specializes in providing software solutions and services to help the world’s leading brands deliver transformation digital brand experiences. Our expertise includes Digital Strategy, Technology Implementation, Analytics, and Marketing. We strive to form strong partnerships with our clients to envision, design, and build innovative digital experiences efficiently and simply. Using an optimized implementation process and a suite of ready to use Initialyzers, we deliver on complex requirements quickly and cost-effectively without sacrificing on quality.