How to Host a Flutter Web App on Microsoft Azure

Flutter has become an increasingly popular framework for developing cross-platform mobile applications. In addition to mobile apps, Flutter also supports web app development, enabling developers to create responsive and engaging web experiences. Microsoft Azure is a cloud computing platform that provides various services for hosting, deploying, and managing web applications. In this article, we'll guide you through the process of hosting a Flutter web app on Microsoft Azure.

Prerequisites

Before diving into the process, make sure you have the following:

1. A Flutter web app: Create a new Flutter web app or use an existing one.
2. Microsoft Azure account: Sign up for a free trial or use your existing account.
3. Azure CLI: Install the Azure Command-Line Interface (CLI) on your machine.

Build the Flutter Web App

To deploy the Flutter web app, first, you need to build it for production. Open a terminal and navigate to the root directory of your Flutter project. Run the following command:
flutter build web
This command will generate the necessary files for your web app in the build/web directory.

Set Up a Storage Account on Azure

A Storage Account in Azure is used to store and manage your web app's files. To create a new storage account, follow these steps:

1. Sign in to the Azure portal.
2. Click on "Create a resource" in the left sidebar.
3. Search for "Storage Account" and click "Create."
4. Fill in the required fields, such as subscription, resource group, account name, and location. Click "Review + create" and then "Create" to finalize.

Enable Static Website Hosting

Once your storage account is created, enable static website hosting:

1. Navigate to your storage account in the Azure portal.
2. Click on "Static website" under the "Settings" section.
3. Set "Static website" to "Enabled.".
4. Set "Index document name" to "index.html" and "Error document path" to "404.html."
5. Click "Save."

Deploy Your Flutter Web App

Now that your storage account is set up and static website hosting is enabled, you can deploy your Flutter web app. First, sign in to Azure CLI using:
az login
Once logged in, navigate to the build/web directory of your Flutter project and run the following command:
az storage blob upload-batch -s . -d '$web' --account-name <YourStorageAccountName> --account-key <YourStorageAccountKey>
Replace <YourStorageAccountName> and <YourStorageAccountKey> with the appropriate values from your storage account. You can find these in the "Access keys" section of your storage account settings in the Azure portal.

Access Your Flutter Web App

After deploying your web app, you can access it using the provided URL. In the Azure portal, navigate to your storage account and click on "Static website" under the "Settings" section. You'll see the "Primary endpoint" URL. Open this URL in a web browser to see your Flutter web app in action.
And voila your web app is hosted on Microsoft Azure!