Zephyr Cloud Docs

    Configure Netlify on Zephyr

    According to Netlify's documentation, Netlify is an enterprise-ready platform, with plug&play feature to help customers build fast and reliable web experiences.

    We will discuss how to configure Netlify as your default cloud provider with Blob storage, Netlify sites and Netlify functions to deploy and version your application with Zephyr Cloud, deliver content to your users using Netlify's Blob storage, Functions and Edge network.

    Launch Week 1 - Netlify's Blog on how to use Zephyr with Netlify.

    Tip

    To deploy a Micro-frontend application on Netlify, the bare minimum set up will only require you to configure one site on Netlify.

    In the land of Micro-Frontend and how Zephyr deploy applications, we map each individual components and serve them with edge functions via the wildcards of one domain (so you don't need to configure multiple site project on Netlify for a Micro-Frontend application).

    Pre-requisites

    Info

    Wildcard subdomain on Netlify

    How-to

    Because Zephyr Cloud handles deployments on your behalf, it needs the ability to create subdomains on your behalf, which means that you need to be able to configure a wildcard CNAME record on your domain, and you can’t use dynamic domain features from Netlify, such as branch deploys or deploy previews.

    Wildcard subdomains can be activated via contacting Netlify support, but there are a few requirements:

    1. The site must be on a Pro or above team. ✅
    2. The DNS must be managed by Netlify OR you need to bring a custom wildcard SSL certificate. ✅
    3. The site should not have any branch subdomains. ✅
    4. The site cannot use Automatic Deploy Subdomains, so please disable this feature if you are currently using it. ✅
    5. The primary domain of the website should be on the same level as the required wildcard domain. 🚨 For example: If you need the wildcard to be *.bundlercorp.com (*.ze.bundlercorp.com if you plan using . delimiter)⁣ where *⁣ can be your wildcard subdomain, the primary domain must be www.bundlercorp.com (www.ze.bundlercorp.comif you plan using. delimiter)⁣ (www⁣ can be replaced with any string).
    6. You need to configure the DNS for the wildcard subdomain even in case you are using Netlify DNS. You can follow the external DNS configuration for subdomains and add a CNAME entry with *⁣ as the hostname or any other value that you want. The value of this DNS entry should be the Netlify site address.

    Read more about subdomain in Netlify's Documentation.

    Successful custom domain configuration example on Netlify

    1. You have a Netlify site and it's auto-assigned by Netlify.
    2. The domain is assigned or configured on Netlify as random-very-long-string.netlify.app.
    3. You have a custom domain bundlercorp.com (an example domain) purchased from Netlify's team page.

    Example DNS settings

    Please contact Netlify support to enable wildcard domain.

    Below is an example of bundlercorp.com's DNS settings:

    TypeNameValueTTL
    NETLIFYbundlercorp.comrandom-very-long-string.netlify.app3600
    NETLIFYwww.bundlercorp.comrandom-very-long-string.netlify.app3600
    CNAME*.bundlercorp.comrandom-very-long-string.netlify.app3600

    or the following (if you plan using . delimiter)

    TypeNameValueTTL
    NETLIFYze.bundlercorp.comrandom-very-long-string.netlify.app3600
    NETLIFYwww.ze.bundlercorp.comrandom-very-long-string.netlify.app3600
    CNAME*.ze.bundlercorp.comrandom-very-long-string.netlify.app3600

    Example name servers

    Name servers are auto-managed by Netlify if you register a domain from Netlify, otherwise the value should be similar below. Read more.

    Below is an example of bundlercorp.com's name servers:

    Name servers
    dns1.p09.nsone.net
    dns2.p09.nsone.net
    dns3.p09.nsone.net
    dns4.p09.nsone.net

    Example site project's domain settings

    1. Within the selected site's Domain management page (https://app.netlify.com/sites/{site-name}/domain-management):
    DomainDescription
    bundlercorp.netlify.appNetlify subdomain
    www.bundlercorp.com⭐️ Primary domain
    bundlercorp.comRedirects automatically to primary domain
    1. Scroll down on this page to HTTPS section to verify if domain is has SSL/TLS certificate by clicking on Verify DNS configuration or Provide your own certificate.

    Read more about HTTPS settings on Netlify.

    If your domain has TLS/SSL certificate verified for both wildcard domain and primary domain, you should see the settings like so:

    HTTPS

    SSL/TLS certificate


    - Your site has HTTPS enabled ✅
    - Domains: *.bundlercorp.com, bundlercorp.com (additionally *.ze.bundlercorp.com if you plan using . delimiter)

    Configure and enable Netlify

    Log in to Zephyr dashboard

    After sign in, click on your selected organization.


    Find Netlify under Deployment Integration

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

    How to get credentials

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

    1. API token

    • On the upper right of your Netlify dashboard, click on your user profile and select User settings in the dropdown menu.
    • Choose Applications on the left and then New access token under Personal access tokens.
    • Give your personal access token a name and select an expiration period, then Generate token.
    • Give your API token a meaningfull name (who created this, what's this for etc).

    2. Site ID

    • Click on the selected site (or the one your just deployed through us) and choose Site configuration.
    • Under Site information, copy the Site ID.

    3. Custom domain settings

    Please follow custom domain configuration in Pre-requisites section on this page.

    Configuration inputs

    Below are the input fields on Zephyr's dashboard to enable Netlify as deployment cloud after clicking Add integration under Netlify:

    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.
    Delimiter

    Choose the delimiter for application subdomains: - (your deploy URL will be *-ze.your.domain) or . (your deploy URL will be *.ze.your.domain)

    API token

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

    Site ID
    Obtained from Netlify.
    Set integration as default.

    Make every repository deployed through Zephyr 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)

    Troubleshooting

    What will be created on your Netlify site project?

    After you add Netlify as your cloud provider on Zephyr, several properties will be modified and added on your Netlify site project.

    1. Blob storage

    Three blob storage space will be added:

    • site:ze_snapshots
    • site:ze_files
    • site:ze_env
    1. Environment variable

    An environment variable name JWT_SECRET will be created and being used by Zephyr to validate your access right when you are deploying applications.

    1. Function
    • ze_worker_for_upload (used for uploading assets)
    1. Edge function
    • ze_worker_for_serve (used for streaming your application assets and deliver it to browser).

    :::

    Deployment and inspecting assets

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

    Sign in to your Netlify team's main dashboard page and select your site project, you can then click on Blobs and then select site:ze_files to inspect your assets.

    Info
    • site:ze_files stores your actual assets.
    • site:ze_envs stores you application's environment, access right etc.
    • site: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 Netlify account's deletion.
    • Assets and information on your Netlify account are by default immutable. If you are performing a clean uninstall (as below), you previous deployed assets and information are unrecoverable.

    Delete Netlify site project

    At the moment, the only way to remove all the deployment assets, information and previous configuration on Netlify is by deleting your site project.

    On your site project's dashboard, click on Site configuration on the left, scroll down to find Delete site.

    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?

  • Add Environments

    Configure custom domain for your application with your deployment integration platform.