Skip to content

Instantly share code, notes, and snippets.

@richard-flosi
Last active July 1, 2023 21:15
Show Gist options
  • Save richard-flosi/8b43c06732d296f1145b8f5d12bf194e to your computer and use it in GitHub Desktop.
Save richard-flosi/8b43c06732d296f1145b8f5d12bf194e to your computer and use it in GitHub Desktop.
Netlify Build command script to deploy a Flutter Web App
#!/bin/sh
FLUTTER_BRANCH=`grep channel: .metadata | sed 's/ channel: //g'`
FLUTTER_REVISION=`grep revision: .metadata | sed 's/ revision: //g'`
git clone https://github.com/flutter/flutter.git
cd flutter
git checkout $FLUTTER_BRANCH
git pull origin $FLUTTER_BRANCH
git checkout $FLUTTER_REVISION
cd ..
flutter/bin/flutter config --enable-web
flutter/bin/flutter build web
[build]
command = "./flutter-netlify-build.sh"
publish = "build/web"
@richard-flosi
Copy link
Author

richard-flosi commented Dec 16, 2019

FLUTTER_BRANCH and FLUTTER_REVISION are pulled from the flutter projects .metadata file. This is used to checkout the same branch and commit that you are using in development in order to run flutter build web. At the time of this writing Flutter Web is in beta and the beta branch will be checked out, then the specific revision.

The netlify.toml file is used to tell Netlify how to build your project and where to find the published files.

Make sure to make your flutter-netlify-build.sh file user executable with chmod u+x flutter-netlify-build.sh so that Netlify can execute your build command.

@radeksvarz
Copy link

Richard, thanks for the script.

Would you know how to enforce the higher Dart SDK version?

3:58:51 PM: Running "flutter pub get" in repo...
3:58:52 PM: The current Dart SDK version is 2.6.0-dev.5.0.flutter-d6c6d12ebf.
3:58:52 PM: Because project requires SDK version >=2.6.0 <3.0.0, version solving failed.
3:58:52 PM: pub get failed (1)

@richard-flosi
Copy link
Author

@radeksvarz Try updating your pubspec.yaml file. That is where your versions are defined.

@radeksvarz
Copy link

@richard-flosi I do have sdk: ">=2.6.0 <3.0.0" in the pubspec.yaml file as I need to have Dart SDK >= 2.6.

The question is how to convince Netlify's docker image to get the proper Dart version.

@richard-flosi
Copy link
Author

richard-flosi commented May 18, 2020

@radeksvarz Flutter comes bundled with Dart, I would recommend using the bundled version of Dart.

My build script has changed since this post and looks more like this now:

#!/bin/bash

# Setup flutter
FLUTTER=`which flutter`
if [ $? -eq 0 ]
then
  # Flutter is installed
  FLUTTER=`which flutter`
else
  # Get flutter
  git clone https://github.com/flutter/flutter.git
  FLUTTER=flutter/bin/flutter
fi

# Configure flutter
FLUTTER_CHANNEL=beta
FLUTTER_VERSION=v1.17.0
$FLUTTER channel $FLUTTER_CHANNEL
$FLUTTER version $FLUTTER_VERSION
$FLUTTER config --enable-web

# Setup dart
DART=`echo $FLUTTER | sed 's/flutter$/cache\/dart-sdk\/bin\/dart/'`
echo $DART

# e.g. Run a dart command
$DART foo/bar.dart

# Build flutter for web
$FLUTTER build web

echo "OK"

Notice how I'm getting the path and setting a DART variable which is then used to run dart commands.

i.e. By getting Flutter, you are already getting Dart and you should use that.

Hope this helps.

@radeksvarz
Copy link

@richard-flosi It looks promising. Thanks.

I have tried that now and it looks like Netlify is still enforcing its Dart instead of Flutter's one.

This is the updated code:

#!/bin/bash
FLUTTER_BRANCH=`grep channel: .metadata | sed 's/  channel: //g'`
FLUTTER_REVISION=`grep revision: .metadata | sed 's/  revision: //g'`

# Setup flutter
FLUTTER=`which flutter`
if [ $? -eq 0 ]
then
  # Flutter is installed
  FLUTTER=`which flutter`
else
  # Get flutter
  git clone https://github.com/flutter/flutter.git
  FLUTTER=flutter/bin/flutter
fi

cd flutter
git checkout $FLUTTER_BRANCH
git pull origin $FLUTTER_BRANCH
git checkout $FLUTTER_REVISION
cd ..

$FLUTTER config --enable-web

# Setup dart
DART=`echo $FLUTTER | sed 's/flutter$/cache\/dart-sdk\/bin\/dart/'`
echo $DART

$FLUTTER build web --release

with the result

