Deploy a Flutter Web App to Cloudflare Pages with GitHub Builds

2 min
Notes

Building a Flutter web app locally and uploading it to Cloudflare Pages by hand was tedious, so I moved the build into my GitHub repository and let Pages deploy it automatically.

What you need

You need a working Flutter project and a Cloudflare Pages project configured to build from a Git repository.

Configure Pages

I used a script to download Flutter and run the build command in Cloudflare’s build environment. Set the Build command to:

chmod +x build.sh && ./build.sh

Set the Build output directory to the Flutter web build output, /build/web in my setup. If the app needs environment variables during its build, configure them under Variables and Secrets.

Configure the Flutter project

Optional environment variables

I used Envied to read environment variables during the build. Follow its README to configure it. This let me use different values, such as the API base URL, for development and production.

Build script

Create a file named build.sh in the repository:

#!/bin/bash

# Set the stable Flutter SDK download URL. Change the version as needed.
FLUTTER_URL="https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.32.2-stable.tar.xz"
FLUTTER_DIR="flutter"

echo "Downloading Flutter SDK..."
curl -O "$FLUTTER_URL"

echo "Extracting Flutter SDK..."
tar xf flutter_linux_3.32.2-stable.tar.xz

export PATH="$PWD/$FLUTTER_DIR/bin:$PATH"
flutter --version

flutter pub get
flutter pub run build_runner build
flutter build web --wasm

The script pins Flutter 3.32.2, the version I used when I wrote this post. If you change the SDK version, update both the download URL and the archive filename.

If the build succeeds, Cloudflare Pages should deploy the app. If it fails, start with the build log; the project configuration may also need attention.