Flutter for Web: How to Deploy a Flutter Web App?
Tags: flutter, flutterweb, deployment, firebase
Published: 2020-03-19 12:23:12

With the [stable release of Flutter 1.12](https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d), Flutter for [web](https://flutter.dev/web) is now in the beta channel. But ahead of a beta release, the community has already started building for Flutter web.

While [building web apps](https://www.solutelabs.com/web-app-development), deploying it is one of the most essential tasks - be it is for internal QA purposes, for staging, or production environments. Before releasing the Flutter web app, it is required to create a release bundle and a few of the best practices to release, which are explained [here](https://flutter.dev/docs/deployment/web) in detail.

From my experience of building and deploying apps, I'm going to discuss the **Top 5 (IMO) Ways to Deploy Flutter Web Apps**. They are:

1. Firebase Hosting

2. Github Pages

3. Netlify

4. Codemagic Static Pages

5. AWS S3 (through codemagic)

#**#1: Firebase Hosting**

**Step 1**: Create a project on Firebase console
**Step 2**: Download [Firebase CLI](https://firebase.google.com/docs/cli#setup_update_cli)
**Step 3**: Login via CLI, execute the command 
`firebase login`

![-----](https://cdn-images-1.medium.com/max/1600/0*bFkJIUyOn_407TNw)

**Step 4**: Choose "Hosting" when asked for a feature

![----------](https://cdn-images-1.medium.com/max/800/0*v3DzMhwapepFJvgm)

**Step 5**: Then, Select an existing Project

![----------](https://cdn-images-1.medium.com/max/800/0*73Rguj13145sDAad)

**Step 6**: Choose *build/web* as a directory & configure as a single-page app

![----------](https://cdn-images-1.medium.com/max/800/0*vct25uAEHH80pwQg)

> *If you see, File build/web/index.html already exists. Overwrite?
Then select **NO**. So it will not generate a default index.html file*

**Step 7**: Deploy!

```sh
firebase deploy
```

![----------](https://cdn-images-1.medium.com/max/800/0*TZbn54zxI8A2ErFC)

#**#2: Github Pages**

**Pre-requisites**: Create a repo on Github.

**Step 1**: Use this pub

[peanut | Dart Package](https://pub.dev/packages/peanut)

Execute the command

```sh
flutter pub global run peanut:peanut
```

**Step 2**: Flutter web-related files will be generated to the separate branch **gh-pages** (Don't forget to push the branch origin)

**Step 3**: Change the GitHub pages source branch. 

**Go to**: Repository → Settings → Options → Github Pages → Source branch: select **gh-pages**

![----------](https://cdn-images-1.medium.com/max/800/0*JljqoS6XpEIYEXIZ)

**Step 4**: Web app will be deployed to

```sh
http(s)://<username>.github.io/<build>
```

#**#3: Netlify**

Pre-requisites: Create an account on [https://www.netlify.com/]()

##**Approach 1**:
**Step 1**: Drag & Drop build/web folder to dashboard

![----------](https://cdn-images-1.medium.com/max/800/0*7khrYud9xY9V2UM3)

**Step 2**: The web app will be deployed and the domain will be given to you.
**Step 3 (Optional)**: The web app can be connected with the custom domain/subdomain.

##**Approach 2:**
**Step 1:** Use the same peanut pub

[peanut | Dart Package](https://pub.dev/packages/peanut)

**Step 2**: Generate web-related files to the **gh-pages** branch
**Step 3**: Choose **New site from git** on the netlify dashboard.
**Step 4**: Choose the repository & select branch to deploy

![----------](https://cdn-images-1.medium.com/max/800/0*j5rHQ5X_xg8ULl_g)

**Step 4:** Deploy Site.

#**#4: Codemagic Static Pages**

**Step 1**: Connect repository to [https://codemagic.io/]()
**Step 2**: Go to Settings - Publish - Codemagic static pages
**Step 3**: Choose your custom subdomain

![----------](https://cdn-images-1.medium.com/max/800/0*96OS6qRm1Pb8xXm5)

**Step 4**: Trigger a build, on the success, it will be deployed to:


[https://sub-domain.codemagic.app/](https://checklist-app.codemagic.app/#/)

#**#5: Deploy on AWS S3 (via Codemagic)**

**Step 1**: Log in to your AWS Management Console.
**Step 2**: Click on your user name at the top right of the page.
**Step 3**: Click on the Security Credentials link from the drop-down menu.
**Step 4**: Find the Access Credentials section, and copy the latest Access Key ID.
**Step 5**: Click on the Show link in the same row, and copy the Secret Access Key.
**Step 6**: Choose repo on codemagic
**Step 7**: Go to Settings - Publish - AWS S3 Bucket

![----------](https://cdn-images-1.medium.com/max/800/0*HW8jcvNYbkekF7BA)

**Step 8**: Fill the Access key ID, secret access Key, and Bucket name
**Step 9**: Trigger a build, on the success, it will be deployed to an S3 bucket

We have enough approaches to deploy/release a Flutter web app, that can be chosen for the QA environment as well as the production releases. Connecting it with CI/CD like Codemagic will reduce the repeating effort of manual deployments.