When Flutter 2.2 meet the FREE Azure tier
(This article was inspired by a good article posted by HIMANSHU SHARMA, but differ for the deployment scenario on Azure)
When it comes time to deploy your Flutter Web app, the natural choice is often Firebase Hosting.
But what about Azure ?
This article is a step by step to deploy your latest idea that turn out to be a Flutter App as an Azure Static Web App.
I will assume that you already have Flutter setup properly! Otherwise you can start there: https://flutter.dev/docs/get-started/codelab
So, let’s deploy the demo app…if you are using Visual Studio Code, this is simple as:
From the terminal you can type:
flutter create .Once the creation magic step is done, you can test locally that everything is running smoothly on either Chrome or Edge.
flutter run -d chrome
(the -d flag is to specify the device to run on)If you can see the app running on the browser, it’s time to build it!
flutter build webIn this tutorial we will commit the build/web directory on our repo…(just make sure the directory is not in the .gitignore)
Sounds crazy? It is! Don’t do that in production! But for the sake of this article, I just want to show the azure automation portion of a CI/CD process.
If you want to automate the build process step, you can look at https://github.com/subosito/flutter-action.
You will find a lot of good articles to achieve that.
Azure fun time
(I will assume that you have a valide subscription with Microsoft)
The first step if to create a resource of type Static Web App. (as of writing this is in Preview)
- Select a valid Subscription
- Select the Resource Group you want this resource to belong
- I selected GitHub to test the automatic deployment…
The important part here is you need to select the custom build Presets. Maybe one day Microsoft will add Flutter as a preset….in the mean time, for this demo, we need to push the build/web directory into GitHub…
The App location, enter: build/web
You will now see your resource created like these. You can see the public URL. Just one more step and the magic will happen to complete the automation…
The resource creation process add a file in your repository, store in a .github/workflows directory.
Locate in the file the Build and Deploy section and add this line:
skip_add_build: true
When you will push you changes in the branch you selected for your repository. You can now click on the GitHub action (see the green marker)
As soon as the GitHub action is completed with success you can now see your app available to the entire world !
