Ability to upload custom HTML package in AEM Cloud

[Abhishek_Dubey]

Is there a supported way to upload a custom HTML package in AEM as a Cloud Service and render it as a microsite or landing page?

I'm looking for functionality similar to the now-deprecated Landing Page Replicator. Ideally, I want to:

• Upload a static HTML/CSS/JS package
• Render it directly in the browser
• Use it as a standalone microsite or campaign landing page under a specific domain node

Has anyone implemented this in AEM Cloud? Are there best practices or recommended approaches?

Any guidance or examples would be greatly appreciated!

[partyush]

Hi @Abhishek_Dubey 

Adobe Experience Manager (AEM) as a Cloud Service allows you to create microsites or landing pages from custom HTML packages, and the best way is likely through site templates, which are designed for quick site creation.

Steps to Implement

• Create a Site Template: Package your HTML, CSS, and JS into a site template, following Adobe’s guidelines. You can download and customize the standard template from GitHub.
• Upload and Deploy: Use AEM’s Site Creation Wizard to upload your template and create the site, which can then be rendered under a specific domain.
• Configure Domain: Map a custom domain to your site for standalone microsites, leveraging AEM Cloud’s CDN for performance.

Best Practices

• Ensure your template includes all necessary files and follows the structure outlined in Adobe’s documentation, such as Site Templates.
• Test thoroughly in a sandbox environment before going live to avoid impacting production.

This approach replaces the deprecated Landing Page Replicator and is supported for AEM Cloud, with many organizations using it for similar purposes.

Implementation Details

For the site template approach, the process involves:

1. Downloading and Customizing the Template: Download the latest standard site template from GitHub. Customize the CSS, JS, and HTML to include your static package, ensuring the structure aligns with AEM’s expectations.
2. Building the Template: Use npm install, npm run build, and npm run deploy for local testing, or manually upload the ZIP file (e.g., aem-site-template-standard-1.1.0.zip) for cloud deployment.
3. Creating the Site: Log into AEM Author Service via Adobe Experience Cloud, navigate to Sites, and use the Create > Site (Template) option to upload and select your template. Follow the wizard to set the site title and name, ensuring uniqueness if in a shared environment.
4. Domain Configuration: Use Cloud Manager to add SSL certificates and map the domain, ensuring the site is accessible under the desired URL, leveraging the CDN for performance.
5. Testing and Deployment: Test in a sandbox or development environment to ensure rendering and functionality, then deploy to production, following Adobe’s recommendations for prerelease features.

Key Citations

• Basic site template for AEM GitHub repository
• Site Templates Adobe Experience Manager documentation
• Quick site creation Site Template in AEM tech learnings
• AEM import static pages Stack Overflow discussion
• AEM Cloud Service operations and deployment features FiveOut blog

Thanks

Partyush

[Abhishek_Dubey]

Hello @BrianKasingli  @SantoshSai  @partyush 

Thank you for your responses, however my idea is to have functionality similar to landing page replicator as it was empowering business to develop and deliver small/static campaign or landing pages easily in lesser time from authoring/front-end directly.

But all the above process requires DevOps intervention most of time (one time setup is ok however for every build or upload it wont be feasible). Is there any other alternative solution?

[SantoshSai]

Hi @Abhishek_Dubey,

Well, Cloud does not allow arbitrary uploads of static HTML into publishable areas like /content directly (due to security, maintainability, and deployment constraints), but you can achieve your use case by leveraging Client Libraries (ClientLibs) and Sling Resource Types via editable templates.

Here are a few recommended options:

You can use a dedicated Template + Page Component

Best for: Campaigns, one-off microsites, lightweight landing pages

1. Create a new AEM template (e.g., microsite-template) with minimal editable structure — no header/footer.

2. Create a custom page component that:

   • Has a body.html rendering static HTML.

   • Embeds required CSS/JS as ClientLibs or static includes.

3. Put static assets (images, CSS, JS) under:
   /apps/<project>/clientlibs-site/microsites/<campaign-name>

4. Author the page under a custom path:
   /content/<project>/campaigns/<campaign-name>/index.html

5. Map the domain using Dispatcher/CDN rules if needed.

This approach is Cloud Service-safe, works with CI/CD, and gives authors flexibility to create variants if needed.

OR

You can use AEM SPA Editor or Embed External HTML

Best for: Complex interactivity (e.g., React/Vue) or externally-built microsites

1. Build your microsite using a static site generator or frontend framework.

2. Host the final build (index.html, CSS/JS) as a package under /apps or /etc.clientlibs.

3. Create a simple AEM page/component that includes:

   • An iframe that points to the hosted version.

   • Or embed the raw HTML using a servlet/sling resource rendering.

4. For assets like fonts/images, adjust Dispatcher/CDN to allow delivery from appropriate paths.

[BrianKasingli]

I wouldn't be doing too much customization on your AEM enterprise website, but if you really wanted to... Another simple way to embed custom HTML, CSS, JS (like a micro-site) would be like this.

1. Upload assets to DAM under /content/dam/microsites/myapp/:

• bundle.js

• styles.css

• any images or assets

After publishing, assets are publicly available at:

/content/dam/microsites/myapp/bundle.js
/content/dam/microsites/myapp/styles.css

2. Create a new AEM page using any editable template. Add a Rich Text component (Text or RTE) to the body. In source mode, paste the following:

<link rel="stylesheet" href="/content/dam/microsites/myapp/styles.css">
<div id="my-app-root"></div>
<script src="/content/dam/microsites/myapp/bundle.js"></script>​

Your bundle.js should contain the logic to mount a SPA into the #my-app-root container.

Example (React):

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('my-app-root');
const root = createRoot(container);
root.render(<App />);

Upload AEM Assets (make sure both external CSS and JS files exists), and ensure the rich-text editor renders the custom code. If successful, the page will render the SPA inside the RTE component.

Real Example: SourcedCode CURL Generator Tool
In this example, my website, I applied the same steps as above, but instead of hosting files on AEM, I hosted the files on Wordpress https://sourcedcode.com/blog/aem/tool-generate-curl-command-to-update-osgi-configurations#curltool 

As you can see in the screenshot, this is where step #2 comes in. An id="root" (in my case) for my bundle in line:1368 to be loaded. The CSS must be somewhere along the top of the page.

[kautuk_sahni]

@Abhishek_Dubey Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!