Setting Up WWW and Non-WWW Domains with Cloudflare: A Learning Experience

When you’re setting up a website with Cloudflare, one of the key decisions you’ll need to make is whether to use the www version of your domain (e.g., www.mrobles.work) or the non-www version (mrobles.work). It’s a common setup issue that developers face, and it can be a bit tricky when it comes to DNS and routing configurations.

Recently, I went through the process of setting up both www.mrobles.work and mrobles.work using Cloudflare, and I learned a lot along the way. This blog post details the steps I took and the challenges I faced while setting up both domain versions correctly.

The Challenge: Getting Both Domains to Work

At first, everything was working smoothly with just the non-www version of my domain (mrobles.work). However, I wanted to ensure that the www version would also work seamlessly, especially since many users are accustomed to typing www before a domain name.

I wanted to make sure that both URLs (www.mrobles.work and mrobles.work) would resolve correctly and point to the same site, ensuring users could access the website no matter which version of the domain they typed in.

Cloudflare DNS Settings: The Basics

The first step was configuring the DNS settings in Cloudflare. Cloudflare makes it easy to manage DNS records for your domain, and it's crucial to ensure that both versions of your domain point to the same origin.

Here’s a quick overview of what I did:

1. Set up a CNAME record for www.mrobles.work: I created a CNAME record that points www.mrobles.work to mrobles.work. This means that anyone visiting www.mrobles.work would be routed to the same server as the non-www version. I also set the CNAME to be proxied by Cloudflare to ensure traffic would be routed securely and efficiently.

    yamlCopyEditType: CNAME
    Name: www
    Target: mrobles.work
    Proxy Status: Proxied (Orange Cloud)
   

2. Ensure proper DNS propagation: After setting the DNS records, I checked the DNS propagation using tools like whatsmydns.net to confirm that both domains were pointing to the correct IP addresses and resolving properly.

Cloudflare Workers: Redirecting and Routing

To make sure users could access the website from either version (www.mrobles.work or mrobles.work), I configured Cloudflare Workers. Workers allow you to write serverless code that can handle requests, modify them, or route them as needed.

I set up a Worker to route traffic from www.mrobles.work to the correct page, ensuring that both versions of the URL lead to the same content. I also mapped the custom domains (www.mrobles.work and mrobles.work) in the Worker settings to make sure the traffic was being routed appropriately.

The Browser Cache Issue

Everything seemed to be working fine until I ran into an issue: while the site worked perfectly in incognito mode and on mobile, it wasn't loading correctly in my regular browser. I kept encountering the ERR_NAME_NOT_RESOLVED error when visiting www.mrobles.work.

After testing the site on different devices and networks, I realized it was a browser cache issue. My regular browser was still holding onto old DNS information, while incognito mode didn’t have this cached data, allowing the site to load correctly.

Fixing the Cache Issue

Once I identified the problem, the solution was simple but necessary:

1. Clear the browser’s cache: I cleared my regular browser cache, which forces the browser to refresh its DNS records and get the updated settings.

2. Clear DNS Cache: I also cleared my system’s DNS cache using simple commands (for both Windows and macOS) to make sure my device was using the latest DNS records.

Windows (Command Prompt):

bashCopyEditipconfig /flushdns

macOS (Terminal):

bashCopyEditsudo killall -HUP mDNSResponder

After clearing both caches, the www.mrobles.work version worked flawlessly in my regular browser.

Lessons Learned

1. DNS and Caching: Always be aware of the caching mechanism on both the browser and the system level. Changes to DNS settings might not take effect immediately due to local caches.

2. Cloudflare’s Flexibility: Cloudflare’s DNS and Workers are incredibly flexible, allowing you to configure routes and manage traffic easily. But, with great flexibility comes the responsibility of setting things up correctly.

3. Patience with Propagation: DNS propagation can take time, so if things aren’t working immediately, give it some time (usually up to 48 hours) for the changes to reflect globally.

Conclusion

Setting up both www and non-www versions of your domain with Cloudflare is a straightforward process, but like most things in web development, it comes with a learning curve. Through this process, I learned more about Cloudflare’s tools, the importance of DNS management, and how caching affects how websites load.

If you’re going through a similar process, hopefully, this post helps you avoid some of the pitfalls I encountered. The key takeaway: don't forget about browser and DNS cache when troubleshooting.