Eva•4mo ago

Setting up a custom domain

I'm having trouble following the docs to understand the process of setting up a custom domain for my Convex site. I'm using Cloudflare Pages, and the build and deploy part are working, but the app displays a white page with a console error reading:

Uncaught Error: ConvexReactClient requires a URL like 'https://happy-otter-123.convex.cloud'.

Uncaught Error: ConvexReactClient requires a URL like 'https://happy-otter-123.convex.cloud'.

- In my .env.local, VITE_CONVEX_URL is set to a URL ending in .convex.cloud. Do I update this to my production URL? Do I also need to add it to .env? - Are there settings in the Convex dashboard I need to modify? - In the Convex dashboard, for Development deploys, in Settings > Environment Variables, I have a SITE_URL set to http://localhost:5173. In Production deploys there is no SITE_URL defined. Do I need to add SITE_URL to Production Environment Variables with my production URL? - How do I handle preview deploys for Convex with Cloudflare Pages? I've read through the Custom Domains & Hosting docs page but I'm still unclear on the steps. Thanks for any help :)

Custom Domains & Hosting | Convex Developer Hub

Serve requests from any domains and host your frontend on any static hosting provider, such as GitHub.

16 Replies

EvaOP•4mo ago

I got it halfway working. - Added VITE_CONVEX_URL_=https://app.mysite.com to .env.local - In the dashboard, added a Production Environment Variable for SITE_URL: https://app.mysite.com - No value in .env (doesn't seem required?) - Triggered a new deploy The app is now rendering properly but all queries or mutations are failing with:

Error: [CONVEX Q(myTable:myQuery)] [Request ID: 7fb57772747bf0d6] Server Error
  Called by client

Error: [CONVEX Q(myTable:myQuery)] [Request ID: 7fb57772747bf0d6] Server Error
  Called by client

Worth noting I also set up a custom domain for the Convex API to point to convex.mysite.com but I haven't seen that appear in the Network tab of the dev tools yet. Maybe something else to configure?

sshader•4mo ago

Are you using a custom domain for .convex.site or .convex.cloud, or both?

EvaOP•4mo ago

I've setup convex.mysite.com to point to the Convex API (.convex.cloud) and api.mysite.com to point to HTTP Actions (.convex.site)

sshader•4mo ago

