finops-toolkit icon indicating copy to clipboard operation
finops-toolkit copied to clipboard

Add GitHub Pages workflow for UX deployment

Open akiskips opened this issue 9 months ago • 1 comments

🛠️ Description

Added a new GitHub Actions workflow to automatically deploy the UX application to GitHub Pages. This workflow builds and deploys the web application whenever changes are pushed to the pages-action-ux branch or when manually triggered.

Changes

  • Created new workflow file ux-pages.yml for GitHub Pages deployment
  • Set up proper permissions for GitHub Pages deployment
  • Configured workflow to:
    • Install dependencies
    • Build the application
    • Deploy to GitHub Pages environment
  • Added concurrency settings to prevent concurrent deployments
  • updated the vite.config.yml to set the base to /finops-toolkit/ branch
  • updated the router basename configuration for GitHub Pages support
  • Fixed an issue where the background image in the Showcase component wasn't loading properly in the production build. The problem was caused by an incorrect relative path reference to the image asset.

Implementation Details

  • Uses Node.js 20 for the build process
  • Builds from the web directory
  • Uploads the built artifacts from dist
  • Includes debugging step to list build output before deployment

Usage

Prequisite to run the workflow:

  • Workflow yml file (under .github) needs to be merged to the main branch
  • Github actions need to be activated and source set to "Github Actions". Go to settings->Pages
  • Features/ux branch needs to be allowed to deploy at pages. Set from Settings->Environments-> Deployment branches and tags.

The workflow can be triggered by:

  • Pushing to the features/ux branch
  • Manually from the Actions tab in GitHub

The deployed site will be available at the URL provided in the workflow run output.

📷 Screenshots

image

image

📋 Checklist

🔬 How did you test this change?

  • [ ] 🤏 Lint tests
  • [ ] 🤞 PS -WhatIf / az validate
  • [x] 👍 Manually deployed + verified
  • [ ] 💪 Unit tests
  • [ ] 🙌 Integration tests
  • [ ] 🚨 This is a breaking change.
  • [ ] 🤏 The change is less than 20 lines of code.

📑 Did you update docs/changelog.md?

  • [ ] ✅ Updated changelog (required for dev PRs)
  • [x] ➡️ Will add log in a future PR (feature branch PRs only)
  • [ ] ❎ Log not needed (small/internal change)

📖 Did you update documentation?

  • [ ] ✅ Public docs in docs (required for dev)
  • [ ] ✅ Internal dev docs in src (required for dev)
  • [x] ➡️ Will add docs in a future PR (feature branch PRs only)
  • [ ] ❎ Docs not needed (small/internal change)

akiskips avatar Mar 15 '25 16:03 akiskips

@Ivanmtta can you please review?

flanakin avatar Mar 28 '25 09:03 flanakin