/bubble-tutorials

How to use custom domains in Bubble.io: Step-by-Step Guide

Unlock the power of branding on Bubble.io with our easy guide on using custom domains. Enhance your site's identity with step-by-step instructions today!

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

How to use custom domains in Bubble.io?

Setting Up Custom Domains in Bubble.io

 

Using a custom domain with your Bubble.io application can enhance your brand's visibility and give your site a professional appearance. This guide provides an in-depth, step-by-step approach to setting up a custom domain for your Bubble.io application.

 

Prerequisites

 

  • A Bubble.io account with your application ready for deployment.
  • Ownership of a domain name registered through a domain registrar (e.g., GoDaddy, Namecheap).
  • Access to your domain registrar’s control panel for DNS settings.
  • Subscription to a paid Bubble.io plan, as custom domains are not available on the free plan.

 

Preparing Your Domain

 

  • Log in to your domain registrar account (e.g., GoDaddy, Namecheap).
  • Navigate to the settings section for managing DNS (Domain Name System) records.
  • Ensure that you can edit DNS settings like A records and CNAME records, as these will be necessary to link your domain with Bubble.io.
  • Decide if you want to use the root domain (example.com) or a subdomain (app.example.com) for your Bubble application.

 

Configuring DNS for Custom Domain

 

  • Open the DNS management screen for your domain.
  • Add a new A record:
    • Name/Host: @ (如果本地 @ 不是可选项, 可能需要留空或者填写主机标识符, 比如 www).
    • Type: A
    • Value: 104.19.240.93 (Note: Bubble.io may provide a different IP address).
    • Save the A record.
  • If you're using a subdomain, also add a CNAME record:
    • Name/Host: The subdomain (e.g., app).
    • Type: CNAME
    • Value: app.bubble.io
    • Save the CNAME record.
  • Take note of the record propagation times, which can take up to 48 hours but are usually quicker.

 

Linking Domain in Bubble.io

 

  • Log in to your Bubble.io account.
  • Navigate to the editor of your application.
  • Find the settings tab (gear icon) on the left menu and click on it.
  • Go to the “Domain / Email” section under the settings.
  • In the "Domain" field, enter your custom domain (for example, example.com or app.example.com).
  • Click “Save.”
  • Bubble.io will check the DNS settings to verify the domain connection.

 

Testing the Domain Setup

 

  • After setting up the DNS and linking it to your Bubble application, wait for DNS propagation to complete, which can take some time.
  • Once the configuration updates, test your domain by entering it into a browser address bar.
  • If everything is set up correctly, your Bubble.io application should appear on your custom domain.

 

Troubleshooting Common Issues

 

  • If your domain is not working, double-check the DNS settings and ensure that they match the instructions on Bubble.io.
  • Ensure any old DNS records that might conflict with your new settings are removed.
  • Make sure the domain is correctly entered in the Bubble application settings.
  • Wait for full DNS propagation, which might take longer for some domains.

 

Ensuring Secure Connections

 

  • Check that your site redirects HTTP traffic to HTTPS for secure connections, a standard practice to protect user data.
  • Bubble.io automatically provides SSL certificates, though DNS propagation might be required for it to take effect.

 

By following this guide, you can successfully implement a custom domain for your Bubble.io application, enhancing your project's professionalism and searchability on the web. This setup not only improves brand consistency but also contributes to user trust.

Explore More Valuable No-Code Resources

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences