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.
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
- A registered Netlify account and a team with Pro plan (to enable custom domain)
- A registered Zephyr account
- A Netlify site project with custom domain. (Read more about custom domain on Netlify and how to configure it, it can be a domain managed by Netlify or you will need to point your domain's name servers towards Netlify)
- Wildcard subdomain enabled for your custom domain like
*.domain.com- to ensure Zephyr's feature like versioning, rollback/roll-forward and more are available. (You will need to contact Netlify Support for a wildcard domain)
Wildcard subdomain on Netlify
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:
- The site must be on a Pro or above team. ✅
- The DNS must be managed by Netlify OR you need to bring a custom wildcard SSL certificate. ✅
- The site should not have any branch subdomains. ✅
- The site cannot use Automatic Deploy Subdomains, so please disable this feature if you are currently using it. ✅
- 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 where* can be your wildcard subdomain, the primary domain must bewww.bundlercorp.com(www can be replaced with any string). - 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.
Successful custom domain configuration example on Netlify
- You have a Netlify site and it's auto-assigned by Netlify.
- The domain is assigned or configured on Netlify as
random-very-long-string.netlify.app. - 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:
| Type | Name | Value | TTL |
|---|---|---|---|
| NETLIFY | bundlercorp.com | random-very-long-string.netlify.app | 3600 |
| NETLIFY | www.bundlercorp.com | random-very-long-string.netlify.app | 3600 |
| CNAME | *.bundlercorp.com | random-very-long-string.netlify.app | 3600 |
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
- Within the selected site's Domain management page (
https://app.netlify.com/sites/{site-name}/domain-management):
| Domain | Description |
|---|---|
bundlercorp.netlify.app | Netlify subdomain |
www.bundlercorp.com | ⭐️ Primary domain |
bundlercorp.com | Redirects automatically to primary domain |
- 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
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:
A unique name within your organization. It will be used as a slug.
The name of integration shown on dashboard.
Obtained from Netlify. The instruction above should walk you through how to get your API token.
Obtained from Netlify.
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)
After you add Netlify as your cloud provider on Zephyr, several properties will be modified and added on your Netlify site project.
- Blob storage
Three blob storage space will be added:
site:ze_snapshotssite:ze_filessite:ze_env
- 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.
- Function
ze_worker_for_upload(used for uploading assets)
- 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.
site:ze_filesstores your actual assets.site:ze_envsstores you application's environment, access right etc.site:ze_snapshotstores 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 ~/.zephyrbefore 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
- 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
-
Log into your account and select the organization associated with the deployment integration you want to delete.
-
Select Settings on the organization dashboard. On the left side choose Deployment Integration.
-
Choose the name of integration you want to delete and select Remove on the next page.