Setting up Cloudflare with Google Domains

[eli]

Update: While the steps below are working just fine for my apps, you would be well served to check out these videos from Bubble on setting up your custom domain.

Carry on

---

I saw some people having issues with Google Domains when trying to enable the new Cloudflare feature from Bubble. Having just gone through this terror with Google, I thought I would share as it’s all working fine now.

For what to do on the Bubble side make sure to follow the steps Bubble laid out here.

In your Google Domain dashboard, click the Manage link on your domain and then navigate to the DNS menu item on the left.

All the way at the bottom are your Custom resource records. After changing the bare domain to the www version in Bubble I simply deleted everything in here and added a new resource record as shown with the CNAME info Bubble gave me.

So far so good. Bubble will say it’s not set up correctly but if you navigate to www.myawesomedomain.com you will see… IT WORKS! And it is speedy

But the plain jane myawesomedomain.com screams at you and says that you are probably trying to steal people credit card info so that has to be fixed.

To do that you need to forward your bare domain.com to www.domain.com using the Subdomain forward in Synthetic records as shown. (this is an example webflow domain, not the one I set up on my app. It does work. You can go there and see how good I am at setting up Webflow templates )

Click the BIG BLUE ADD BUTTON!

You will see this (probably, I mean, I saw this and it made me very angry )

You might even stomp around saying awful things like $$#@^!# for about 30 minutes til suddenly the dreaded red words go away and your website works perfectly once again!

Suh-weet! AND Good luck!

[NigelG]

Interesting. Is there a downside to using the 301 redirect in terms of speed ?

[peterj]

If I were a registrar, I’d be firing the 301 redirect from a really small apache instance with a really short .htaccess file. This is going to be blazing fast, because it’s going to be right next to the nameserver, and it doesn’t have to do any other work other than redirecting domains (other work such as identifing which bubble app you’re using, etc.)

[eli]

I’m quite ignorant about how domains and redirection work, so take this as coming from that point of view. I chose the 301 redirect as that was the directive from @peterj.

However, any speed issues are imperceptible from a user standpoint.

The console is showing a consistent page load time of .61 - .64 seconds regardless whether I use the bare domain or the www domain.

[peterj]

Most browsers cache 301s. The first call is going to be faster, and from then on every call to the original domain is going to just hit the browser’s memory. (Ask me how I know; it involves chasing ghost bugs for 8 hours last week.)

[seth.griffin]

Does Google Domains allow you to use a bare domain instead of the www?

[peterj]

They don’t. Google domains allows you to redirect a bare domain using the Synthetic record that eli describes, but you would have to use a different DNS provider (Cloudflare, namecheap, easyDNS) to make an ALIAS or bare domain CNAME pointing at app.bubble.io.

[chaostorm]

@eli Ha, that’s an awesome workaround!

One question: while the Google Domains synthetic record error message eventually did go away for me, the error message on Bubble (“We found DNS records for exampledomain.com that do not seem to point to Bubble…”) is still showing up. Is it supposed to disappear eventually, too?

[eli]

@chaostorm, it all cleared up for me pretty much right away. Did you delete the bare domain and add the www version in Bubble?

[chaostorm]

No, I didn’t. Should I do that?

[eli]

Yes. The directions above are for moving to cloudflare using the www domain.

[chaostorm]

Oops, I totally missed those first time around. Thanks for pointing it out.

I’ve just gone through those steps and everything seems to work just fine. Thank you so much!

[eli]

You bet Glad it worked for you!

[eli]

Of note, I’m still getting this in my Bubble domain settings but my app is being served over HTTPS.

Anything I need to worry about @peterj?

[peterj]

It’s cosmetic and I’m planning to roll out a fix for that and a couple other things monday 10/28.

[pauljamess]

Hey @peterj thanks for you all your posts and videos on this.

I’ve finally got things sorted bc my provider doesn’t support ALIAS so I went the subdomain route.

I have it setup like this:

I’ve then got web forwarding so that the top level domain goes to “try.” subdomain where my app is.

Then my domain on Bubble is set up “try.domain.com”

Bubble seems happy and connected, the app is working, just wondered if is this all good practice?

I’m a bit of a novice at this side of things so just wanted to check.

[peterj]

That certainly works, I think.

It sounds like you set up forwarding on both www and @, to try. If these are both 301s, then you should have consistent SEO, and the subdomain route is probably the easiest to configure overall.

The key pieces are:

• Bubble’s knowledge of the domain-appname mapping (try.domain.com -> your app)
• Cloudflare’s knowledge of the domain
• The settings with your DNS provider that provide the domain—host mappings.

Most customers want either www or bare, so they set up one or the other of the records you have above (62.116.130.8) and have it point to the other, but some of our customers have struggled to ensure that the redirect and bubble registered domain match. That is, they’re redirecting www with their registrar, meanwhile bubble is redirecting bare to www, meaning that the customer gets in an infinite loop.

To test it, visit try.domain.com/cdn-cgi/trace. You should get about ten lines of text; these indicate that your traffic is flowing over Cloudflare.

[gaurav]

I switched using the steps mentioned in this thread about 2-3 days ago. Everything worked seamlessly as mentioned.

Now getting the login / logout hell. If you logout, you can’t login, sign up or forgot password again.
App can’t even evaluate if user is logged in or out. Conditionals that used to work fine are fully broken. The problem doesn’t go away if your clear cache, close browser and restart or do whatever

Has anyone experienced this and have a quick resolution?

P.s. Submitted bug report #8208
cc @peterj

[eli]

I ran into the same login / logout hell. Its like you are trapped in a rogue browser session that’s no longer recognized by Bubble.

I let it sit for a couple hours and eventually I was able to login with an incognito browser but, ultimately, I had to get everyone that was logged in over the change clear all their browsing data to be able to log back in to the app.

[gaurav]

Thanks @eli!

Unfortunately that won’t do in my case as people can’t do this on their mobile browser. To top it off, they need this inside their native app to be able to launch previews.

Bubble really needs to provide a fix for this issue. App has become a sitting duck for someone who can’t both login or logout in their mobile.