Configure custom domains on Zephyr and CloudFlare

26 Jan 2025

6 mins

Fabio Biondi

Google Developer Expert
Microsoft MVP

Giorgio Boa

FullStack Developer @ Qarik
Microsoft MVP

# Introduction

# Create a CloudFlare account

1. 1

   Create a CloudFlare account

   First you need to have or create an account on CloudFlare and you can safely use the FREE plan to start experimenting:
   
2. 2

   Enter Dashboard

   Login and enter the CloudFlare dashboard (https://dash.cloudflare.com/ )
   

# CloudFlare: configure the domain

1. 1

   Add a new Domain

   
   We have tested the whole procedure using a new domain registered in NameCheap , fbion.dev, with no previous configurations.
2. 2

   Check Domain

   Enter an existing domain you want to configure and select "Quick scan for DNS Records".
   
3. 3

   Select a Plan

   We have used the free plan (the last one)

   
4. 4

   Review DNS Records

   Now you can review and update your DNS settings. If everything is ok, as in our case, we clicked on Continue to activation button:
   
5. 5

   Update nameservers

   Follow the instructions:

   1

   Make sure DNSSec is off. In NameCheap service is automatically set to OFF

   2

   Configure your domain to use CloudFlare nameservers
   
   So, copy these values, open your Domain service provider dashboard and add them to your domain.
   Do not close this page because we will have to come back soon

# nameCheap: configure nameservers

1. 1

   Configure NameServers

   Open the dashboard of NameCheap (or your supplier) and select the domain to edit, in our case fbion.dev.
   
   Go to the NameServer section, select Custom DNS (the default NameCheap setting is Namecheap Basic DNS) and add the nameservers you have copied from the CloudFlare dashboard
   Are using another Domain provider?

   If you use another domain provider, the screens may be different, but the procedure should be very similar.
   
2. 2

   Wait...

   Now we have to return to the CloudFlare screen where it suggested us to set up new nameservers:
   
   Refreshes the page and you should have a success message.
   This may take some time

   This procedure may take a few minutes or hours. In our case, with NameCheap, it took about 3 or 4 minutes
   
3. 3

   Get Zone ID

   Scrolling down the same page you will find the Zone Id parameter.
   Copy this value that we will need in the configuration of Zephyr
   

# Configure Zephyr on Cloudflare

1. 1

   Select the domain

   Go to the CloudFlare Dashboard, where you see the list of domains
2. 2

   DNS records

   Go to DNS Records of your domain:
   
3. 3

   Delete "A" records

   Delete both A records:
   
4. 4

   Add Record

   Click the Add Record button and copy the following data as shown below

   one	two	three	four
   Type	Name	Content	Proxy Status	TTL
   CNAME	*	ze.zephyrcloud.app	Proxied	Auto

   
5. 5

   Summary

   You can find more info in the Zephyr - CloudFlare documentation but below you can see a few seconds video where we show all the steps:
   No audio

# CloudFlare: Generate the token

1. 1

   Create a token

   Further down in the same panel of the Zone ID you find a link to generate a new token Get your API token:
   
   What is the token for?

   This token gives permission for Zephyr to manage your deployed files. It enables the system to handle both uploading your content and making it available to users. Think of it as a special key that lets Zephyr set up everything needed to store and deliver your assets. Here you can find the list of created resources.
   So click the Create Token button:
   
2. 2

   Set Token Permissions

   Now we have the option to choose different templates to set the token permissions. However, we opt for a custom configuration.
   Click the Get Started button in the Custom Token panel:
   
   Now we have to configure the token, defining:

   1

   a descriptive name: this does not affect the process, so use whatever you prefer

   2

   permissions

   3

   Zone Resources
   Below you can see the Permissions settings to use and Zone Resources.
   More info about this settings are available in the Zephyr CloudFlare Documentation
   
   You can now confirm these settings and you will be redirected to a summary screen
3. 3

   Summary Screen

   At the end of the procedure you will be assigned a token.
   Copy the token

   Copy the generated token since you will use it in the dashboard of Zephyr, together with the parameter Zone ID we have previously obtained.
   
4. 4

   Verify the token

   As suggested by the previous screen, you can also verify if the token works.
   Open a terminal and copy the CURL statement:
   

# Zephyr: CloudFlare integration

• Go to the configuration page of the project created in the previous steps
• Click the Settings Tab
• Select Default Deployment Integration
• Click CloudFlare - Add Integration

# Zephyr: Connect Domain

1. 1

   Create an environment variable

   Go to the Zephyr project's settings and select the environment page:
   1. set the Environment Name to easily identify it
   2. associate a tag version to the environment, in our case the "latest" build
   3. Save all clicking the Create environment button
   
2. 2

   Edit the environment

   After the previous step you will be redirected to the list of environments.
   Click on the environment you have just created, prod, to edit it again:
   
3. 3

   Connect a Domain the environment

   In the environment prod settings, now a new Custom DNS Name panel will appear at the bottom of the page.
   Click the Connect Domain button:
   
4. 4

   Configure the domain

   Enter the domain name and, if configured correctly in the previous steps, you should have no problem connecting it.
   Watch the following page to see the whole procedure

   No audio

# Configure Service Worker

1. 1

   Workers

   Open the Workers & Pages on CloudFlare dashboard.
   First of all you should note that there is a worker named as fbion-cloudflare which we configured earlier in section Zephyr - CloudFlare integration.
   Anyway now we have to configure the other worker, which manage uploads. So click to edit its configuration:
   
2. 2

   Set the domain

   Go to the settings page and add your Custom Domain (in our scenario fbion.dev):

   
3. 3

   Summary

   Here you can see the whole procedure:
   No audio
   We did everything!! However, to see the project in your domain you need to make a new deploy

# Deploy

# Versioning

Rollback