Skip to content

Latest commit

 

History

History
122 lines (95 loc) · 8.55 KB

File metadata and controls

122 lines (95 loc) · 8.55 KB

My Site

This is an Adobe Experience Manager 6.5 LTS project (on-prem or Adobe Managed Services) using the Java stack.

It is built with Maven and deployed to Author/Publish instances (local Quickstart JAR, shared dev, or AMS). Dispatcher configuration is validated locally using Apache HTTPD syntax checks (httpd -t or apachectl configtest).

Adobe Managed Services customers may use Cloud Manager for builds and deployments; on-prem customers use their own CI/CD and instance topology.

Use the JDK version required by your pom.xml / toolchain (often documented in the project README or parent POM).

Modules

  • core: OSGi bundle. Contains the Java code for backend services, models, and business logic. Uses OSGi for dependency injection, Sling models for exposing content to Sling scripts and JUnit for unit testing.
  • ui.apps: FileVault content package. Contains the application code, including components, templates, client libraries, and content structure. Uses HTL as the scripting engine.
  • ui.apps.structure: FileVault content package. Empty module that defines the structure of the repository content.
  • ui.config: FileVault content package. Contains OSGi configurations for the application.
  • ui.content: FileVault content package. Contains the mutable content for the application, such as the initial site structure, templates, sample assets.
  • ui.frontend: Frontend module built with Vite. Compiles TypeScript, Vue 3 SFC, and Sass/SCSS. During the build it's copied to the ui.apps module as client libraries via aem-clientlib-generator. Uses Node.js (v22.14.0), npm, and Vite with @aem-vite/vite-aem-plugin for AEM proxy integration. Components extend AEM Core Components 2.28.0 via sling:resourceSuperType.
  • all: FileVault content package. Includes all other FileVault packages for easy deployment.

Build

The project uses Maven as the build tool. The following commands are commonly used:

  • full build: mvn clean install
  • build and deploy to local AEM (all modules): mvn clean install -PautoInstallSinglePackage
  • build and deploy a single FileVault content package: mvn clean install -pl <module> -PautoInstallPackage
  • build and deploy a single OSGi bundle: mvn clean install -pl <module> -PautoInstallBundle
  • build frontend only: cd ui.frontend && npm run prod
  • develop frontend locally: cd ui.frontend && npm start (Vite dev server with HMR, proxies AEM at localhost:4502)
  • skip frontend build during Java/HTL iteration: append -Dskip.frontend=true (see DEV_WORKFLOW.md)

Vue 3 Integration

Vue 3.5+ SFCs are compiled by Vite into AEM clientlibs. The pattern is component islands — Vue apps mount onto specific DOM roots rendered by HTL.

HTL → Vue Mount Point

<!-- component.html -->
<div data-vue-app="myComponent"
     data-resource-type="${resource.resourceType}"
     data-props='${model.json @ context="scriptString"}'></div>

Vue 3 Mount Entry (Composition API)

Each Vue component has a main.ts under ui.frontend/src/main/webpack/components/<ComponentName>/:

// main.ts
import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';

document.querySelectorAll<HTMLElement>('[data-vue-app="myComponent"]').forEach((el) => {
  if (el.dataset.mounted) return;
  el.dataset.mounted = 'true';
  const props = JSON.parse(el.dataset.props || '{}');
  createApp(MyComponent, props).mount(el);
});

Sling Model JSON Contract

@Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = "jackson", extensions = "json")
public class MyComponentModel {
    @ValueMapValue private String title;
    public String getTitle() { return title; }
}

Vue 3 Conventions

  • Use <script setup lang="ts"> with the Composition API (ref, reactive, computed)
  • Use defineProps<T>() for typed props matching the Sling Model JSON contract
  • Guard mounts with data-mounted to prevent double-mount on author-mode refreshes
  • For edit-mode reactivity, use MutationObserver to detect DOM changes from AEM overlays

Copilot Customization

This project includes custom Copilot instructions, skills, and agents:

  • .github/copilot-instructions.md — global instructions for Copilot Chat
  • .github/instructions/ — per-module instruction files (Java/HTL, Dispatcher, Vue/Frontend)
  • .github/skills/ — domain-specific skills (aem-65-onprem, dispatcher, aem-workflow, aem-replication, aem-permissions, create-basic-page-template)
  • .github/agents/ — custom agent definitions for specialized tasks

Important resources

Note: behavior and operations differ from AEM as a Cloud Service (stateless cloud, immutable publish, etc.). Prefer AEM 6.5 documentation below for this codebase.