Take the community feedback survey now.

Szymon Uryga
Jul 2, 2025
  2
(0 votes)

How to Set Up CI/CD Pipeline for Optimizely Frontend Hosting Using GitHub Actions

As I promised in my previous blog post about getting started with Optimizely Frontend Hosting, today I’m delivering on that promise by sharing how to automate your deployment process with GitHub Actions. In this step-by-step tutorial, I’ll show you how to set up a CI/CD pipeline that automatically deploys your frontend app every time you push to the main branch.

Prerequisites

Before you start, make sure you have:

  • A working Optimizely Frontend Hosting setup (with environments like Test1, Test2, Production1)

    • Remember to add all necessary env variable before you do deployemnt
  • Your Optimizely Project ID, Client Key, and Client Secret

  • A PowerShell deployment script (see below)

  • A GitHub repo with your project code

 

Step 1: Add Secrets to GitHub

Go to your GitHub repository → SettingsSecrets and variablesActions → click New repository secret:

Name Value
OPTI_PROJECT_ID Your Optimizely Project ID
OPTI_CLIENT_KEY Your Optimizely Client Key
OPTI_CLIENT_SECRET Your Optimizely Client Secret

 

Step 2: Prepare the PowerShell Deployment Script

Create a script called deploy.ps1 in your repo (e.g., under a scripts/ folder).

# scripts/deploy.ps1

# Validate required environment variables
if (-not $env:OPTI_PROJECT_ID -or -not $env:OPTI_CLIENT_KEY -or -not $env:OPTI_CLIENT_SECRET) {
    Write-Host "Missing required environment variables." -ForegroundColor Red
    exit 1
}

# Install and import EpiCloud module
Install-Module -Name EpiCloud -Scope CurrentUser -Force -ErrorAction SilentlyContinue
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
Import-Module EpiCloud

# Deployment settings
$projectId = $env:OPTI_PROJECT_ID
$clientKey = $env:OPTI_CLIENT_KEY
$clientSecret = $env:OPTI_CLIENT_SECRET
$targetEnvironment = "Test1"

# Paths
$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
$zipName = "optimizely-one-github.head.app.$timestamp.zip"
$zipPath = ".\$zipName"

# Create ZIP from current directory excluding ignored files
# (GitHub Actions runners will not include `.git`, so you're safe)
Compress-Archive -Path * -DestinationPath $zipPath

if (-not (Test-Path $zipPath)) {
    Write-Host "Failed to create ZIP file." -ForegroundColor Red
    exit 1
}

# Deploy using EpiCloud
Connect-EpiCloud -ProjectId $projectId -ClientKey $clientKey -ClientSecret $clientSecret
$sasUrl = Get-EpiDeploymentPackageLocation
Add-EpiDeploymentPackage -SasUrl $sasUrl -Path $zipPath

Start-EpiDeployment `
    -DeploymentPackage $zipName `
    -TargetEnvironment $targetEnvironment `
    -Wait

This script will:

  • Zip everything in the repo

  • Authenticate to Optimizely

  • Upload and deploy the package to the selected environment

 

Step 3: Create GitHub Action Workflow

Create a file at .github/workflows/deploy.yml in your repository:

name: Deploy to Optimizely

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: windows-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup PowerShell
        shell: pwsh
        run: |
          Write-Host "PowerShell ready"

      - name: Run deployment script
        shell: pwsh
        run: ./scripts/deploy.ps1
        env:
          OPTI_PROJECT_ID: ${{ secrets.OPTI_PROJECT_ID }}
          OPTI_CLIENT_KEY: ${{ secrets.OPTI_CLIENT_KEY }}
          OPTI_CLIENT_SECRET: ${{ secrets.OPTI_CLIENT_SECRET }}

Step 4: Test It

  1. Commit your deploy.ps1 and workflow to the repository.

  2. Push to main.

  3. Go to GitHub → Actions and check if the deployment workflow ran successfully.

  4. Check the Optimizely DXP Portal to confirm the deployment on the Test1 environment.

 

Result

Here are two screenshots showing the final result:

GitHub Actions

The workflow completed successfully with detailed logs from the PowerShell deployment.

Optimizely PaaS Portal

You can see the package optimizely-one-github.head.app.20250702-102756.zip was successfully deployed to the Test1 environment.

Conclusion

With just a few steps, you’ve automated your frontend deployments to Optimizely using GitHub Actions. This approach ensures that your latest changes in main are always deployed to your specifed environment, improving developer velocity and reducing manual errors.

Jul 02, 2025

Comments

Please login to comment.
Latest blogs
A day in the life of an Optimizely OMVP - Opticon London 2025

This installment of a day in the life of an Optimizely OMVP gives an in-depth coverage of my trip down to London to attend Opticon London 2025 held...

Graham Carr | Oct 2, 2025

Optimizely Web Experimentation Using Real-Time Segments: A Step-by-Step Guide

  Introduction Personalization has become de facto standard for any digital channel to improve the user's engagement KPI’s.  Personalization uses...

Ratish | Oct 1, 2025 |

Trigger DXP Warmup Locally to Catch Bugs & Performance Issues Early

Here’s our documentation on warmup in DXP : 🔗 https://docs.developers.optimizely.com/digital-experience-platform/docs/warming-up-sites What I didn...

dada | Sep 29, 2025

Creating Opal Tools for Stott Robots Handler

This summer, the Netcel Development team and I took part in Optimizely’s Opal Hackathon. The challenge from Optimizely was to extend Opal’s abiliti...

Mark Stott | Sep 28, 2025

Integrating Commerce Search v3 (Vertex AI) with Optimizely Configured Commerce

Introduction This blog provides a technical guide for integrating Commerce Search v3, which leverages Google Cloud's Vertex AI Search, into an...

Vaibhav | Sep 27, 2025

A day in the life of an Optimizely MVP - Opti Graph Extensions add-on v1.0.0 released

I am pleased to announce that the official v1.0.0 of the Opti Graph Extensions add-on has now been released and is generally available. Refer to my...

Graham Carr | Sep 25, 2025