DEV Community

boolfalse
boolfalse

Posted on

Setup Custom Email with Cloudflare and Mailgun

How to Set Up a Custom Email with Cloudflare and Mailgun

How to Set Up Custom Email along with Domain

As a software engineer, you may want to consider having a professional email account along with your own website like "info@example.com". But you may realized that it must cost a certain amount that you are not willing to pay. How would you behave if you knew you could do it for free? There is actually a way to do it, and besides the fact that having a professional email account is free, it will help you be more efficient, reliable and secure in your daily work.

In this article, you'll learn how to create and set up your own email address using Cloudflare and Mailgun to manage emails in Gmail. It means you can send and receive emails directly on your Gmail inbox.
I've already done this for personal use and have taken screenshots of the entire process to show it in this article. So I'll share here all the necessary steps you need to follow to set up your own email.

The original article initially was published on freeCodeCamp.

Introduction

Let's figure out what you need to have before you start, what you are going to do and how it will work.

What you need to have before you start:

At first, we assume, you already have a domain, let's call it "yourdomain.com", on which you have control. Specifically, you need to have accessibility to connect your domain with Cloudflare and setup DNS records there. A classic example of that is having a domain on some domain registrar (like GoDaddy, Namecheap), and adding your domain to Cloudflare by setting DNS records provided by Cloudflare on your domain registrar account.

Adding a domain to Cloudflare involves updating your domain's DNS nameservers to point to Cloudflare's nameservers. Once the domain is added, Cloudflare acts as an intermediary for web traffic, providing security features like DDoS protection, firewall, and SSL encryption, as well as performance enhancements through caching and content optimization.
If you haven't done that yet, here's the official video on YouTube on how to connect your domain to Cloudflare.

Additionally, Cloudflare manages DNS records for your domain, allowing you to control how traffic is routed and ensuring reliable delivery of services like email.
So, our work in this article will be focusing exactly on that, on how to setup your domain on Cloudflare Email.
Cloudflare Email is one of the services of Cloudflare since 2021, which can be used for free (as for now at least).

The second assumption is that you have account at Gmail, and you have access to its email settings. Simply, if you have just a regular "youremail@gmail.com" email, which isn't under control of any administrator or kind of that, then you're have nothing to worry about for this. We'll explore and work on email settings later on.

What you are going to do:

In simple words, you're going to create a custom email like "something@yourdomain.com", which you can use to send and receive emails from that email by using Gmail's platform. So you will be able receiving and reading emails sent to "something@yourdomain.com" in Gmail, as well as sending emails from that custom email using Gmail.
For all of that you'll use Cloudflare Email for the email routing, and Mailgun's SMTP server for sending emails.

How it will work technically:

When composing an email from Gmail with the sender set as "something@yourdomain.com", Gmail utilizes Mailgun's SMTP server through the provided credentials, transmitting the email. Mailgun then processes the message and forwards it to the recipient's email server, likely involving DNS lookups to find the recipient's server.
Emails sent to "something@yourdomain.com" are received by Cloudflare's email servers, configured via MX records in the domain's DNS settings. Cloudflare stores the received emails in the associated account, accessible through Gmail, which periodically connects to Cloudflare's servers (using IMAP or POP3 protocols) to retrieve new messages, enabling seamless access to incoming emails.

Email Routing on Cloudflare

Cloudflare Email Routing is designed to simplify the way you create and manage email addresses, without needing to keep an eye on additional mailboxes. With Email Routing, you can create any number of custom email addresses to use in situations where you do not want to share your primary email address, such as when you subscribe to a new service or newsletter. Emails are then routed to your preferred email inbox, without you ever having to expose your primary email address. (Docs)

Sign in to your Cloudflare account and navigate to Dashboard.
Choose and click to the desired website. For me it's "boolfalse.com", as I want to create a custom email like "email@boolfalse.com".

Cloudflare: Websites

Navigate to the "Email Routing" for the selected website.

Cloudflare: Email Routing

If you don't have email routing configured, you may see something similar to the screenshot above. Click "Get started". You may be able to create your own address to receive emails and take action.
We'll skip this without creating our own address for doing it manually.

Cloudflare: Custom Email

By default, email routing is disabled, so you need to enable it. Click the link to navigate to the "Email Routing" page.

