Hi all,
I imported my AEM project in to VS Code IDE.
It has the below structure:
MyProject-1
core
it.tests
it.launcher
ui.apps
ui.dev
etc
I installed the below extensions in VS Code:
1. Extension Pack for Java
2. VS Code AEM Sync
3. Language Support for HTL
I want to export MyProject-1 to my AEM Author.
When I right click MyProject-1, I do not get an option to export to AEM.
But this option is there for all the subfolders like core and it.tests.
Kindly suggest how to export MyProject-1 to my AEM Author.
Appreciate al your responses.
Thanks,
RK.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
The reason you don’t see the “AEM: Sync” option on the project root folder (eg. MyProject-1) is because AEM VS Code extensions like Adobe AEM Sync or Vault CLI integrations are designed to target specific content modules - typically:
ui.apps
ui.content
ui.config
or any module that directly maps to /apps
, /content
, or /conf
in AEM
These folders contain JCR content or client libraries that can be vault-synced (vlt rcp style) or pushed to AEM using vlt
or aem:sync
.
If you want to sync from VS Code UI without going into the terminal:
Right-click the ui.apps
(or other content folder)
→ Choose “AEM: Sync” or “Deploy to AEM” (depending on the extension you're using)
Configure a .vscode/settings.json
at the project level to define your default sync targets.
Example:
{
"aem.sync.target": "http://localhost:4502",
"aem.sync.root": "ui.apps"
}
Install Tasks in VS Code
You can define a VS Code Task that runs mvn clean install -PautoInstallPackage
or even a sync script, and then invoke it from the Command Palette or the Run Task menu.
The parent project (MyProject-1
) is a Maven aggregator and doesn’t directly contain syncable content. The sync operations are context-specific to folders that map to actual JCR paths, and that’s why the UI option is intentionally scoped.
Let me put my question in a different way:
My project code has the below structure:
MyProject-1
core
it.tests
it.launcher
ui.apps
ui.dev
etc
How to import in to VS Code?
I am aware that in order to import in to Eclipse, we need process it first.
Thanks,
RK.
Hi @nsvsrk,
Fortunately, VS Code does not require any preprocessing like Eclipse does.
Install the necessary VS Code extensions:
Java Extension Pack (includes Java support, Maven, debugger)
Optional: Adobe AEM Developer Tools (for vault operations, CRXDE-lite, etc.)
Open the project root:
In VS Code, go to File
→ Open Folder…
Select the root folder MyProject-1
(which contains the parent pom.xml
)
Let VS Code detect the Maven modules:
VS Code will automatically detect the modules (core, ui.apps, etc.) from the parent pom.xml
You should see a "Maven" tab in the sidebar listing all modules and their lifecycle phases (clean, install, package, etc.)
Build the project (optional):
Open the Terminal (Ctrl + ~
) and run: mvn clean install -PautoInstallPackage
or run lifecycle phases using the Maven tab in VS Code.
Explore and code:
You can now write code, debug, refactor, and use Java + Maven features like in Eclipse or IntelliJ.
You don’t need to run mvn eclipse:eclipse
or generate .project
or .classpath
files.
If your core
module uses OSGi annotations (like @Component
), make sure your Java version and classpath are set up correctly in VS Code settings.
You can set breakpoints and debug using VS Code’s built-in Java debugger (requires correct run configuration).
Thanks @SantoshSai .
Build the project (optional): I understand running from Terminal is equivalent to running from command line.
Is it not possible to AEM sync from project name folder in VS Code? Why this option is not there?
It is there for all sub folders.
I want to do everything from UI itself.
Thanks,
RK.
The reason you don’t see the “AEM: Sync” option on the project root folder (eg. MyProject-1) is because AEM VS Code extensions like Adobe AEM Sync or Vault CLI integrations are designed to target specific content modules - typically:
ui.apps
ui.content
ui.config
or any module that directly maps to /apps
, /content
, or /conf
in AEM
These folders contain JCR content or client libraries that can be vault-synced (vlt rcp style) or pushed to AEM using vlt
or aem:sync
.
If you want to sync from VS Code UI without going into the terminal:
Right-click the ui.apps
(or other content folder)
→ Choose “AEM: Sync” or “Deploy to AEM” (depending on the extension you're using)
Configure a .vscode/settings.json
at the project level to define your default sync targets.
Example:
{
"aem.sync.target": "http://localhost:4502",
"aem.sync.root": "ui.apps"
}
Install Tasks in VS Code
You can define a VS Code Task that runs mvn clean install -PautoInstallPackage
or even a sync script, and then invoke it from the Command Palette or the Run Task menu.
The parent project (MyProject-1
) is a Maven aggregator and doesn’t directly contain syncable content. The sync operations are context-specific to folders that map to actual JCR paths, and that’s why the UI option is intentionally scoped.
Hi @nsvsrk ,
Try below steps:
Step 2: Open Full Project in VS Code
Do this exactly:
- Open VS Code.
- Go to File => Open Folder…
- Select MyProject-1, not submodules like core.
Now VS Code will auto-recognize pom.xml and show modules in the Maven Explorer tab.
Step 3: Build and Install to AEM (Author or Publish)
Open terminal in VS Code (Ctrl+`) and run:
mvn clean install -PautoInstallSinglePackage
This will:
Build the whole project
Install ui.apps, core, config, etc. to your local AEM Author
Step 4: Enable Fast Sync via AEM Sync (Recommended for UI)
To live-sync HTL, JS, CSS, clientlibs to AEM without full rebuilds:
- Go to ui.apps folder
- Right-click => Select “Enable AEM Sync”
- Edit .vscode/settings.json:
{
"aemSync": {
"targets": [
{
"name": "local-author",
"url": "http://admin:admin@localhost:4502",
"root": "ui.apps/src/main/content/jcr_root/apps/myproject"
}
]
}
}
Now, any save inside HTL/JS/CSS files under ui.apps will automatically push to AEM Author.
Views
Likes
Replies
Views
Likes
Replies