AEM Cloud Service - Edge Delivery Brand Themes for Sites & Blocks

In Traditional AEM Sites, Themes can be managed in a separate GIT Repo (so Front End Developers are not bothered with AEM Maven) and deployed via Front End Pipeline (explained here). This post applies similar concept to EDS Repos. With a EDS Repoless Setup and Reusing Blocks across sites, Brand FE Developers can add Styling for Multiple Brands without working directly in the EDS repo (flow below assumes feature and main branches only for simplicity, however any AEM project generally has feature, develop, release, main and hotfix branches)

1) eaem-brand-styles: GIT Repo where Front End developers add scss styles for branding, a Front End Only Repo

2) eaem-dev-eds: EDS GIT Repo with Core Styles, Blocks, Client Side Integrations and necessary code to Create an EDS site 

EDS Repo | Brand Themes Repo

Git Flow: eaem-brand-styles → eaem-dev-eds

1) Local Development & Commit: Make changes to SCSS files in the eaem-brand-styles repository, commit them locally, and push to GitHub. The pre-push hook automatically runs npm run release to build the CSS files before pushing.

2) GitHub Actions Trigger: When code is pushed to the master or main branch, GitHub Actions Workflow (eaem-brand-styles.github/workflows/deploy-to-eds.yml) automatically triggers and runs the build process in a clean environment.

name: Deploy to eaem-dev-eds

on:

  push:

    branches:

      - master

      - main

jobs:

  deploy:

    runs-on: ubuntu-latest

   

    steps:

      - name: Checkout brand-styles repo

        uses: actions/checkout@v4

        with:

          path: brand-styles

     

      - name: Setup Node.js

        uses: actions/setup-node@v4

        with:

          node-version: '18'

          cache: 'npm'

          cache-dependency-path: brand-styles/package-lock.json

     

      - name: Install dependencies

        working-directory: brand-styles

        run: npm ci

     

      - name: Build release

        working-directory: brand-styles

        run: npm run release

     

      - name: Checkout eaem-dev-eds repo

        uses: actions/checkout@v4

        with:

          repository: schoudry/eaem-dev-eds

          token: ${{ secrets.DEPLOY_TOKEN }}

          path: eaem-dev-eds

     

      - name: Copy release to styles folder

        run: |

          # Copy new release files (overwrite if exists)

          cp -r brand-styles/release/* eaem-dev-eds/styles/

         

          # List copied files for verification

          echo "Deployed files:"

          ls -R eaem-dev-eds/styles/

     

      - name: Commit and push to eaem-dev-eds

        working-directory: eaem-dev-eds

        run: |

          git config user.name "GitHub Actions Bot"

          git config user.email "actions@github.com"

          git add styles/

         

          # Only commit if there are changes

          if git diff --staged --quiet; then

            echo "No changes to commit"

          else

            git commit -m "Update brand styles from eaem-brand-styles"

            git push

          fi

3) Build & Clone: The workflow installs dependencies, runs npm run release to generate the CSS files in the release/ folder, then clones the eaem-dev-eds repository using the DEPLOY_TOKEN secret for authentication.

4) Copy & Deploy: The workflow copies all files from eaem-brand-styles/release/* to eaem-dev-eds/styles/, commits the changes and automatically pushes to the eaem-dev-eds repository, making the styles immediately available.