spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

ci: migrate preview-docs and visual tests from netlify to azure

Open Rajdeepc opened this issue 7 months ago • 3 comments

Description

This PR migrates all preview deployments (documentation site, Storybook, and Visual Regression Tests) from Netlify to Azure Blob Storage for cost efficiency, and unified deployment strategy. . (JK, THE MAIN GOAL IS TO AVOID THE $20 BILL THAT JOSH IS PAYING OUT OF HIS OWN POCKET) . A quick overview of all the stuff I did in this PR

Key Changes:

GitHub Workflows:

  • Updated preview-docs.yml to deploy documentation and Storybook to Azure Blob Storage using AzCopy
  • Modified urls-smoke-test.yml to generate Azure Blob Storage URLs and handle all PR commenting
  • Removed duplicate commenting logic from preview workflows

CircleCI Configuration:

  • Migrated all VRT deployments from Azure Static Web Apps to Azure Blob Storage
  • Updated matrix VRT jobs and HCM VRT to deploy directly using AzCopy

URL Structure:

  • Standardized URL pattern: https://swcpreviews.z13.web.core.windows.net/pr-{number}/{path}/
  • Documentation: /pr-{number}/docs/
  • Storybook: /pr-{number}/docs/storybook/
  • VRT Results: /pr-{number}/{system}-{color}-{scale}-{dir}/review/
  • HCM VRT: /pr-{number}/hcm/review/

Path Prefix Support:

  • Enhanced documentation build system to support subdirectory deployments
  • Fixed CSS, JavaScript, and font loading for non-root deployments
  • Updated SWC_DIR environment variable handling in rollup configuration

Motivation and context

Operational Benefits:

  • Netlify deployments were unreliable as netlify kept denylisting us for whatever reasons randomly.
  • THE $20 BILL

Related issue(s)

  • SWC-900

Author's checklist

  • [x] I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • [x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • [x] I have added automated tests to cover my changes.
  • [ ] I have included a well-written changeset if my change needs to be published.
  • [x] I have included updated documentation if my change required it.

Reviewer's checklist

  • [x] Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • [ ] Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • [ ] Automated tests cover all use cases and follow best practices for writing
  • [ ] Validated on all supported browsers
  • [ ] All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • [ ] Everything should work as it used to
    1. Go through all the links commented by the github actions bot and verify that all of them work as they did before.
    2. Verify the url structure for all the links as mentioned above.

Device review

  • [ ] Did it pass in Desktop?
  • [ ] Did it pass in (emulated) Mobile?
  • [ ] Did it pass in (emulated) iPad?

Rajdeepc avatar May 07 '25 11:05 Rajdeepc

⚠️ No Changeset found

Latest commit: a6b7ed9cd8f4826f3f01b1d63c4e09e0fdebb19f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar May 07 '25 11:05 changeset-bot[bot]

Tachometer results

Currently, no packages are changed by this PR...

github-actions[bot] avatar May 07 '25 11:05 github-actions[bot]

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5450

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file. If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions[bot] avatar Jun 17 '25 07:06 github-actions[bot]

Superb work @TarunAdobe ! This needs a celebration.

Rajdeepc avatar Jun 24 '25 11:06 Rajdeepc

@TarunAdobe would you mind taking checking on the beta URL? I tried hitting the URL in your original PR description (and then also tried putting the pr number in there and moving it around to different parts of the URL structure) and either I have the wrong URL or it didn't correctly deploy.

@pfulton Beta docs deploy only happens on main branch. so that link won't be accessible until this pr gets merged.

TarunAdobe avatar Jun 25 '25 02:06 TarunAdobe