Gotcha -- to just get production deploys working, I'd set VITE_CONVEX_URL=convex.mysite.com manually in your hosting provider. I'd also for good measure change the npx convex deploy build command to --cmd-url-env-var-name SOMETHING_ELSE (just any env var name that's not used by your app) so it doesn't overwrite it. This should get your app connecting to convex.mysite.com in the network tab. SITE_URL only matters for Convex Auth with OAuth redirects and should match whatever URL your frontend is hosted at. Curious what the errors your getting are (https://docs.convex.dev/functions/debugging#finding-relevant-logs-by-request-id)

Debugging | Convex Developer Hub

Debugging is the process of figuring out why your code isn't behaving as you

EvaOP•4mo ago

Thank you! I’m afk now but I’ll try this once I’m back and let you know❣️ appreciate the support Are there any other steps to take for preview deploys?

sshader•4mo ago

I'm unfamiliar with Cloudflare pages, but is there a way to set different environment variables for the prod vs. preview environments? If not, we can probably work around it. Also to check -- what's your goal with preview deployments? To be able to preview both frontend + backend changes together (requires Convex preview deployments + a pro plan)? Or to just preview frontend changes against your prod backend?

EvaOP•4mo ago

I just upgraded to pro :) Would be nice to preview both frontend + backend! When I push to a PR, Cloudflare generates a preview link (similar to Netlify or Vercel) and would love to be able to look at changes + share with others before merging

change the npx convex deploy build command to --cmd-url-env-var-name SOMETHING_ELSE (just any env var name that's not used by your app) so it doesn't overwrite it.

Can you explain this? Everything is working in production now thanks to your help! I didn’t need to change the npx convex deploy command after all. I still haven’t been able to get preview deploys working, but hopefully I can set that up soon. Confirmed there is a way to set env variables in Cloudflare Pages that are different for preview and prod.

sshader•4mo ago

Can you explain this?

I believe that npx convex deploy for production will handle setting VITE_CONVEX_URL to be the URL of your production deployment (the happy-animal-123.convex.cloud URL), which is generally convenient since you don't have to add this env variable manually in your hosting provider. However, if you're using a custom domain and intentionally setting VITE_CONVEX_URL in your hosting provider to the custom domain, then npx convex deploy ends up overwriting this. So as a bit of a hack, we're telling the command to set SOMETHING_ELSE to be the URL of your production deployment, so there's no risk of overwriting VITE_CONVEX_URL (I'm not 100% what order the env vars apply in, but wanted to be safe and make sure there's no way they'd overlap) For preview deployments, you want CONVEX_DEPLOY_KEY to be a production deploy key in your prod deployment, and for it to be a preview deploy key in your preview environment (both can be generated from project settings in the dashboard). The slightly tricky thing here is that for preview deployments, we want npx convex deploy to take care of setting VITE_CONVEX_URL for us so that it points at a new preview deployment, but for production we don't want npx convex deploy touching VITE_CONVEX_URL. To get around this, we could maybe use two environment variables VITE_CONVEX_URL_OVERRIDE and VITE_CONVEX_URL, and do something like new ConvexReactClient(import.meta.VITE_CONVEX_URL_OVERRIDE ?? import.meta.VITE_CONVEX_URL). Then you can set VITE_CONVEX_URL_OVERRIDE to your custom domain in your prod environment, and have npx convex deploy set VITE_CONVEX_URL. The other thing you might run into is that you'll probably need to manually specify the branch name as the preview name in the command (something like --preview-create $CF_PAGES_BRANCH). The Convex CLI automatically detects the branch name for Vercel, Netlify, and Github actions, but I don't think we've done this for cloudflare pages.

Mcnoble•4mo ago

@sshader I'm having a similar issue in my prod deployment I have checked the logs and it's showing Missing environment variable SITE_URL Where do I set this I already set my CONVEX_SITE_URL Got it fixed, thanks. The logs helped

cody•2mo ago

Hi @Eva – I'm trying to get convex preview deployments set up with cloudflare pages right now and it's not working out so far. Were you able to get it working? @sshader As far as I know, env variables set using vite are not available in cloudflare pages deployments. Variables can be set in the wrangler.toml or the cloudflare dashboard, then they're available on the server. I'm using remix, so I access them in loaders/actions:

export async function loader(args: LoaderFunctionArgs) {
  const env = args.context.cloudflare.env

  return env
}

export async function loader(args: LoaderFunctionArgs) {
  const env = args.context.cloudflare.env

  return env
}

In the cloudflare build logs it looks like everything working correctly, a convex preview deployment is created, cloudflare deployment is created, but the app isn't functional because it doesn't have access to the preview CONVEX_URL

EvaOP•2mo ago

Hey Cody, yes! I was able to get preview deployments working with Cloudflare Pages.

EvaOP•2mo ago

I have Cloudflare Pages connected to my GitHub repository. Within the Settings tab of the Cloudflare Pages project, I set secrets for CONVEX_DEPLOY_KEY and VITE_CONVEX_URL. I also have CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN, and CONVEX_DEPLOY_KEY set in my GitHub repository secrets, because I'm using a custom GitHub Action to assist with production deploys. I think you could skip this if you're always deploying latest changes from main, which is the default behavior.

EvaOP•2mo ago

I also generated Deploy Keys for production and preview environments from the Convex dashboard for my project.

EvaOP•2mo ago

I hope this helps!

cody•2mo ago

Thanks for sharing this So, are you setting the convex url to the cloudflare preview deployment secrets via api in the github action?

EvaOP•2mo ago

You can see my deploy workflow here: https://github.com/namesakefyi/namesake/blob/main/.github/workflows/deploy.yml

GitHub

namesake/.github/workflows/deploy.yml at main · namesakefyi/namesake

Web app to aid with the legal name and gender marker change process in the U.S. - namesakefyi/namesake