Deploying Flutter Web builds to Cloudflare Pages
in Blog,
by Marnix Kok
last published on 20 September 2023
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 README.md for build instructions.)
endif
usage:
@echo "Use `make build` to build the web version of the Flutter app. It will be available in `target/`"
clean:
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