Show off your Flutter/Dart web app with Peanut

tl;dr: Use peanut to build a Flutter/Dart web app into a gh-pages branch for easy deployment to GitHub Pages.

Why “peanut”? I honestly don’t remember. 🤷‍♂️

You’ve done the hard work to create a cool demo use Flutter for web and now you want to share it with the world. How?

GitHub Pages makes creating a companion site for your source easy, but you have to either

1. Build your sample into the docs directory on your master branch – not super hygienic for those that want to keep source and built artifacts separate.
2. Build your sample into a separate gh-pages branch. I’m a big fan of this solution, but it causes a problem: how do you build sources in one branch into output in another branch?

You can, of course, check out your repo twice into two separate directories on your local machine, but that just seems wrong.

Enter peanut– a CLI utility that you install via pub global activate, just like webdev.

Note: if you’re using the Flutter SDK, you can run peanut with flutter pub global run peanut.

If you’re successfully using webdev serve or pub run build_runner serve, peanut should “just work” – especially if your app is hosted in the web directory. If you’re using another directory – like example – then use the -d option to specify the directory.

Here’s a screen-capture of me running peanut on my box-plot example.

Short demo of using peanut on a Flutter for web example.

Check out the peanut package page for more information. You can find links there to checking out the source code and filing issues.

Can’t wait to see what you’re building!