Together with the concept CF Workers, a function called Workers KV (key-value) data warehouse enables to save and serve data directly to a worker. With this feature, you can use workers as a database and repository that allows static websites to be viewed directly from the edge. In this article, we explore exactly how to provide a new simple static website supported by CloudFlare Workers.
This article assumes that you already have a CloudFlare account and that the account is linked to a domain. You also need the Workers Bundled plan, which offers the KV function. The following features are available and where they differ from the free plan.
- Minimum $ 5 fee and $ 0.50 / million requests per month
- 10 million requests before additional fees are needed
- Distribute up to 30 locations
- Free workers. Subdomain
- Up to 50 ms CPU time per request
- The free plan offers 10 ms
- Always the 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
Once you have purchased the CloudFlare Workers package, you can use Workers KV and the CloudFlare Workers Site feature.
Wrangler command line tool
To create a website distribution, CloudFlare has created Wrangler command line tools. Wrangler requires installation via either NPM (NodeJS package manager) or Cargo (Rust language package manager).
npm i @cloudflare/wrangler -g
cargo install wrangler
If you do not want to use the included OpenSSL binary, you can choose to use the OpenSSL system by installing with the following command line. This reduces the installation size.
cargo install wrangler --features sys-openssl
Create a website
Now that you have Wrangler installed and workers purchased, we can create our website. In this example we use
1.11.0 version of Wrangler, which introduced a newer and simpler authentication method. This also assumes that PowerShell is the shell environment used, but Wrangler works in anyone that supports NPM or Cargo installations.
Wrangler login and website creation
First we will log in to CloudFlare with Wrangler. To do this, we use the new
wrangler login feature. This will require the opening of a web page, and if you are already authenticated in CloudFlare, the authentication will be very fast. Otherwise, log in and Wrangler configures the API token automatically.
As you can see from the configuration site, there is one
.toml file that now contains your API token to make all subsequent actions seamless.
Generate the website
Then we generate the website itself. Use
generate command, we quickly create the site. At this time, it is also recommended that you navigate to the site directory and create a new archive via
git init. This is an optional step but is highly recommended.
wrangler generate --site worker-site
Wrangler creates the following website structure:
public– These are the static assets for your standard project
index.jsfile. This should not be edited unless you need to add additional features.
wrangler.toml– The configuration file that points to the account and project information.
You may notice the warning displayed about the need to update the project
wrangler.toml file. You must at least add
account_id value within
wrangler.toml file to preview the site.
To retrieve account ID, the easiest way is to navigate to the CloudFlare dashboard, click Workers, and find the account ID.
wrangler.toml and update
account_id value to your CloudFlare account value.
Preview the site
To verify that the site is working properly, you can use
preview command from Wrangler to generate the site and display the site in the browser. By adding
--watch parameter, any changes you make to the site will be immediately reflected in the browser window.
wrangler preview --watch
Distribute the site to production
The next step would be to distribute this site for production. There are only a small handful of configurations that need to be adjusted in
zone_id– The website to which the worker will be applied.
route– Where the worker will be applied to.
workers_devChange this value to
You can download
zone_id by navigating to the website to which you want to apply the worker in the CloudFlare dashboard, go to the overview page and find the zone ID under the API section.
To configure the route, you usually 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 the configuration should look like 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"
publish command to make the site public and create the Workers Site below the specified zone and route.
CloudFlare Workers websites offer powerful functionality with easy access to developers. Static websites are incredibly fast and secure due to lack of interactivity. Not all use cases solve this, but the ease of use and lack of third-party servers required to host the site make this feature very attractive!