---
title: "Flutter Web Deploy: How to Deploy a Flutter Web App?"
description: "Deploy your Flutter app to the web in no time! Explore step-by-step instructions and best practices for effective and smooth launch."
author: "Milind Mevada"
category: "Engineering"
published: "2020-03-17"
reading_time: "4 min read"
canonical: "https://www.solutelabs.com/blog/flutter-for-web-how-to-deploy-a-flutter-web-app"
---

# Flutter Web Deploy: How to Deploy a Flutter Web App?

With the stable release of Flutter 1.12, [Flutter for web](https://www.solutelabs.com/blog/flutter-for-web-an-ultimate-guide) is now in the beta channel. But ahead of a beta release, the community has already started building apps for Flutter web.

While building web apps, deploying them 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://docs.flutter.dev/deployment/web) in detail.

From my experience of building and deploying [Flutter web apps](https://www.solutelabs.com/blog/flutter-for-web-an-ultimate-guide), I’m going to discuss the **top 5 ways (step-by-step) 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: Deploy Flutter web app to Firebase Hosting**

The first way to deploy Flutter web apps is to host your [Flutter](https://www.solutelabs.com/blog/flutter-for-your-next-product-idea-everything-you-need-to-know) web app on Firebase and here are the steps to do so-

**Step 1:** Create a project on Firebase console
**Step 2:** Download Firebase CLI 
**Step 3:** Login via CLI, execute the command firebase login

![Deploy Flutter web app to Firebase Hosting - Create a project on Firebase console](https://cdn.sanity.io/images/0mnqm898/production/1b79190eddc4fc670f126473f7c9678e58e7b385-700x210.png?w=1200&q=90)

**Step 4:** Choose Firebase “Hosting” for Flutter web app when asked for a feature

![Deploy Flutter web app to Firebase Hosting - Choose Firebase “Hosting” for Flutter web app](https://cdn.sanity.io/images/0mnqm898/production/76159ca8c26a4173846d486d68ee71097e72ffbe-700x250.png?w=1200&q=90)

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

![Deploy Flutter web app to Firebase Hosting - Project setup](https://cdn.sanity.io/images/0mnqm898/production/d720e6f34ff24017ccf4b4735845d7778171d881-700x261.png?w=1200&q=90)

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

![Deploy Flutter web app to Firebase Hosting - Hosting setup](https://cdn.sanity.io/images/0mnqm898/production/ccd41e6046f08256d1b881c06449210a66957fc7-700x346.png?w=1200&q=90)

> f 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 Flutter web to Firebase!

```html
firebase deploy
```

![Deploy Flutter web app to Firebase Hosting - Deploy hosting](https://cdn.sanity.io/images/0mnqm898/production/628ee756438d566e2dcdd3d3291b265f1814c68d-700x412.png?w=1200&q=90)

---

## **#2: Deploy Flutter web app to Github Pages**

Another way to deploy [Flutter web apps is using Github Pages](https://www.solutelabs.com/blog/top-flutter-repositories) and here are its steps-

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

**Step 1:** Use this pub

[peanut | Dart Package ](https://pub.dev/packages/peanut) — Do you ever want to pub run build_runner build into another branch? This is your ticket. $ pub global activate peanut $…

Execute the command

```text
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**

![image](https://cdn.sanity.io/images/0mnqm898/production/9a0937190b9c26e59c0166532ffd4a3a354bb334-700x356.png?w=1200&q=90)

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

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

---

## #3: **Deploy Flutter web app to** Netlify

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

#### **Approach 1:**

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

![image](https://cdn.sanity.io/images/0mnqm898/production/b1efe9f08cc4f1bbe2b8b36ac1a36ff080251cc2-700x234.png?w=1200&q=90)

**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) — Do you ever want to pub run build_runner build into another branch? This is your ticket. $ pub global activate 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

![image](https://cdn.sanity.io/images/0mnqm898/production/2075b9d7db33904f786355824ee1703972aba29e-700x603.png?w=1200&q=90)

**Step 4:** Deploy Flutter Site to Netlify.

---

## **#4: Deploy Flutter web app to Codemagic Static Pages**

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

![image](https://cdn.sanity.io/images/0mnqm898/production/920b263858fc8ed1d769db2ba935bd6145198056-700x483.png?w=1200&q=90)

**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 Flutter web app 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

![image](https://cdn.sanity.io/images/0mnqm898/production/43f768f296b98f02c6f094977dc413d0bfd0461a-700x711.png?w=1200&q=90)

**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](https://codemagic.io/start/) will reduce the repeating effort of manual deployments.

## Frequently asked questions

### Where can I host a Flutter web app?

Top 5 ways to host Flutter web apps:

1. Firebase Hosting
2. Github Pages
3. Netlify
4. Codemagic Static Pages
5. AWS S3 (through codemagic)

### How do I deploy Flutter web on localhost?

You simply need to do a production build by using a webdev tool. to install webdev you need a pub tool

1. Go to the root folder of your project from terminal and do a build in release mode and run **flutter build web**
2. You should see a build folder **(/build/web)** in the root directory, just copy that folder and host it on a web server.

### How to deploy Flutter Web to my own server?

1. Go to the root folder of your project from terminal and do a build in release mode and run **flutter build web**
2. You should see a build folder (**/build/web**) in the root directory, just copy that folder, Your application is enclosed into a main.dart.js file.
3. Copy everything that is in the web folder to wherever you want to publish / host your application.

### How can I deploy a flutter web application to an existing website hosted on Firebase?

You can simply paste all the files that Flutter generates in your Firebase hosting's public directory. Follow these steps:

1. Go to the root folder of your project from terminal and do a build in release mode and run **flutter build web**
2. You should see a build folder **(/build/web)** in the root directory, just copy that folder, Your application is enclosed into a main.dart.js file.
3. **Copy build files in public directory**: If you already have a Firebase hosting project, then I assume your public directory already has some files.
4. Assume your new file name is page-3.html ,That page-3.html file will look for main.dart.js file in the same directory so if you move that JS file to any other directory, let's say, /js/main.dart.js then don't forget to change that in page-3.html
5. Try serving your website locally using firebase serve --only hosting command.
6. If the page returns 404 on /page-3 but works on /page-3.html then checkout this answer on [cleanUrls](https://stackoverflow.com/questions/44173400/firebase-hosting-url-needs-html-to-display-a-page).

### How can I deploy a flutter web application to Github

1. Go to the root folder of your project from terminal and do a build in release mode and run **flutter build web**
2. You should see a build folder **(/build/web)** in the root directory, just copy that folder, Your application is enclosed into a main.dart.js file.
3. Create a repo on Github.
4. Use package [https://pub.dev/packages/peanut](https://pub.dev/packages/peanut)​
5. flutter pub global run peanut:peanut
6. Flutter web-related files will be generated to the separate branch gh-pages (Don’t forget to push the branch origin)
7. Change the GitHub pages source branch.Go to: Repository → Settings → Options → Github Pages → Source branch: select gh-pages
8. Flutter Web app will be deployed to Github http(s)://<username>.github.io/<build>

### How can I deploy a flutter web application to AWS S3 (through codemagic)

1. Go to the root folder of your project from terminal and do a build in release mode and run **flutter build web**
2. You should see a build folder **(/build/web)** in the root directory, just copy that folder, Your application is enclosed into a main.dart.js file.
3. Log in to your AWS Management Console.
4. Go to Security Credentials link from the drop-down menu (username >Security Credentials)
5. Find the Access Credentials section, and copy the latest Access Key ID.
6. copy the Secret Access Key.
7. Choose repo on codemagic and Go to Settings — Publish — AWS S3 Bucket
8. Fill the Access key ID, secret access Key, and Bucket name
9. Trigger a build created from step 1, on the success, it will be deployed to an S3 bucket

### How can I deploy a flutter web application to Netlify

1. Go to the root folder of your project from the terminal and do a build in release mode and run **flutter build web**.
2. You should see a build folder **(/build/web)** in the root directory, just copy that folder, Your application is enclosed into a main.dart.js file.
3. Create an account on [https://www.netlify.com/](https://www.netlify.com/)​
4. Drag & Drop build/web folder to dashboard
5. The web app will be deployed and the domain will be given to you.
6. (Optional): The web app can be connected with the custom domain/subdomain.