Making Dev Life Easier with VSCode AEM Sync

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

1. Open Visual Studio Code.

2. Go to the Extensions tab (Ctrl+Shift+X or Cmd+Shift+X on Mac).

3. Search for "VSCode AEM Sync".

   

4. 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

  

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.