Send your feedback

EMAIL
ADD CODE SNIPPET
ADD IMAGE/SCREENSHOTS
VOTE
Configure custom domains on Zephyr and CloudFlare
Configure custom domains on Zephyr and CloudFlare

 
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
techs
 

# 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. 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:
    Terminal
  2. 2

    Enter Dashboard

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

# CloudFlare: configure the domain

 
  1. 1

    Add a new Domain

    Terminal
    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".
    Terminal
  3. 3

    Select a Plan

    We have used the free plan (the last one)
    Terminal
  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:
    Terminal
  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
    Terminal
    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.
    Terminal
    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.
    Terminal
  2. 2

    Wait...

    Now we have to return to the CloudFlare screen where it suggested us to set up new nameservers:
    Terminal
    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
    Terminal
  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
    Terminal

# 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:
    Terminal
  3. 3

    Delete "A" records

    Delete both A records:
    Terminal
  4. 4

    Add Record

    Click the Add Record button and copy the following data as shown below
    onetwothreefour
    Type
    Name
    Content
    Proxy Status
    TTL
    CNAME
    *
    ze.zephyrcloud.app
    Proxied
    Auto
    Terminal
  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:
    Terminal
    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:
    Terminal
  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:
    Terminal
    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
    Terminal
    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.
    Terminal
  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:
    Terminal

# 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
Terminal
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).
Terminal

# Zephyr: Connect Domain

Now we need to connect the domain to Zephyr.
 
  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
    Terminal
  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:
    Terminal
  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:
    Terminal
  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:
    Terminal
  2. 2

    Set the domain

    Go to the settings page and add your Custom Domain (in our scenario fbion.dev):
    Terminal
  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

We can finally return to our project and run the command npm run build to generate a build.
Terminal
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:
Terminal

Rollback

You can also go back to a previous version by clicking the Deploy button:
Terminal
Watch the video to see the steps from build to versioning:
No audio
...
background handwritten
Unblock the content
Sign In
It's completely free!
Don’t have an account yet?
Sign Up!

Did you like this content?

Your feedback is very important to us!
26
Jan
2025
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
 
Latest books & video courses