Deployment

Requirements

HTTPS

Your Mini App must be served over HTTPS at a public URL. Vercel, Netlify, Cloudflare Pages and most hosts do this by default.

Allow CrackPay to frame your app

CrackPay shows your app in a frame. Your server must allow it:

• Do not send X-Frame-Options (DENY or SAMEORIGIN both block CrackPay).
• If you send Content-Security-Policy with frame-ancestors, include CrackPay:

Content-Security-Policy: frame-ancestors 'self' https://www.crackpay.xyz https://crackpay.xyz https://crackpay.vercel.app

Listing frame-ancestors is also the right way to stop anyone else framing your app. Security middleware such as helmet adds X-Frame-Options by default; turn that off.

No login wall in front

CrackPay must reach your app directly. Vercel's Deployment Protection and similar features put a login page in front of previews and send X-Frame-Options: DENY. Deploy without protection for anything you load in CrackPay.

Build configuration

Vite

npm run build      # outputs dist/

Static output works on any host. Set environment variables in your host's dashboard; VITE_ variables are baked in at build time.

Next.js

Deploy as usual. If you add security headers, include the frame-ancestors rule above. See Setting up a Next.js app.

Check your deployment

curl -sI https://your-app.example | grep -i -E "x-frame-options|content-security-policy"

You want no x-frame-options line, and any frame-ancestors to include CrackPay. Then load the URL in CrackPay's Developer mode.

Performance

• Compress images; prefer SVG for icons.
• Split large dependencies with dynamic import().
• Run PageSpeed Insights on your URL. The result is part of your listing.

Troubleshooting

Problem	Fix
Blank frame in CrackPay	Remove X-Frame-Options; fix frame-ancestors
A login page appears in the frame	Turn off deployment protection
Works locally, not deployed	Check the build ran with your environment variables
"Connect wallet" inside CrackPay	The deployed build does not use the SDK. Redeploy.