Skip to content

Preview PRs using Harper Fabric ✨ #7

Preview PRs using Harper Fabric ✨

Preview PRs using Harper Fabric ✨ #7

Workflow file for this run

name: Deploy PR Preview
on:
pull_request:
types: [opened, synchronize, reopened, closed]
# Cancel previous runs when new commits are pushed to the PR
concurrency:
group: pr-preview-${{ github.event.pull_request.number }}
cancel-in-progress: true
jobs:
deploy-preview:
name: Deploy PR Preview
runs-on: ubuntu-latest
if: github.event.action != 'closed'
permissions:
pull-requests: write
deployments: write
contents: read
steps:
- name: Checkout PR code
uses: actions/checkout@v6
with:
ref: ${{ github.event.pull_request.head.sha }}
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '22'
cache: 'npm'
cache-dependency-path: 'package-lock.json'
- name: Install dependencies
run: |
echo "Installing dependencies..."
npm ci
- name: Build Docusaurus site
env:
DOCUSAURUS_BASE_URL: /pr-${{ github.event.pull_request.number }}
run: |
echo "Building site with base URL: $DOCUSAURUS_BASE_URL"
npm run build
- name: Upload build artifact for local testing
uses: actions/upload-artifact@v4
with:
name: pr-${{ github.event.pull_request.number }}-build
path: build/
retention-days: 30
- name: Prepare deployment directory
run: |
PR_DIR="pr-${{ github.event.pull_request.number }}"
echo "Creating directory: $PR_DIR"
mkdir -p "$PR_DIR"
# Create config.yaml
cat > "$PR_DIR/config.yaml" << 'EOF'
static:
files: 'build/**'
urlPath: 'pr-${{ github.event.pull_request.number }}'
extensions: ['html']
index: true
EOF
# Copy build directory
cp -r build "$PR_DIR/"
echo "Contents of $PR_DIR:"
ls -la "$PR_DIR"
- name: Install HarperDB CLI
run: |
npm install harperdb
- name: Deploy to HarperDB
env:
HARPER_PREVIEW_TARGET: ${{ secrets.HARPER_PREVIEW_TARGET }}
HARPER_PREVIEW_USERNAME: ${{ secrets.HARPER_PREVIEW_USERNAME }}
HARPER_PREVIEW_PASSWORD: ${{ secrets.HARPER_PREVIEW_PASSWORD }}
run: |
cd "pr-${{ github.event.pull_request.number }}"
# Add your additional arguments here
npx harper deploy \
target=${HARPER_PREVIEW_TARGET}:9925 \
username=$HARPER_PREVIEW_USERNAME \
password=$HARPER_PREVIEW_PASSWORD \
project=pr-${{ github.event.pull_request.number }} \
restart=true \
replicated=true
- name: Create deployment
env:
HARPER_PREVIEW_TARGET: ${{ secrets.HARPER_PREVIEW_TARGET }}
uses: actions/github-script@v8
with:
script: |
const prNumber = context.payload.pull_request.number;
const target = process.env.HARPER_PREVIEW_TARGET;
const deploymentUrl = `${target}/pr-${prNumber}`;
// Create deployment
const deployment = await github.rest.repos.createDeployment({
owner: context.repo.owner,
repo: context.repo.repo,
ref: context.payload.pull_request.head.sha,
environment: `pr-${prNumber}`,
description: `Preview deployment for PR #${prNumber}`,
auto_merge: false,
required_contexts: []
});
// Create deployment status
await github.rest.repos.createDeploymentStatus({
owner: context.repo.owner,
repo: context.repo.repo,
deployment_id: deployment.data.id,
state: 'success',
environment_url: deploymentUrl,
description: 'Preview deployment successful'
});
// Also add a comment to the PR
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: prNumber,
body: `## 🚀 Preview Deployment\n\nYour preview deployment is ready!\n\n🔗 **Preview URL:** ${deploymentUrl}\n\nThis preview will update automatically when you push new commits.`
});
cleanup-preview:
name: Cleanup PR Preview
runs-on: ubuntu-latest
if: github.event.action == 'closed'
permissions:
pull-requests: write
deployments: write
contents: read
steps:
- name: Checkout code
uses: actions/checkout@v6
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: '22'
cache: 'npm'
cache-dependency-path: 'package-lock.json'
- name: Install HarperDB CLI
run: |
npm install harperdb
- name: Remove preview deployment
env:
HARPER_PREVIEW_TARGET: ${{ secrets.HARPER_PREVIEW_TARGET }}
HARPER_PREVIEW_USERNAME: ${{ secrets.HARPER_PREVIEW_USERNAME }}
HARPER_PREVIEW_PASSWORD: ${{ secrets.HARPER_PREVIEW_PASSWORD }}
run: |
# Add your cleanup command here (e.g., harper undeploy or similar)
npx harper drop_component \
target=${HARPER_PREVIEW_TARGET}:9925 \
username=$HARPER_PREVIEW_USERNAME \
password=$HARPER_PREVIEW_PASSWORD \
project=pr-${{ github.event.pull_request.number }} \
replicated=true \
restart=true
echo "Cleaning up preview for PR #${{ github.event.pull_request.number }}"
- name: Update deployment status
uses: actions/github-script@v7
with:
script: |
const prNumber = context.payload.pull_request.number;
// Mark deployment as inactive
const deployments = await github.rest.repos.listDeployments({
owner: context.repo.owner,
repo: context.repo.repo,
environment: `pr-${prNumber}`
});
for (const deployment of deployments.data) {
await github.rest.repos.createDeploymentStatus({
owner: context.repo.owner,
repo: context.repo.repo,
deployment_id: deployment.id,
state: 'inactive',
description: 'Preview deployment removed'
});
}
// Add cleanup comment to PR
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: prNumber,
body: `## 🧹 Preview Cleanup\n\nThe preview deployment for this PR has been removed.`
});