Cloudflare: Email Routing

Submit it by clicking "Enable Email Routing".

Cloudflare: Enable Email Routing

For get it done, you need to have three MX and one TXT records:

  • Type: MX; Name: @; Mail Server: route1.mx.cloudflare.net; TTL: Auto; Priority: 69
  • Type: MX; Name: @; Mail Server: route2.mx.cloudflare.net; TTL: Auto; Priority: 99
  • Type: MX; Name: @; Mail Server: route3.mx.cloudflare.net; TTL: Auto; Priority: 40
  • Type: TXT; Name: @; TTL: Auto; Content: v=spf1 include:_spf.mx.cloudflare.net ~all

You can see them at the bottom of the "Email Routing" page.

Cloudflare: DNS records for Email Routing

So, as already said, in the left menu, go to "DNS" -> "Records" and add the following records there.

Cloudflare: DNS records added

After creating these records, go to the "Email Routing" page again.

There you only need to have the records you just created.
So, if you have any other records, just delete them.
For example, I already had an unnecessary entry there that I should delete.

Cloudflare: existing records for Email Routing

Submit to delete existing unnecessary records.

Cloudflare: deleting unnecessary records

After removing unnecessary DNS records, you will see only the ones you need there.
You will now be able to enable email routing by clicking the "Add records and enable" button.

Cloudflare: Enable Email Routing

After enabling it you'll see something like this:

Cloudflare: Email DNS records configured

Creating Custom Email on Cloudflare

Now go to the "Routes" tab and create an email by clicking the "Create address" button.

Cloudflare: Email Routing (enabled)

In this example, we'll create "email@boolfalse.com" email address, by adding "email" as a custom address, and a destination email address, where I'll be able to receive emails.

Cloudflare: Email Routing

You'll see a notification about that.

Cloudflare: creating a custom email

You will also get an email for confirming this action.

Verifying the destination email

Just verify the email address.

Verify email address

Once you've verified the email address, you may get this page:

Cloudflare: custom email address is verified

You probably will also get an email that you've verified your domain with Mailgun:

Notification about custom email address verification

Receiving Emails into the Custom Email

Now, your email address is activated, and you can see that here:

Cloudflare: custom email address is active

At this point you already can send emails to the custom email you just set up. In this case, it's "email@boolfalse.com".
Below is a test email sent from a different email.

Testing email receiving

You'll receive a test email to the custom email.

Test email has been received

Mailgun: Adding New Domain

You can now successfully receive emails, but you can't send emails from that custom email yet.

So, it's time to switch to the Mail Service provider. In our case it will be Mailgun.
To do this, you just need to register and attach the card to your Mailgun account. After activating your account with the card attached, you can set up a domain for your email.

You don't have to worry about the card, because Mailgun does not charge for limited quantities. I think the amount it gives is quite suitable for a free package.
You can find the price packages in detail here.

Go to "Sending" -> "Domains" page, and click the "Add New Domain" button.

In our case it will be "mg.boolfalse.com", as Mailgun recommends to use like that to be able to send emails from your root domain, e.g. "email@boolfalse.com".
You can see that recommendation on the right in below image:

Mailgun: create a new domain

You can also select the domain region and DCIM key length, but you can leave everything as default.
I will leave DCIM key lenght as 1024 and "US" as a domain region.

After creating the domain, you may be shown some tips on how to verify your domain.

Mailgun: adding a new domain

Mailgun will give you two TXT records, two MX records and one CNAME record to add to your provider.

  • Type: TXT; Name: mailto._domainkey.mg.boolfalse.com; TTL: Auto; Content: SECRET
  • Type: TXT; Name: mg.boolfalse.com; TTL: Auto; Content: v=spf1 include:mailgun.org ~all
  • Type: MX; Name: mg.boolfalse.com; Mail Server: mxa.mailgun.org; TTL: Auto; Priority: 10
  • Type: MX; Name mg.boolfalse.com; Mail Server: mxb.mailgun.org; TTL: Auto; Priority: 10
  • Type: CNAME; Name: email; Target: mailgun.org; TTL: Auto; Proxy Status: On

In our case, we will add them to Cloudflare.

Below is the first TXT record:

Mailgun: first TXT record for a new domain

Below is the second TXT record:

Mailgun: second TXT record for a new domain

