Frontend Workflows

The frontend repo (bt-web-v2) uses two GitHub Actions workflows for CI and formatting, plus Vercel for automatic deployment.

All workflow files live in .github/workflows/ in the frontend repo.

Node.js CI

File: .github/workflows/node.js.yml

Triggers:

• Push to main or dev
• Pull requests targeting main

Runs a clean install, build, and test on Node.js 20.x:

npm ci --if-present
npm run build --if-present
npm run build --if-present
npm test --if-present

The --if-present flags mean each step is skipped if the corresponding script doesn't exist in package.json. Currently the frontend defines build (next build) but not test, so the test step is a no-op.

This workflow catches build failures before merge — if next build fails (TypeScript errors, missing imports, etc.), the PR check fails.

autofix.ci (Prettier)

File: .github/workflows/prettier.yml

Triggers:

• All pull requests
• Push to main or dev

Runs Prettier on the entire codebase and auto-commits formatting changes:

npx prettier . --write

Uses the autofix-ci/action to push a commit with the message "Formatting with Prettier" if any files changed.

This means:

• On a PR branch, you may see an extra commit appear with formatting fixes after pushing
• You don't need to run Prettier manually before pushing, but it's faster to run it locally

Vercel deployment

The frontend is deployed on Vercel with automatic Git integration. There is no GitHub Actions workflow for Vercel — it's configured directly in the Vercel dashboard.

How deployments work

• Every push to any branch creates a preview deployment with a unique URL
• Merge to main triggers a production deployment to app.ubcbiztech.com
• Merge to dev triggers a deployment to dev.app.ubcbiztech.com

Vercel configuration

Environment variables

Set in the Vercel dashboard (Settings → Environment Variables), not in the repository:

The NEXT_PUBLIC_REACT_APP_STAGE variable controls which backend API URL the frontend talks to. When set to production, it uses api.ubcbiztech.com; otherwise it uses api-dev.ubcbiztech.com.

Preview deployments

Every pull request gets a preview URL like bt-web-v2-abc123.vercel.app. Use these to test your changes before merging. Preview deployments use dev environment variables.

Custom domains

Frontend vs backend CI comparison

What to expect after merging

PR merged to main

1. Vercel builds and deploys to production (~1-2 min)
2. Node.js CI runs build check
3. Prettier autofix runs (may push a formatting commit)
4. Site is live at app.ubcbiztech.com

PR merged to dev

1. Vercel deploys to dev.app.ubcbiztech.com
2. Node.js CI runs on the push
3. Prettier autofix runs

Debugging a failed build

1. Check the Vercel dashboard — Deployments tab shows build logs with the exact error
2. Check GitHub Actions — the Node.js CI workflow shows next build output
3. Common failures:
   • TypeScript errors — fix the type error locally and push
   • Missing dependencies — check package.json and run npm ci locally
   • Environment variable issues — check the Vercel dashboard settings

To test locally:

npm run build

If this succeeds locally, the CI build should also succeed.

Key files

Related pages

• CI/CD Overview — high-level pipeline summary
• Backend Workflows — Serverless deployment and ESLint
• Docs & Bot Sync — cross-repo docs index pipeline
• Frontend Architecture — code structure and patterns
• Styling & Configuration — Tailwind, Prettier config