Configure Cloudflare Pages deployment

[meshackyaro]

Description

This issue aims to address the implementation of Configure Cloudflare Pages deployment.

The core objective is to: Write deployment config to push the frontend/ directory directly to Cloudflare edge.

By completing this feature, we will ensure that the TrustFlow protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🟡 Medium

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Configure Cloudflare Pages deployment
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Write deployment config to push the frontend/ directory directly to Cloudflare edge.
• Any PR that introduces TypeScript/Rust errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

4-8 hours

[stephanieoghenemega-eng]

Read through the repo structure. It already has vercel.json so Vercel is the current deploy target. Cloudflare Pages with Next.js needs the @cloudflare/next-on-pages adapter since CF's edge runtime doesn't support all the Node APIs Next.js relies on.

The setup I'd land:

wrangler.toml in the repo root:

name = "trustflow-frontend"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

pages_build_output_dir = ".vercel/output/static"

Build command: npx @cloudflare/next-on-pages — this wraps the Next.js build and adapts the output for CF's edge runtime.

GitHub Actions workflow (.github/workflows/deploy-cf-pages.yml):

name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npx @cloudflare/next-on-pages
      - uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: trustflow-frontend
          directory: .vercel/output/static

One thing worth flagging: the i18n config in next.config.js uses Next.js middleware-based locale routing which isn't supported on CF's edge runtime the same way. I'd switch to a static prefix approach (/en/..., /es/...) or use a CF Pages middleware function for locale detection — I'll include the approach in the PR description once assigned.

Happy to take this.

[grantfox-oss]

🦊 GrantFox — @stephanieoghenemega-eng has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #5)
2. Your PR will be reviewed by the trustflow-protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@stephanieoghenemega-eng's PR #57 was approved and merged by @meshackyaro.

🏆 @stephanieoghenemega-eng: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (366 total points). Track your full progress on GrantFox.

👏 Great work, @stephanieoghenemega-eng! Keep contributing to trustflow-protocol.