Apr 29, 2024
Creating custom components in AEM isn’t always straightforward, particularly when you need to make changes or perform testing. Usually, it requires developers to shut down the entire environment and then redeploy everything. For a front-end developer, this is a nightmare.
However, using AEM Sync can speed up the process, and in this blog, we’ll explore how to do just that.
What is AEM Sync Extension
AEM Sync is a Visual Studio Code extension that enables AEM developers to sync code updates smoothly. They can sync files as well as .content.xml, dialog.xml, etc., with one click.
Prerequisites
-
A running AEM instance (author or publish)
-
Visual Studio Code installed
Installation
-
Open Visual Studio Code.
-
Go to the Extensions tab (Ctrl+Shift+X or Cmd+Shift+X on Mac).
-
Search for "VSCode AEM Sync".
-
Click the "Install" button on the extension by Yamato or Yinkai15 (there are a few options).
How it Works
Pushing Changes From Code to Local Instance
-
Go to the VS code file you need to make a change
-
Right click it and hit 'Export to AEM Server'
Pulling Changes From Local Instance to Code
-
Go to the folder containing the changes
-
Right click and hit 'Import from AEM Server'
Options
Optionally you can check the extension options
-
Go to VS Code
-
File/settings
-
Select Extensions and search for AEM Sync
There you can find some options like Autopush (on every save it would perform a push to the AEM Server)
Wrapping Up
AEM Sync isn’t mandatory for development, but it helps make the dev workflow go much more smoothly and reduce time for testing.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.