Docs
Get Started
Learning
Zephyr Cloud →
Get Started
Learning
Zephyr Cloud →

Configure Cloudflare on Zephyr

Started as an email spam tracker, Cloudflare today offers extensive ability to help users register, manage their domain as a registrar and monitor, secure, configure user's entire IT infrastructure.

In this section we will walk you through how to configure Cloudflare as your default cloud provider to deploy and version your application with Zephyr Cloud, using Cloudflare's global edge network, KV namespace, Workers & Pages project to deliver your content on the edge.

Pre-requisites

INFO
  • A registered Cloudflare account
  • A domain registered on Cloudflare, or a domain DNS can be modified by Cloudflare
  • A registered Zephyr Account

Configure and enable Cloudflare

Log in to Zephyr dashboard

After sign in, click on your selected organization.


Find Cloudflare under Deployment Integration

  • Select Settings under organization on top navigation tabs.
  • On the left side, select Deployment Integration.
  • Choose Available to find Cloudflare and click on Add integraiton.

How to get credentials and configure Cloudflare

Before you move to the next step, you will need two details and one DNS configuration from Cloudflare:

1. Zone ID

  • On domain's Overview tab, scroll down until you can see API on the right side bar.
  • You will find Zone ID under the API section.

2. API token

  • Under Zone ID and Account ID within the API section, right click on Get your API token to open it on a new tab.
  • Scroll down to the bottom and select Create Custom Token by clicking on "Get started".
  • Give your API token a meaningfull name (who created this, what's this for etc).
  • The configuration needed for API tokens are under Permissions (only these are required):
ResourceResource TypePermission
AccountWorker KV StorageEdit
AccountWorker ScriptsEdit
AccountCloudflare PagesEdit
ZoneWorker RoutesEdit

  • Zone Resources: When asked to whether include a specific zone to this API token, you to Include a Specific zone under your domain.

  • The rest of configuration details (Account resources, Client IP Address Filtering etc.) are not required by us and you can leave them as default.

  • Scroll to bottom to select Continue to summary to confirm if the configurations are correct and then Create Token, you will see your token on the next page.

3. Configure your DNS record

  • Go back to your domain's home page (hope that Overview page is still opened at this point) and click on DNS on left side panel.
  • Click on Add record on Records page and add below details:
TypeNameIPv4 AddressProxy statusTTL
A*99.83.190.102ProxiedAuto
A<domain.com>99.83.190.102ProxiedAuto
  • Note: The Name field should be a wild card record as that's needed for serverless workers.

Configuration inputs

Additional details for each inputs after clicking on Add integration under Cloudflare:

Integration name

A unique name within your organization. It will be used as a slug.

Integration display name

The name of integration shown on dashboard.

API token

Obtained from Cloudflare. The instruction above should walk you through how to get your API token.

Zone ID

Obtained from Cloudflare. You will need a valid domain on Cloudlfare.

Cloudflare project name

This operation is idempotent, it will create a cloudflare pages project on Cloudflare.

Set integration as default.

Make every repository deployed through Zephyr will attempt to deploy through this integration setting. This won't change until you delete this integration or add new integration as default.



How to test it

Navigate to our recipes to try one of the application, you should see your next deployment deployed through your designated domain! (if not come talk to us)

:::tip

If you are using our managed cloud (Cloudflare) or custom deployment integration through Cloudflare, when you are adding assets, naming your application in package.json or module federation configuration, make sure the name doesn't include capital letter to avoid query problem with Cloudflare.

:::

What will be created on your Cloudflare account?

After you add Cloudflare as your cloud provider on Zephyr, several properties will be modified and added on your Cloudflare account.

  1. KV Namespaces

Three namespaces will be added:

  • ze_snapshots
  • ze_files
  • ze_env
  1. Workers
  • ze-worker-for-static-upload (used for uploading and serving assets)
  1. Worker routes
  • ze.<domain.com>/* on worker ze-worker-for-static-upload
  • *-ze.<domain.com>/* on worker ze-worker-for-static-upload

Deployment and inspecting assets

Once you finish your first deployment on Cloudflare, you can inspect your assets on Cloudflare.

Navigate to your cloudflare account's main dashboard page, you can click on Workers & Pages and then KV to inspect your assets by clicking on View next to ze_files.

INFO
  • ze_files stores your actual assets.
  • ze_envs stores you application's environment, access right etc.
  • ze_snapshot stores your application's snapshots comparing against previous build.
  • If you are deploying an application that's previously deployed through our managed cloud, you will need to run rm -rf ~/.zephyr before deployment.
  • If you faced issues while deploying Micro-frontend application, you can follow your complete guide on how to deploy Micro-frontend applications on Zephyr.

Clean uninstall and reset

Warning
  • Zephyr Cloud do not handle your API token's and any other properties related to your Cloudflare account's deletion.
  • Assets and information on your Cloudflare account are by default immutable. If you are performing a clean uninstall (as below), you previous deployed assets and information are unrecoverable.

If you want to delete your existing Cloudflare integration, you will need to finish below steps:

Delete Workers & Pages Projects

  1. Sign in to your Cloudflare account, on the left side of the navigation bar click on Workers & Pages.

  2. Find and click on ze-worker-for-static-upload, and then on the top navigation bar select Manage, click on Delete on this page.

  3. Go back to the Workers & Pages main page and find these two properties:

  • Cloudflare integration name: created by yourself under Cloudflare Project Name when you add new integration on Zephyr dashboard.
  • ze-worker-for-static-upload: created by us when you add new integration on Zephyr.

Choose both projects and select Manage on the top when you are in the project. Click on the Delete button.

Delete KV namespace

  1. Under Workers & Pages on the left navigation bar on the main dashboard, select KV.

  2. Select KV namespaces with below names:

  • ze_envs
  • ze_snapshots
  • ze_files
  1. Click on ··· on the right of each items and select Delete.

Delete Worker Routes

  1. On the main dashboard, select the domain you added to Zephyr dashboard for Deployment integration.

  2. Choose Workers Routes on the left side of the navigation bar. Find the Worker routes with prefix ze and *-ze and click on Edit.

  3. On the pop up modal select Remove.

Delete Deployment Integration

  1. Log into your account and select the organization associated with the deployment integration you want to delete.

  2. Select Settings on the organization dashboard. On the left side choose Deployment Integration.

  3. Choose the name of integration you want to delete and select Remove on the next page.

What's next?