Introduction

Hey everyone, I am Hasnain Makada and I am currently a Rotational Super Writer at Showwcase where I create content on tech and educate the community regarding DevOps and Flutter.

In this blog, I will show you how you can deploy your Flutter web app to Azure App service and scale it. we're going to see the step-by-step procedure on how to do that.

Prerequisites required

• Flutter Installed on the system
• Node JS installed on the system
• Azure Subscription Required

User is required to have basic knowledge about how Flutter and how azure work and also how to create a web app on Azure, If you don't know how to create it, check out this blog

So without wasting any more time, let's get started 🔥

Creating your Flutter app

Let's start creating our Flutter web app. Create a new directory and open it inside your terminal and run flutter config channel-beta This will enable the beta channel for you to build your app.

Now run flutter config --enable-web to enable the web support to run the Flutter applications.

Now create the Flutter app by running flutter create web_app and after it has been created successfully, build the release apk of it, flutter build web

And run it on any of your browsers flutter run -d edge --web-renderer html this will run the web application in HTML mode of the browser, so it will render fastly as the changes happen.

The above application is the boilerplate code which is generated by Flutter itself, I've converted it to a web app so that we can publish it inside the Azure web app.

Creating the web app inside Azure

Now go to the Azure portal and create a resource over there, Note that everything in Azure is a resource.

You'll be redirected to the Azure marketplace, select the web app resource from the market and create a web app and fill in all the details from the below image 👇

in

After filling in all the details successfully, Click on create + review and review all the details which you fill in. Click on Create and wait for a few minutes till your resource is deployed successfully.

Now go to your resource and click on the preview URL 👇

Integrating the Flutter app inside Azure

Now that our web app is set up successfully, we now have to push our code inside the web app but first, we have to push our code inside GitHub, you can create a fork of the below repo 👇

Now go to the deployment centre inside your web app from the left panel and integrate your GitHub repository with your web app

It will automatically detect all the details, you just have to select the specific repository inside which you've pushed your flutter code.

Click on Save and it will create a workflow file inside your GitHub repository.

Wait for a few minutes and your Flutter app is deployed successfully to Azure.

At last, delete all the resources which you created to avoid unnecessary costing.

FAQ's

1. How a Web Application in Flutter is Created?

In general, we first have to run the normal flutter create <project-name> command which will generate the basic Flutter counter app for us, then we have to enable the beta channel in Flutter and then we have to build the web release for Flutter by running flutter build web

2. Where is the web release of Flutter located?

The Flutter web release is situated inside the build directory

<project-name>/build/web

3. Which is the main thing in Azure which will handle the deployments to your web app?

The deployment centre in Azure is the most important resource which will handle the connections to all your GitHub repositories and it will implement the CI/CD pipeline with the help of GitHub Actions.

Conclusion

In this blog, we understood how Flutter works with Azure and how can we deploy our Flutter web app to Azure with the help of GitHub Actions. If you have any further doubts related to DevOps and Flutter, feel free to reach out on Twitter and Showwcase