Cloudflare Serverless Application

The Cloudflare Serverless Application template scaffolds a Pulumi project that deploys a serverless web application to Cloudflare. It provisions a Cloudflare Worker for the application backend, exposed on its own workers.dev subdomain, and a Workers KV namespace that the Worker reads and writes to persist state between requests. Pulumi uploads the application code as a versioned Worker version — bound to the KV namespace — and rolls it out to all of the Worker’s traffic with a Workers deployment. The template ships with a placeholder visit-counter application so the project deploys end to end out of the box.

Before you begin#

Make sure you’ve installed Pulumi and configured your Cloudflare credentials.

Create a new project#

Create a new project using the template in the language of your choice:

TypeScript

TSPYGOC#YAMLHCL

$ mkdir my-serverless-app && cd my-serverless-app
$ pulumi new serverless-cloudflare-typescript

pulumi new walks you through creating and configuring a new project and stack. A stack is an instance of a project and you can have many of them — dev, staging, prod — each with its own configuration settings.

Then it asks for the template’s one setting:

TypeScript

TSPYGOC#YAMLHCL

Key	Description	Default
accountId	The Cloudflare account ID to deploy into	—

You can change these settings later with pulumi config set:

$ pulumi config set accountId <value>

The account ID has no default, so paste in your own Cloudflare account ID.

TypeScript

TSPYGOC#YAMLHCL

When setup completes, you’ll see a few key files:

• Pulumi.yaml names the project and the language it’s written in.
• Pulumi.dev.yaml holds the dev stack’s settings, including the values you just entered.
• index.ts is the program: the code that declares your cloud resources.

The application itself is worker.js, the JavaScript the Worker runs. It’s the same file whatever language the program is written in.

Deploy the project#

Deploy with pulumi up. It starts with a preview of what it’s about to create and asks before it changes anything. Choose yes to deploy.

$ pulumi up

Pulumi usually adds a random suffix to resource names, so the same program can deploy to more than one stack without names colliding. This is autonaming. This template sets its names instead: the Worker is my-app and the KV namespace is visit-counter. Cloudflare puts the Worker’s name in the app’s address, my-app.<your-subdomain>.workers.dev. To deploy a second stack to the same account, change both names in index.ts first.

When it finishes, Pulumi prints the stack’s outputs, values it only knows once the resources exist:

url

The fully-qualified HTTPS URL of the deployed application on its workers.dev subdomain.

Read one any time with pulumi stack output <name>, or pass it to another command. This opens the app in your browser:

$ open $(pulumi stack output url)

The app counts its visitors in Workers KV. Call it from the terminal with curl; it prints a greeting like Hello, world! You are visitor number 3. Run it again and the number goes up:

$ curl -s $(pulumi stack output url)

Customize the project#

The template’s only configuration setting is the account ID. The app’s behavior is in worker.js: on each request it reads count from the KV namespace bound as COUNTER, adds one, writes it back and returns the greeting.

To change what it says, edit the greeting in worker.js:

export default {
    async fetch(request, env) {
        const count = parseInt(await env.COUNTER.get("count")) + 1 || 1;
        await env.COUNTER.put("count", count.toString());
       return new Response("Hello, world! You are visitor number " + count + ".");
       return new Response("Hello again, you are visitor number " + count + ".");
    },
};

Deploy the change and call the app again. Pulumi uploads worker.js as a new Worker version and moves all traffic to it. The count carries on from where it was, because it’s stored in KV:

$ pulumi up
$ curl -s $(pulumi stack output url)

To see what else you can add, browse the Cloudflare provider in the Pulumi Registry.

Cleaning up#

You can cleanly destroy the stack and all of its infrastructure with pulumi destroy:

$ pulumi destroy

Learn more#

• Browse other architecture templates in the Templates gallery.
• Explore the Cloudflare provider API docs in the Pulumi Registry.
• Walk through Pulumi from the ground up in Pulumi Tutorials.
• Read the latest Cloudflare posts on the Pulumi blog.