How to Integrate Prerender with Bubble Using Cloudflare

What to Expect

How it Works

Before you start

Don't have Cloudflare set up?

Complete the Cloudflare setup first, then come back here and continue with the steps below. Here’s what the process involves:

1. Create a free Cloudflare account: https://dash.cloudflare.com/sign-up
2. Add your root domain (example: yourapp.com)
3. Review your DNS records
4. Log in to your domain registrar and replace the nameservers with Cloudflare's nameservers. The change propagation can take a few minutes up to a couple of hours, but you don't need to wait — continue to the next steps. Your custom domain may be temporarily unreachable during this time, but your site remains accessible via your Bubble hosted URL (yourapp.bubbleapps.io).

Follow the detailed Cloudflare guide here.

Step 1: Important: Remove the custom domain from Bubble 

Disconnect your custom domain from Bubble. If your domain is connected inside both Bubble and Cloudflare, the two services create a “redirect loop”, and your site becomes unreachable. Only one service can be the “front door” at a time. In this setup, that’s Cloudflare.

1. Open your Bubble project

2. Go to Settings -> Domain and Email

3. Remove the custom domain (example: yourapp.com, www.yourapp.com)

You can still use your custom domain publicly. Cloudflare will handle it and route requests to Bubble.

Step 2: Remove A record from Cloudflare

The existing records conflict with the Cloudflare Worker mapping you'll create and need to be removed first.

1. Go to Domains and click on your domain
2. In the left sidebar, click DNS → Records
3. Delete all A records where the Name is www or yourapp.com

Step 3: Create a Cloudflare Worker

1. Log in to Cloudflare

2. Go to  Compute → Workers & Pages
   
   

3. Click Create application
   
   

4. Choose Start with Hello World!
   
   

5. Name it something like bubble-prerender

6. Click Deploy

Step 4: Add your Prerender token to the Worker

1. Open your Worker

2. Go to Settings

3. Find Variables and Secrets

4. Add a Secret:

   • Name: PRERENDER_TOKEN

   • Type: Plaintext

   • Value: (paste your Prerender token)

     
     

5. Add the Bubble Upstream as a secret
   • Name: BUBBLE_UPSTREAM
   • Type: Plaintext
   • Value: Bubble hosted address (example: https://yourapp.bubbleapps.io)
     
     

6. Deploy

Step 5: Attach your custom domain(s) to the Worker (Custom Domain)

This is the key step that makes your domain work reliably through Cloudflare. By attaching your domain directly to the worker, you avoid common errors like Error 1014 and Error 1000.

1. In your Worker, open Settings

2. Click +Add next to Domains & Routes

   
   
   

3. Select Custom domain
   
   

4. Enter your domain (add as many custom domains as you need, including www)
   

5. Cloudflare will automatically create the needed DNS/certificate setup

 When done, Cloudflare DNS will show a special Worker mapping for your domain.

Step 6: Paste the Worker code

1. In Cloudflare, open Compute → Workers & Pages → Your Worker

2. Click Edit code

3. Replace everything with the code on this link.

4. Save and deploy

Final Check: Verify Prerender Is Working

Option 1: Simulate a Googlebot visit in Chrome 

To confirm Prerender is working, you’ll simulate a Googlebot visit in Chrome and check the response headers for x-prerender-request-id. If this header is present, Prerender is serving pre-rendered HTML to bots and your integration is complete.

For the full step-by-step verification process, see: Verify Your Prerender Integration

Option 2: Verify Integration within your Prerender Account

Navigate to the Verify Integration step in your Prerender account and submit your domain for verification.

Support

If you encounter any issues with this integration, please contact our support team for assistance.