Cloudflare pages direct upload with stable preview urls

I switched all my projects to Monorepos this year, and I use Cloudlfare Pages intensively for hosting static websites. There is one small problem with Cloudlfare’s Github integration: you can only connect one project per repository. In a monorepo where I provide pages like a landing page, documentation and an app, this is a problem.

It’s good that you can also upload the assets directly. The problem with that: you lose some nice benefits:

• Stable preview URL
• PR comment with the links

And those are already quite nice benefits ;) So I started to rebuild the benefits myself. With the help of Wrangler and the Cloudflare API it is not difficult to achieve everything.

To get a stable URL I originally assumed that I would just get an updated stable URL with the help of the branch name.

npm i -g wrangler
cd ${{ env.ROOT_DIRECTORY }}
CF_PUBLISH_OUTPUT=$(wrangler pages deploy ${{ env.DIST_DIRECTORY }} --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT_NAME }} --branch="${{ steps.extract_branch.outputs.branch }}" --commit-dirty=true --commit-hash=${{ steps.meta.outputs.sha_short }} | grep complete)
echo "cf_deployments=$CF_PUBLISH_OUTPUT" >> "$GITHUB_OUTPUT"

Unfortunately, after a few test runs, I found that this is not the case. I didn’t deal with it further at this point, but tried to take an alternative approach:

• Search all deployments to a branch on every run.
• Delete all deployments
• Upload new assets

For reading and deleting deployments I wrote a small TypesScript program that I run in the CI pipeline.

Read out all previous branch deployments:

public async getDeployments(options?: { branch?: string }) {
    const { branch } = options || {}
    const { accountId, projectName, apiToken } = this.config

    const response = await fetch(
      `https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}/deployments`,
      {
        headers: {
          Authorization: `Bearer ${apiToken}`,
        },
      },
    ).then((res) => res.json())

    let deployments = response.result

    if (branch) {
      deployments = deployments.filter(
        (deployment) =>
          deployment.deployment_trigger?.metadata?.branch === branch,
      )
    }

    return deployments
}

Deleting a deployment:

public async deleteDeployment(id: string) {
    const { accountId, projectName, apiToken } = this.config
    await fetch(
      `https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}/deployments/${id}?force=true`,
      {
        method: 'DELETE',
        headers: {
          Authorization: `Bearer ${apiToken}`,
        },
      },
    ).then((res) => res.json())
}

The approach has another advantage: deployments that are no longer current are always cleaned up, since I am no longer interested in them anyway.