Deploy Yaltopia FIFA to Cloudflare

This app uses OpenNext (@opennextjs/cloudflare) to run Next.js 15 on Cloudflare Workers (not legacy next-on-pages).

Prerequisites

Cloudflare account
Node.js 20+
Wrangler logged in: npx wrangler login

1. Install dependencies

npm install

2. Environment variables (build + runtime)

NEXT_PUBLIC_* values are embedded at build time. Before npm run deploy, ensure they are set:

Option A — local deploy (use your .env.local):

# .env.local must exist with:
# NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
# NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... or sb_publishable_...
npm run deploy

Option B — Cloudflare Dashboard (Git CI):

Workers & Pages → your project → Settings → Variables and secrets:

Name	Type	Notes
`NEXT_PUBLIC_SUPABASE_URL`	Plaintext	Build + production
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Plaintext	Build + production

Mark both as available at build time if the UI offers it.

3. Supabase Auth redirect URLs

In Supabase → Authentication → URL configuration, add your Cloudflare URLs:

https://yaltopia-fifa.<your-subdomain>.workers.dev/auth/callback
https://yaltopia-fifa.<your-subdomain>.workers.dev/reset-password
https://your-custom-domain.com/auth/callback
https://your-custom-domain.com/reset-password

Set Site URL to your production URL (e.g. https://yaltopia-fifa.your-account.workers.dev).

4. Deploy from CLI

npm run deploy

First run creates the Worker yaltopia-fifa and prints a *.workers.dev URL.

5. Preview locally (Workers runtime)

cp .dev.vars.example .dev.vars
npm run preview

Opens on http://localhost:8787 (approx.) — closer to production than next dev.

6. Custom domain

Cloudflare Dashboard → Workers & Pages → yaltopia-fifa
Settings → Domains & routes → Add custom domain
Update Supabase redirect URLs to use that domain

7. GitHub / GitLab CI (optional)

Connect the repo in Cloudflare:

Workers & Pages → Create → Workers → Connect to Git
Build command: npm run deploy or split:
- Build: npx opennextjs-cloudflare build
- Deploy: npx opennextjs-cloudflare deploy
Add the same NEXT_PUBLIC_* variables in project settings

Scripts

Script	Purpose
`npm run dev`	Next.js dev server (Node)
`npm run preview`	Build + local Workers preview
`npm run deploy`	Build + deploy to Cloudflare
`npm run upload`	Build + upload version only

Troubleshooting

Build fails on env: Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY before build.
Auth redirect error: Add exact callback URLs in Supabase (include /auth/callback).
Images: Team logos use next/image + Supabase storage; wrangler.jsonc enables the IMAGES binding.
League Master URLs: Still /login/master, /master, etc. — not linked on the public home page.

Project files

wrangler.jsonc — Worker name, compatibility, assets
open-next.config.ts — OpenNext Cloudflare adapter
public/_headers — static asset caching

3.4 KiB Raw Blame History