Build and host your Flutter web apps on Codemagic

May 21, 2019

Earlier this month, we announced support for Flutter web apps when the Flutter team released the first technical preview of Flutter for web. Look here for a quick guide on how to build Flutter web apps on Codemagic. We’re taking Flutter for web seriously, so now it’s time for the first major feature release for web apps on Codemagic. Here it comes: Codemagic Static Pages! You can now build and test your Flutter web apps with Codemagic and publish the web app to Codemagic Static Pages without any configuration hassle.

Why publish to Codemagic Static Pages?

Here are some reasons why publishing to Codemagic Static Pages is a great option.

  • With Codemagic Static Pages, you can seamlessly deploy each new version of your Flutter web app to a custom subdomain of .codemagic.app without any extra cost.
  • Setting it up is a breeze — all you have to do is come up with a subdomain name and save the settings in Codemagic UI.
  • There is no need to trouble yourself with setting up publishing to third-party services or hosting static files in the repository.
  • Your QA or product team can have instant access to the latest version of the app as soon as it’s finished building on Codemagic. In addition to beta builds, you could also use the Codemagic page for hosting your production app!

Setting up publishing to Codemagic Static Pages

To set up publishing to Codemagic Static Pages, go to your app settings and expand the Publish step. You will then see the Codemagic Static Pages option, click it open.

By default, we suggest your app name as the subdomain name. However, you can modify the subdomain. There’s also an option to check Publish artifacts even if tests fail to publish the build even when one or more tests fail. If you only want to publish builds that pass the tests, leave this option unchecked.

Once you’re done with the setup, click Save. On saving, we’ll check if the subdomain name is available, and if it is, you’re good to go!

Now each time you run a build of your web app on Codemagic, you’ll see the web app artifact being published to the web page in Codemagic logs and can immediately access the app at the specified URL.

Wrap-up

As a dedicated CI/CD tool for Flutter apps, we’ll go where Flutter goes. Codemagic is your CI/CD tool of choice if you’re looking for a way to easily automate the process of building, testing and publishing Flutter apps for Android, iOS and web. If you’re interested in a real-world example of using Flutter to create web apps, you can read about Sasha Prokhorenko’s experience with creating a “not a nonsense web application” with Flutter and Dart and using Codemagic CI/CD to build it.

Codemagic CI for Flutter