Deploying Flutter Web builds to Cloudflare Pages

Recently I've had to figure out a way to build a Flutter Web project, and get it deployed to Cloudflare Pages.

Given that the thing I'm building is likely to be multi-tenanted, and with multiple versions on the go, I would prefer to not rely on a single `main` branch for my deployments. Instead I'd like a branch identifying the customer and its application version to be deployed.

Using the following Makefile you can easily connect your Cloudflare Pages project to your Flutter deployment.


									%.PHONY: clean build usage
									CURRENT_BRANCH=$(shell git branch --show-current)
									ifndef BUILD_VERSION
									$(error BUILD_VERSION variable is not set. Please refer to the for build instructions.)
									    @echo "Use `make build` to build the web version of the Flutter app. It will be available in `target/`"
									    rm -rf target/*
									build: clean
									    echo "Current branch: ${CURRENT_BRANCH}"
									    git checkout -b ${RELEASE_BRANCH}-${BUILD_VERSION}
									    flutter build web --build-name ${RELEASE_BRANCH}-${BUILD_VERSION}
									    mkdir -p target
									    cp -r build/web/* target
									    mv target/assets/assets/* target/assets/
									    git add target/*
									    git commit -a -m "Build artifact for version: ${RELEASE_BRANCH}-${BUILD_VERSION}"
									    git push origin ${RELEASE_BRANCH}-${BUILD_VERSION}
									    git checkout ${CURRENT_BRANCH}

Make sure you connect the Pages project to your Github repository, then set `target/` as the root folder of the deployment.

To use the Makefile run it as follows:

									$ make build -e RELEASE_BRANCH=customer-name -e BUILD_VERSION=1.1.0


Also Read

Handlebars Templates in Cloudflare Workers

By Marnix Kok on 14 October 2022