Along with the concept of CF Workers, a feature named Workers KV (key-value) data store enables saving and serving data directly to a worker. With this feature, you are able to use workers as a database and file repository enabling the serving of static sites directly from the edge. In this article, we are exploring exactly how to provision a new simple static site backed by CloudFlare Workers.
This article assumes that you already have a CloudFlare account, and that account is linked to a domain. You will also need the Workers Bundled plan, which offers the KV feature. The following features are available and where they differentiate from the free plan.
- Minimum $5 charge and $0.50/million requests per month
- 10 million requests before any additional charges are needed
- Deploy up to 30 sites
- Free workers.dev subdomain
- Up to 50ms CPU time per request
- The free plan offers 10ms
- Always lowest latency
- Access to Workers KV
- Up to 100 namespaces (think databases)
- 1 GB of storage ($0.50 per additional GB of storage)
- 10 million read operations, 1 million write, delete and list operations
- $0.50 per additional 1 million read operations and $5.00 per additional 1 million write, delete and list operations
After you have purchased the CloudFlare Workers Bundled plan, you will be able to utilize Workers KV and the CloudFlare Workers Site feature.
Wrangler Command-Line Tool
npm i @cloudflare/wrangler -g
cargo install wrangler
If you do not want to use the Cargo included OpenSSL binary, you can opt to use the system OpenSSL by installing using the following command-line. This will decrease the installation size.
cargo install wrangler --features sys-openssl
Creating a Site
Now that you have Wrangler installed and Workers purchased, we can create our site. In this example, we are using the
1.11.0 version of Wrangler, which introduced a newer and easier authentication method. This is also assuming that PowerShell is the shell environment in use, but Wrangler will work in any that supports NPM or Cargo installations.
Wrangler Login and Site Creation
First, we are going to login to CloudFlare using Wrangler. To do this, we use the new
wrangler login feature. This will prompt for a webpage to open, and if you are already authenticated in CloudFlare, the authentication will happen very quickly. Otherwise, log in and Wrangler will configure the API token automatically.
As you can see from the configuration location, there is a
.toml file that now contains your API token to make all subsequent operations seamless.
Generating the Site
Next, we will generate the site itself. Utilizing the
generate command, we will quickly create the site. At this point, it is also recommended that you navigate into the site directory and create a new repository via
git init. This is an optional step but highly recommended.
wrangler generate --site worker-site
Wrangler creates the following site structure:
public– This is the static assets for your project with a default
index.jsfile. This should not be edited unless you need to add additional functionality.
wrangler.toml– The configuration file that points to the account and project information.
You might notice the warning that is shown regarding the need to update the project
wrangler.toml file. At a minimum, you will need to add the
account_id value within the
wrangler.toml file to preview the site.
To retrieve the Account ID, the easiest way is to navigate to the CloudFlare dashboard, click on Workers, and locate the Account ID.
wrangler.toml and update the
account_id value to your CloudFlare accounts value.
Previewing the Site
To verify that the site is working properly, you can use the
preview command from Wrangler to generate the site and display the site within the browser. By adding the
--watch parameter, any changes that you make to the site will be immediately reflected in the browser window.
wrangler preview --watch
Deploying the Site to Production
The next step would be to deploy this site to production. There are only a small handful of configurations that need to be tweaked in the
zone_id– The website that the Worker will be applied to.
route– Where the Worker will be applied to.
workers_dev– Change this value to
You can retrieve the
zone_id by navigating to the website you want to apply the Worker to within the CloudFlare dashboard, going to the Overview page, and finding the Zone ID under the API section.
To configure the route, typically you will use one of two formats, which will serve a page under either a top-level domain or a sub-domain:
The end result of your
wrangler.toml configuration should look similar to this:
name = "worker-site" type = "webpack" account_id = "my-account-id" workers_dev = false route = "example.com/*" zone_id = "my-zone-id" **[**site] bucket = "./public"
Finally, run the
publish command to make the site public and create the Workers Site under the zone and route defined.
CloudFlare Workers Sites offer powerful functionality with easy developer access. Static sites are incredibly fast and secure due to the lack of interactivity. Not all use-cases are solved by this, but the ease of use and lack of third-party servers necessary to host the site make this feature very attractive!