Understanding and Implementing Subdomains with Cloudflare and Vercel

Ever wondered how big companies manage different sections of their website, like blog.example.com or shop.example.com, all under one main domain? The secret lies in subdomains! These powerful tools help you organize your web content, improve user experience, and even boost your SEO.

In this blog post, we'll demystify subdomains, walk through how they work, and then show you a practical example of setting one up using Cloudflare and integrating it with your Vercel project. Get ready to take control of your web real estate!

What Exactly is a Subdomain?

Think of your main domain (e.g., yourwebsite.com) as your house. A subdomain is like adding an extension or a separate building on your property, each with its own unique purpose and address, but still clearly part of your main estate.

Technically, a subdomain is a prefix added to your main domain name. Instead of starting with www, it uses a different identifier, like jsondata, moviestudio, tulos, or shoptech.

Examples:

• jsondata.reactbd.com for your blog
• moviestudio.yreactbd.com for your e-commerce store
• tulos.reactbd.com for a web application
• shoptech.reactbd.com for a help desk or knowledge base

How Do Subdomains Work?

When a user types a subdomain like blog.yourwebsite.com into their browser, here's a simplified breakdown of what happens:

DNS Lookup: The user's computer asks a Domain Name System (DNS) server to find the IP address associated with blog.yourwebsite.com.

DNS Record: Your DNS provider (like Cloudflare, in our example) has a record specifically for blog.yourwebsite.com. This record tells the internet where to send traffic for that particular subdomain.

Traffic Direction: Based on the DNS record, the user's request is directed to the server hosting the content for blog.yourwebsite.com. This server might be different from the one hosting your main yourwebsite.com.

This separation allows you to host different parts of your website on different platforms or servers, giving you immense flexibility and organization.

Why use subdomains?

• Organization: Clearly segment different functionalities or content areas of your website.
• Branding: Maintain consistent branding while offering diverse services.
• SEO (with caveats): While subdomains are generally treated as separate entities by search engines, they can still benefit from the authority of your main domain. They also allow for targeted keyword strategies for specific sections.
• Technical Separation: Host different applications, versions, or environments (e.g., dev.yourwebsite.com, staging.yourwebsite.com) independently without affecting your main site.
• Scalability: Distribute traffic and resources more efficiently by hosting heavy applications on dedicated subdomains.

A Practical Example: Creating a Subdomain in Cloudflare and Integrating with Vercel

Let's get hands-on! We'll create a subdomain in Cloudflare and point it to a Vercel project. This is a common setup for modern web applications.

Prerequisites:

• A registered domain name (e.g., yourdomain.com) managed by Cloudflare.
• A Vercel account with an existing project.

Step 1: Create a Subdomain DNS Record in Cloudflare

Video Link: https://youtu.be/hI6mXl1wUVc

Cloudflare acts as your DNS provider, directing traffic for your domain and its subdomains.

Log in to your Cloudflare dashboard.

Select your domain. From your Cloudflare dashboard, choose the domain for which you want to create a subdomain.

Navigate to DNS > Records. In the left-hand sidebar, click on "DNS" and then "Records."

Add a new record. Click the "Add record" button.

Configure the CNAME record:

• Type: Select CNAME. A CNAME record points a domain name (or subdomain) to another domain name.
• Name: Enter your desired subdomain prefix (e.g., blog, app, dev). For this example, let's use app. So, your subdomain will be app.yourdomain.com.
• Target: This is where you'll point your subdomain to your Vercel project's unique domain. For Vercel, this typically looks something like cname.vercel-dns.com or a specific project deployment URL. You'll get this target from Vercel in the next step. For now, you can put a placeholder or leave it blank if Cloudflare allows.
• Proxy status: For Vercel integration, it's often recommended to turn off proxying (orange cloud turns gray) initially to allow Vercel to verify domain ownership and issue SSL certificates. You can usually re-enable Cloudflare's proxying (orange cloud) after successful integration if you want to leverage its security and performance features.
• TTL (Time To Live): Leave this as "Auto" unless you have a specific reason to change it.
• Click "Save."

Cloudflare Documentation Reference: Create subdomain records

Step 2: Integrate Your Vercel Project with the Cloudflare Subdomain

Now, we need to tell Vercel that your project should respond to the newly created subdomain.

Log in to your Vercel dashboard.

Navigate to your project. Select the Vercel project you want to connect to your subdomain.

Go to Project Settings > Domains. In the project's settings, find and click on the "Domains" tab.

Add your custom domain. Click the "Add" button or locate the input field to add a new domain.

Enter your subdomain: Type in your full subdomain (e.g., app.yourdomain.com) and click "Add."

Vercel's Instructions: Vercel will then provide you with the exact DNS records you need to configure in Cloudflare. This will typically be a CNAME record pointing to a Vercel-specific domain (e.g., cname.vercel-dns.com or a deployment URL).

• Crucial Note: If you initially left the Target field empty in Cloudflare, now is the time to update it with the value Vercel provides. If you used cname.vercel-dns.com as a placeholder, ensure it matches Vercel's recommendation.

Wait for DNS Propagation and Verification: DNS changes can take some time to propagate across the internet (usually a few minutes to a few hours, but sometimes up to 48 hours). Vercel will automatically try to verify your domain. Once successful, the status next to your subdomain in Vercel will change to "Ready" or "Configured."

Vercel Documentation Reference: Adding & Configuring a Custom Domain (Subdomains section)

Step 3: Verify and Go Live!

Once Vercel shows your domain as configured, you should be able to access your Vercel project by typing your new subdomain (app.yourdomain.com) into your browser!

If you initially turned off Cloudflare's proxying, you can now consider turning it back on in your Cloudflare DNS settings for that specific CNAME record. This will enable Cloudflare's CDN, DDoS protection, and other performance/security features.

Wrapping Up

Subdomains are incredibly versatile and a fundamental part of managing a scalable and organized web presence. Whether you're launching a new feature, a dedicated blog, or a separate application, mastering subdomains gives you the power to structure your online world effectively.

By leveraging powerful platforms like Cloudflare for DNS management and Vercel for project deployment, the process of bringing your subdomain ideas to life is more streamlined than ever. So go ahead, experiment with subdomains, and unlock new possibilities for your websites!