6:30:04 PM: Downloading Dart SDK from Flutter engine 7d90779bb66f2c63444ee41b61c2d9a1c7b389ca...
...
6:30:12 PM: Building flutter tool...
6:32:29 PM: Setting "enable-web" value to "true".
6:32:29 PM: flutter/bin/cache/dart-sdk/bin/dart
6:32:30 PM: Downloading Material fonts...
...
6:32:35 PM: Running "flutter pub get" in repo...
6:32:35 PM: The current Dart SDK version is 2.6.0-dev.5.0.flutter-d6c6d12ebf.
6:32:35 PM: Because project requires SDK version >=2.6.0 <3.0.0, version solving failed.
6:32:35 PM: pub get failed (1)

@richard-flosi
Copy link
Author

What's in your .metadata file?
Are FLUTTER_BRANCH and FLUTTER_REVISION set right?
I'm not using this methodology anymore. The idea here was to parse .metadata from flutters output. I'm using a fixed version at this point.

I'm not sure exactly what is happening for you. Also, make sure that you clear the cache and retry the build in Netlify and maybe add some logging so you know if it's using a cached version of flutter or installing it from git clone.

@radeksvarz
Copy link

I like your first approach of checking the metadata file as it reflects what I set as needed on one place.

I believe the metadata part is ok.

.metadata file:

# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled and should not be manually edited.

version:
  revision: 682e6383aca3996644a5e5645089bbc8b6bf14c5
  channel: master

project_type: app

Thanks for tip on the logging. I will dig further into in.

@radeksvarz
Copy link

@richard-flosi You were right! The issue is in the .metadata file as it was not updated reflecting the current flutter version on dev.

My apologies.

@radeksvarz
Copy link

For others fighting with this.

.metadata file is not updated by flutter upgrade command.

I initially thought it reflects the current flutter version, which is not the case as it rather reflects the version of flutter at the time the project was created.

Looking around I honestly cannot find where the up to date project's flutter version is identified.

@shadowdogg
Copy link

What's in your .metadata file?
Are FLUTTER_BRANCH and FLUTTER_REVISION set right?
I'm not using this methodology anymore. The idea here was to parse .metadata from flutters output. I'm using a fixed version at this point.

I'm not sure exactly what is happening for you. Also, make sure that you clear the cache and retry the build in Netlify and maybe add some logging so you know if it's using a cached version of flutter or installing it from git clone.

Can you please share your new methodology

@richard-flosi
Copy link
Author

Here is the build script I just used to launch a new flutter web site on netlify:

build.sh

#!/bin/bash

# Get flutter
git clone https://github.com/flutter/flutter.git
FLUTTER=flutter/bin/flutter

# Configure flutter
FLUTTER_CHANNEL=master
FLUTTER_VERSION=v1.17.0
$FLUTTER channel $FLUTTER_CHANNEL
$FLUTTER version $FLUTTER_VERSION
$FLUTTER config --enable-web

# Build flutter for web
$FLUTTER build web

echo "OK"

@richard-flosi
Copy link
Author

@shadowdogg

Can you please share your new methodology?

I created a new gist to demonstrate here:
https://gist.github.com/richard-flosi/766040cec9bd2ea5da7a33bc01706de4

@Gene-Dana
Copy link

Hi there ! I'm pretty new to Flutter Web and Netlify and was wondering if perhaps you knew any resources that could explain this process ! How-to setup netlify with build scripts !

@richard-flosi
Copy link
Author

@ghost-codes
Copy link

how can i generate .g.dart files while deploying??

@richard-flosi
Copy link
Author

how can i generate .g.dart files while deploying??

I'm not sure myself, but it looks like this issue may address your question: google/json_serializable.dart#581

See comment here: google/json_serializable.dart#581 (comment)

@fisforfaheem
Copy link

How to fix this error: 12:18:29 PM: Exception: Failed to compile application for the Web.
12:18:29 PM: ​
12:18:29 PM: build.command failed
12:18:29 PM: ────────────────────────────────────────────────────────────────
12:18:29 PM: ​
12:18:29 PM: Error message
12:18:29 PM: Command failed with exit code 1: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release (https://ntl.fyi/exit-code-1)
12:18:29 PM: ​
12:18:29 PM: Error location
12:18:29 PM: In Build command from Netlify app:
12:18:29 PM: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
12:18:29 PM: ​
12:18:29 PM: Resolved config
12:18:29 PM: build:
12:18:29 PM: command: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
12:18:29 PM: commandOrigin: ui
12:18:29 PM: environment:
12:18:29 PM: - REVIEW_ID
12:18:29 PM: publish: /opt/build/repo/build/web
12:18:29 PM: publishOrigin: ui
12:18:31 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:18:31 PM: Failing build: Failed to build site
12:18:32 PM: Finished processing build request in 1m21.142s

@richard-flosi
Copy link
Author

@fisforfaheem This example is pretty old now and it looks like Netlify is reporting your build failed. I'd probably work on getting the build to work locally first and there is probably a better way to do this now. Have you read through the Flutter web docs here? https://docs.flutter.dev/platform-integration/web/building

@fisforfaheem
Copy link

fisforfaheem commented Jul 1, 2023 via email

@fisforfaheem
Copy link

i tried

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment