ci: add Vercel staging and Azure SWA frontend deployments

[PohTeyToe]

Summary

• Vercel production deploy (vercel-staging.yml): deploys frontend to logistics-dashboard.vercel.app on push to main
• Azure SWA mirror deploy (azure-frontend.yml): deploys same build to lemon-island-044a86a0f.1.azurestaticapps.net on push to main
• CORS: added both frontend origins to API Program.cs
• SPA routing: staticwebapp.config.json in public/ for Azure SWA navigation fallback
• Docs: updated README (live demo table, architecture diagram, CI/CD table), CI_CD.md, and CLAUDE.md

Both workflows trigger on push to main (path-filtered to src/logistics-dashboard/**). Same commit, same VITE_API_URL. Portfolio story: multi-cloud deployment with Vercel for edge performance and Azure SWA to keep the full stack on one platform.

Test plan

• API tests pass (68/68)
• Frontend builds cleanly
• staticwebapp.config.json present in dist/ after build
• CI passes on this PR
• After merge: verify Vercel prod URL loads
• After merge: trigger azure-frontend.yml manually, verify SWA URL loads
• Verify no CORS errors on either frontend

🤖 Generated with Claude Code

[github-actions]

Preview Deploy

Status: ✅ Deployed successfully
Preview: https://logistics-dashboard-c594mgenf-abdallah-safis-projects-bae5f9c3.vercel.app
Commit: 7528feb ci: add Vercel staging and Azure SWA frontend deployments
Updated: Mar 14, 3:48 PM UTC

Deployment History

Commit	Preview	Updated (UTC)
7528feb ci: add Vercel staging and Azure SWA frontend deployments	Open	Mar 14, 3:48 PM

Build Logs (last 50 lines)

``` dist/assets/trash-2-Bf7vz7Dh.js 0.33 kB │ gzip: 0.22 kB dist/assets/file-text-DPh1f6pB.js 0.39 kB │ gzip: 0.25 kB dist/assets/suppliers-CNeFhpq7.js 0.46 kB │ gzip: 0.23 kB dist/assets/FormField-BHooQ9WX.js 0.46 kB │ gzip: 0.28 kB dist/assets/shared.module-DJ8GOhp9.js 0.51 kB │ gzip: 0.26 kB dist/assets/exportCsv-EClv_j6F.js 0.74 kB │ gzip: 0.50 kB dist/assets/Modal-CnGehNe-.js 0.87 kB │ gzip: 0.47 kB dist/assets/DetailDrawer-DZH8pxjY.js 1.08 kB │ gzip: 0.57 kB dist/assets/usePagination-BgPtJqFW.js 1.26 kB │ gzip: 0.69 kB dist/assets/Pagination-OzHusQev.js 1.28 kB │ gzip: 0.71 kB dist/assets/CrudPage.module-C_P5S3OP.js 1.63 kB │ gzip: 0.69 kB dist/assets/useBulkSelect-CyDPKc0e.js 2.92 kB │ gzip: 1.30 kB dist/assets/CsvImport-DFerw8i2.js 3.72 kB │ gzip: 1.42 kB dist/assets/AuditLog-CDJGBuwv.js 5.40 kB │ gzip: 2.08 kB dist/assets/Categories-DPGNyEQz.js 5.61 kB │ gzip: 2.11 kB dist/assets/Warehouses-CaMnDgIH.js 6.50 kB │ gzip: 2.38 kB dist/assets/StockMovements-CIyCgyqJ.js 6.92 kB │ gzip: 2.62 kB dist/assets/Reports-BJ6UjHq2.js 6.98 kB │ gzip: 2.13 kB dist/assets/Suppliers-1qNhT7oo.js 9.63 kB │ gzip: 3.03 kB dist/assets/Settings-rtyc5tHR.js 10.94 kB │ gzip: 3.39 kB dist/assets/Analytics-D6DACj-3.js 11.06 kB │ gzip: 3.86 kB dist/assets/PurchaseOrders-GozP664u.js 13.69 kB │ gzip: 4.52 kB dist/assets/Inventory-DdLcHhcL.js 15.61 kB │ gzip: 4.47 kB dist/assets/purify.es-CovBOfck.js 22.58 kB │ gzip: 8.67 kB dist/assets/vendor-react-B9CkSc1y.js 48.73 kB │ gzip: 17.17 kB dist/assets/index.es-HSs3H-V0.js 158.75 kB │ gzip: 53.02 kB dist/assets/html2canvas.esm-DXEQVQnt.js 201.04 kB │ gzip: 47.43 kB dist/assets/vendor-recharts-C9M_SBP_.js 411.05 kB │ gzip: 120.07 kB dist/assets/exportPdf-E9M5hEaz.js 418.65 kB │ gzip: 136.38 kB dist/assets/index-KRt5HN_1.js 470.88 kB │ gzip: 145.47 kB ✓ built in 7.22s Build Completed in .vercel/output [24s] Retrieving project… Deploying abdallah-safis-projects-bae5f9c3/logistics-dashboard Uploading [--------------------] (0.0B/1.3KB) Uploading [================----] (1.0KB/1.3KB) Uploading [====================] (1.3KB/1.3KB) Inspect: https://vercel.com/abdallah-safis-projects-bae5f9c3/logistics-dashboard/Hup64RKuynddKHUFLaDHQ43TwGES [1s] Preview: https://logistics-dashboard-c594mgenf-abdallah-safis-projects-bae5f9c3.vercel.app [1s] https://logistics-dashboard-c594mgenf-abdallah-safis-projects-bae5f9c3.vercel.appBuilding... Building... Building: Running build in Portland, USA (West) – pdx1 Building: Build machine configuration: 2 cores, 8 GB Building: Retrieving list of deployment files... Building: Previous build caches not available. Building: Downloading 50 deployment files... Preview: https://logistics-dashboard-c594mgenf-abdallah-safis-projects-bae5f9c3.vercel.app [5s] Completing... To deploy to production (logistics-dashboard-pi.vercel.app), run `vercel --prod`

</details>
📦 [Full build logs](https://github.com/PohTeyToe/LogisticsInventorySystem/actions/runs/23091144820) · [Download artifact](https://github.com/PohTeyToe/LogisticsInventorySystem/actions/runs/23091144820#artifacts)
Deployed via Vercel CLI — preview environment only (production is on Azure).
<!-- DEPLOY_HISTORY
7528feb|https://logistics-dashboard-c594mgenf-abdallah-safis-projects-bae5f9c3.vercel.app|2026-03-14T15:48:45.847Z|ci: add Vercel staging and Azure SWA frontend deployments
-->

[PohTeyToe]

@claude please re-review this PR

[claude]

Claude finished @PohTeyToe's task in 1m 13s —— View job

---

Re-review of PR #28

• Gather context and read changed files
• Review workflow files
• Review CORS and config changes
• Review documentation updates
• Post review feedback

---

CI Status: ✅ All checks passing (build, lint, tests, CodeQL, commit lint, preview deploy)

Overall

Clean PR — two new deployment workflows, CORS updates, SPA routing config, and comprehensive docs. The dual-deploy strategy (Vercel + Azure SWA) is well-structured. A few minor items below, but nothing blocking.

Workflow Files

vercel-staging.yml — Looks good. Concurrency group, path filtering, and --prod flags are all correct. One minor observation:

• Missing permissions block (line 1–12): Unlike azure-frontend.yml which explicitly declares permissions: { id-token: write, contents: read }, the Vercel workflow has no permissions block. It works because the defaults are sufficient, but for consistency and least-privilege it's good practice to add permissions: { contents: read }. Non-blocking.

• No npm caching: The Vercel workflow doesn't use cache: npm in actions/setup-node like the Azure workflow does (line 28–29 of azure-frontend.yml). This is fine since vercel build handles its own dependency installation, but worth noting the asymmetry is intentional (Vercel CLI manages the build entirely).

azure-frontend.yml — Clean and correct. The skip_app_build: true + self-managed npm run build is the right approach for build parity with Vercel. workflow_dispatch is a nice touch for manual re-deploys.

CORS (Program.cs lines 145–146)

✅ Both new origins added correctly:

• https://logistics-dashboard.vercel.app
• https://lemon-island-044a86a0f.1.azurestaticapps.net

Note: Vercel also serves preview deployments on subdomain URLs like https://logistics-dashboard-*.vercel.app. The current CORS config only allows the exact production domain. Preview deploys hitting the API will get CORS errors. This is likely fine since preview is for UI testing, but if you ever need API access from previews, you'd need a wildcard or dynamic CORS policy. Non-blocking — just documenting the trade-off.

SPA Routing (staticwebapp.config.json)

✅ Correct configuration. The navigationFallback with proper exclusions for static assets, plus the 404 → 200 rewrite, is exactly what Azure SWA needs for client-side routing. Vite copies public/ into dist/ automatically, so this will be present in the build output.

Documentation

✅ All three docs (CI_CD.md, CLAUDE.md, README.md) updated consistently:

• New workflows listed in CI/CD tables
• New secrets documented
• Architecture diagram updated with Azure SWA and Vercel prod nodes
• Pipeline count updated from 6 → 8

Verdict

LGTM ✅ — Ready to merge. The workflows are clean, CORS is correctly configured, SPA routing is handled, and docs are thorough. The minor items above (permissions block, preview CORS) are non-blocking polish.

---