# Introduction
In this article we analyze the procedure to associate a custom domain managed by CloudFlare with an application deployed on Zephyr Cloud .
The scenario:
1
You use CloudFlare to manage your domains
2
Domains can be registered using CloudFlare or any other services, such as NameCheap, in our example.
3
You want to use Zephyr Cloud to deploy your application in a custom domain
How to deploy Angular & React on Zephyr Cloud
If you have never tried Zephyr, and therefore do not know how it works, or if if your goal is just to deploy a static FrontEnd application (developed in Angular, React or any other framework) we recommend you read the previous article Deploy Static applications (Angular, React,...) on Zephyr Cloud.
The procedure is really simple and takes a few minutes to be configured
# Create a CloudFlare account
- 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
Enter Dashboard
Login and enter the CloudFlare dashboard (https://dash.cloudflare.com/ )
# CloudFlare: configure the domain
- 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
Check Domain
Enter an existing domain you want to configure and select "Quick scan for DNS Records". - 3
Select a Plan
We have used the free plan (the last one) - 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
Update nameservers
Follow the instructions:1Make sure DNSSec is off. In NameCheap service is automatically set to OFF2Configure your domain to use CloudFlare nameserversSo, 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
Configure NameServers
Open the dashboard of NameCheap (or your supplier) and select the domain to edit, in our casefbion.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 dashboardAre using another Domain provider?If you use another domain provider, the screens may be different, but the procedure should be very similar. - 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 timeThis procedure may take a few minutes or hours. In our case, with NameCheap, it took about 3 or 4 minutes - 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
Select the domain
Go to the CloudFlare Dashboard, where you see the list of domains - 2
DNS records
Go to DNS Records of your domain: - 3
Delete "A" records
Delete bothA
records: - 4
Add Record
Click the Add Record button and copy the following data as shown belowone two three four TypeNameContentProxy StatusTTLCNAME*ze.zephyrcloud.appProxiedAuto - 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
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
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:1a descriptive name: this does not affect the process, so use whatever you prefer2permissions3Zone ResourcesBelow you can see the Permissions settings to use and Zone Resources.More info about this settings are available in the Zephyr CloudFlare DocumentationYou can now confirm these settings and you will be redirected to a summary screen - 3
Summary Screen
At the end of the procedure you will be assigned a token.Copy the tokenCopy the generated token since you will use it in the dashboard of Zephyr, together with the parameter Zone ID we have previously obtained. - 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
We are ready to configure CloudFlare in the Zephyr dashboard.
- 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

Now we have to configure CloudFlare by entering the value of Zone ID and the API Token that we generated from the dashboard of CloudFlare in the previous step.
We also set the CloudFlare application name that it's used to define a worker in CloudFlare (you will see it in the next recipes).

# Zephyr: Connect Domain
Now we need to connect the domain to Zephyr.
- 1
Create an environment variable
Go to the Zephyr project's settings and select the environment page:- set the Environment Name to easily identify it
- associate a tag version to the environment, in our case the "latest" build
- Save all clicking the Create environment button
- 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
Connect a Domain the environment
In the environmentprod
settings, now a new Custom DNS Name panel will appear at the bottom of the page.Click the Connect Domain button: - 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 procedureNo audio
# Configure Service Worker
- 1
Workers
Open the Workers & Pages on CloudFlare dashboard.First of all you should note that there is a worker named asfbion-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
Set the domain
Go to the settings page and add your Custom Domain (in our scenariofbion.dev
): - 3
Summary
Here you can see the whole procedure:No audioWe did everything!! However, to see the project in your domain you need to make a new deploy
# Deploy
We can finally return to our project and run the command
npm run build
to generate a build.
Now the site will be available both at the url assigned by Zaphyr (visible in the terminal) and on your custom domain (in our scenario:
fbion.dev
)You can watch the following video to see the whole procedure:
No audio
# Versioning
Zephyr allows us to easily manage versioning via the Versions page available in each project.
From this page you can:
1
see the whole list of all deploys
2
Rollback to a previous version
For example, we did 3 deploys so far.
During our tests we did a fourth deploy (using
npm run build
) and as a result we see 4 versions in this Version History list:
You can also go back to a previous version by clicking the Deploy button:

Watch the video to see the steps from build to versioning:
No audio