Below is the first MX record:

Mailgun: first MX record for a new domain

Below is the second MX record:

Mailgun: second MX record for a new domain

After you've added two TXT and two MX records, you can check and verify them by clicking the "Verify DNS Records" button.

Mailgun: checking TXT and MX records for a new domain

Lastly, add CNAME record.

Mailgun: adding CNAME record for a new domain

You may see a warning icon on the left of the CNAME record. You don't need to worry about that, cause what official documentation says about it:

If you recently added your domain to Cloudflare - meaning that your zone is in a pending state - you can often ignore this warning.
Once most domains becomes Active, Cloudflare will automatically issue a Universal SSL certificate, which will provide SSL/TLS coverage and remove the warning message.

After adding a CNAME record, you can check and verify it again by clicking the second "Verify DNS Records" button.

Mailgun: checking CNAME record for a new domain

If you have added all 5 records on the Cloudflare successfully, after clicking the verifying button, Mailgun will automatically redirect you to the "Overview" page.

Mailgun: 2 TXT, 2 MX and 1 CNAME records added for a new domain

It means you're ready to add a Sending API key on Mailgun.

Mailgun: Sending API key & SMPT User

Go to "Sending" -> "Domain Settings" page. Choose the "Sending API keys" tab at the top. Probably you won't see any API keys there. You just need to create a new Sending API key. Click "Add sending key" from the top right corner, and in the popup fill the name of the key you about to create.

Mailgun: creating a Sending API key

After pressing "Create sending key", you'll get the secret API key that you need to copy and save somewhere safe. After saving the key, you can just close the popup.
You'll see the created key listed:

Mailgun: Sending API key created

You also need to create a new SMTP user in Mailgun dashbaord.
Go to "Sending" -> "Domain Settings" page. Choose the "SMTP credentials" tab at the top and press "Add new SMTP user" button on the top left corner. It will open up a popup. Type user credentials there. In our case I'll create a user with the name "email". It will be like a login for your email on Gmail.

Mailgun: creating SMTP user

Once you create an SMTP user in Mailgun, you'll see it listed and a password for that user will be generated automatically. To get this password, copy it by clicking the "Copy" button in the pop-up notification in the lower right corner.

Mailgun: SMTP user created

Keep this in a safe place for future use. You will need this login and password to authenticate on Gmail.

You are now ready to set up email configurations with your email provider. In our case, we will do this in Gmail.
Open your Gmail account in your desktop browser and go to Settings by clicking the settings icon in the top right corner and click the "See all settings" button.

Mailgun: new domain is verified

Gmail Authentication with Mailgun SMTP Server

In the Gmail settings page choose the "Accounts and Import" tab and click on the "Add another email address" from the "Send mail as" section:

Gmail: Settings

It will open a popup for the authentication. Use the login and the password you just got by creating an SMTP user on Mailgun. Make sure to fill out the credentials correctly.

Gmail: authenticate a new user using a created SMTP server on Mailgun

Submit the form by clicking the "Add Account" button.
It probably will ask you to save the username/password in your browser. It's up to you.
And the last important thing here, that it will ask you to verify adding an account.

Gmail: authentication confirmation for a new user

For the verification, the confirmation email will be sent to your primary email.

Gmail: authentication verification email

You can either use the confirmation code to verify it using the pop-up window or simply follow the link provided in the confirmation email.
In this case, we'll click on a link that will open the page, where will be asked to confirm. Click on "Confirm" and simply close the previously opened pop-up window without worrying.

Gmail: verifying the authentication

Now you're ready to send and receive emails from the custom email you just created.

For sending an email from the custom email, you just need to choose that email as a sender email:

Gmail: sending emails

That's it!

An additional thing that may be useful to you is that you can set the custom email address you just created as the default address for sending emails from Gmail.
You can set this on the settings page in the "Send mail as" section:

Gmail: Settings (default sender)

I hope this guide will be a good resource for setting up your custom email.

Conclusion

In this article, you learned how to set up your own email to manage emails in Gmail using Cloudflare Email and Mailgun.
In conclusion, it is worth noting that this choice of tools is not mandatory, other tools could be used instead, but the basic idea and logic would be similar.

You can check out my website at: boolfalse.com

Feel free to share this article. 😇

Top comments (0)