Skip to content

cloudflare-pages.md

Latest commit

 

History

History
93 lines (67 loc) · 4.06 KB

cloudflare-pages.md

File metadata and controls

93 lines (67 loc) · 4.06 KB
Raw

Deploy on Cloudflare Pages

Free (commercial use included), fast, and the custom-domain step is the simplest of any host. Our suggested default. ~10 minutes.

New here? Skim README.md first for the values you'll need (fee wallet, factory address, chain). Then come back.

1. Get your own copy of the site

You need the project in your GitHub account first.

  • Easiest: follow Use this template — one click makes your copy.
  • Or use the Deploy button, which creates the copy and connects Cloudflare in one flow (then skip to step 4).

When you're done you'll have a repo like your-name/my-spectrum-site on GitHub.

2. Create the Pages project

  1. Sign in at dash.cloudflare.com (free account is fine).
  2. In the sidebar: Workers & Pages → Create → Pages tab → Connect to Git.
  3. Authorize Cloudflare to see your GitHub, then pick your repo (my-spectrum-site).
  4. Begin setup.

3. Build settings

Cloudflare auto-detects Vite, but confirm these exactly:

Field Value
Framework preset Vite
Build command npm run build
Build output directory dist
Root directory leave blank (unless the app lives in a subfolder — see note)

If the app code sits in a subfolder of the repo (e.g. app/), set Root directory to that folder. A site generated by Spectrum Mini puts the app at the repo root, so leave it blank.

If your build complains about the Node version, add an env var NODE_VERSION = 20 in the next step.

4. Set the environment variable

Before the first deploy, expand Environment variables (Production) and add the one value that doesn't travel in the repo (your tier, site URL and fee wallet are committed in app/src/site.config.json by the setup studio/wizard):

VITE_ALCHEMY_API_KEY = xxxx   # required — your RPC key, restricted to your domain (it ships publicly)

Then Save and Deploy. The first build takes a minute or two; you'll get a *.pages.dev URL.

Added or changed a variable later? Edit it under Settings → Variables and Secrets, then Deployments → … → Retry deployment (or push any change) to rebuild — values are baked at build time.

5. Add your custom domain

  1. Open your Pages project → Custom domains → Set up a domain.
  2. Type your domain (e.g. mybaskets.xyz) → Continue.
  3. If your domain's DNS is already on Cloudflare: it's wired automatically — confirm and you're done. If it's elsewhere (e.g. registered at Namecheap/GoDaddy): Cloudflare shows one CNAME record — add it at your registrar's DNS page exactly as shown.
  4. HTTPS is issued automatically, usually within a few minutes.
  5. Make the site know its own domain — the step people skip: set the site URL to the custom domain (setup studio, or src/site.config.json → siteUrl), commit, and let it redeploy. Until you do, social cards and the sitemap keep advertising the *.pages.dev subdomain instead of your domain.

Now go lock your RPC key to this domain if you added one (see README → RPC keys).

Troubleshooting (Cloudflare-specific)

  • Deep links 404 (e.g. refreshing /explore fails). Cloudflare Pages needs a SPA fallback — the kit ships one at app/public/_redirects (the SPA catch-all plus the nested-route asset remaps; don't replace it with a bare catch-all or refreshing /creator/…, /docs/… and /bundle/… pages goes blank). If deep links 404, check that file reached your repo and the deployed dist/, then redeploy. (See Deep links work out of the box.)
  • Build can't find npm/wrong Node. Add env var NODE_VERSION = 20 and retry.
  • Wrong output folder. Must be dist for Vite. A blank page often means the output dir is set to the repo root instead of dist.

← Back to README.md · Other hosts: Netlify · Vercel