Unlocking Efficiency with Helix 5: A Scalable Approach to Multi-Site Development

Imagine needing to launch four websites rapidly - while maintaining quality, consistency, and performance. One of our customers faced this exact challenge. They implemented AEM Edge Delivery Services (Helix 5), which enabled them to develop all four sites using a single codebase. This resulted in faster, more efficient deployment with reduced complications.

Why AEM Edge Delivery Services (Helix 5)?

Before Helix 5, teams managed multiple repositories, spreadsheets, and configuration files, creating complexity and inefficiency. The new approach provides a streamlined workflow for multiple websites under one flexible system.

One client needed to launch four websites with unique branding but shared core functionality. Using Helix 5, they utilized a single component library instead of building each site from scratch. This provided faster development, theme-based customization, cross-site consistency, and simpler maintenance. While traditional methods would have required months, the shared codebase approach launched all four websites much faster with fewer complications.

Key Differences from Helix 4

Previously, managing configuration elements for multiple websites meant dealing with scattered spreadsheets and YAML files, leading to complexity and inconsistency.

What Has Changed?

With Helix 5, everything is handled through the Admin API, streamlining updates and ensuring consistency across all sites.

Building Components: Keep It Simple

Developing components in Helix 5 is all about reusability and flexibility. Instead of building custom components for every project, you can create a single set of modular pieces that work across different sites.

Best Practices for Component Development

Use CSS variables for all customizable properties to ensure flexibility.
Avoid hardcoded values to maintain scalability and prevent future design limitations.
Organize components consistently with standard Edge Delivery Services structures—no need for overengineering.

Templates: Standardizing Layouts Without Extra Work

Templates help maintain a consistent look and feel across multiple pages.

Example: Article Page Templates

Instead of reinventing the wheel for each new site, Helix 5 lets teams create template-specific CSS and JS files that can be easily reused:

templates
|-- articles
|   |-- articles.css
|   |-- articles.js

When multiple templates are needed, we simply add more folders within the templates directory. Each template folder includes its own CSS and JS file to define its design and behaviour. This approach ensures that all article pages have a uniform design, reducing design inconsistencies.

Applying a Template

Templates are assigned using metadata by simply specifying the template name in the Metadata table, meaning no extra coding is required.

Configuration Made Easy

With Helix 5, configurations are managed via the Admin API, eliminating the need for manual file updates.

Sample API Request:

GET https://admin.hlx.page/config/{org)/sites/{website).json

API Response Example:

{
  "code": {
    "owner": "{org}",
    "repo": "{repo}",
    "source": {
      "type": "github",
      "url": "https://github.com/{org}/{repo}"
    }  
  },
  "content": {
    "source": {
      "url": "https://{path-to-sharepoint}",
      "type": "onedrive"
    },
    "contentBusId": “{content-bus-id}”
  }
}

Theming: Customization Without Chaos

Each website can have its own unique branding while still sharing a common structure.

Theme Structure

To manage multiple site themes, we use a structured approach:

styles
|-- base-styles.css
|-- themes
|   |-- site1-styles.css
|   |-- site2-styles.css

The base styles define the general design, while theme-specific styles are stored in separate CSS files.

Applying a Theme

Each website's theme is assigned in the Metadata table, like this:

A function in scripts.js dynamically loads the corresponding CSS file based on the metadata:

async function loadSiteCss() {
  try {
    const theme = toClassName(getMetadata(‘theme’));

  switch (theme) {
    case ‘site1’:
      loadCSS(`${window.hlx.codeBasePath}/styles/themes/site1-styles.css`);
      break;
    case ‘site2’:
      loadCSS(`${window.hlx.codeBasePath}/styles/themes/site2-styles.css`);
      break;
    default:
      loadCSS(`${window.hlx.codeBasePath}/styles/base-styles.css`);
      break;
    }
  } catch (error) {
    console.log(‘Theme loading failed’, error);
  }
}

Example of Themed Variables

Each theme defines the same CSS variable names but with different values:

Site 1 Theme Variables

:root {
  —-background-color: white;
  —-text-color: #003049;
  —-button-color: purple;
  —-button-text-color: #fff;
}

Site 2 Theme Variables

:root {
  —-background-color: #f4f4f4;
  —-text-color: #262626;
  —-button-color: blue;
  —-button-text-color: yellow;
}

By referencing these variables, components adapt automatically to the active theme:

footer {
  background-color: var(--background-color);
  color: var(--text-color);
}

This approach ensures components remain reusable and adaptable across different sites without requiring individual modifications. Because all components reference these variables, switching themes is effortless!

Final Thoughts

Helix 5 is more than just an upgrade—it’s a smarter way to build, scale, and maintain multiple websites efficiently.

What Makes It Stand Out?

Saves time by reusing components.
Improves code organization with a structured approach.
Reduces effort by simplifying site management.
Minimizes redundant code while allowing site-specific customization.

It represents a major leap forward for edge Delivery Services, enabling the use of a single codebase across multiple websites. By centralizing development into a shared component library, Helix 5 eliminates redundancy while supporting multiple themes and configurations. This structured approach significantly enhances efficiency, scalability, and maintainability in modern web development.

For teams looking to simplify their workflow without compromising on quality, Helix 5 is the way forward.