# Flutter Web App Production Build: How to Build, Serve and Deploy to Any Hosting Platform


Flutter's web support has matured considerably, and deploying a Flutter app to the web follows a straightforward path once you understand the tooling. This guide walks through the full process — enabling web support, building a production release, serving it locally, and deploying it to a hosting platform.

---

## Step 1: Enable Flutter Web Support

First, verify that your Flutter installation has web support enabled:

```bash
flutter doctor
```

If web isn't listed as a supported platform, enable it:

```bash
flutter config --enable-web
```

You only need to do this once per Flutter installation.

---

## Step 2: Build the Production Release

Navigate to your Flutter project directory and run:

```bash
flutter build web
```

This compiles your app into a set of static web assets — HTML, JavaScript, CSS, and assets — optimized for production. The output lands in the `build/web/` directory.

For a build that uses CanvasKit (better rendering fidelity, slightly larger download):

```bash
flutter build web --web-renderer canvaskit
```

For a smaller initial download that uses the browser's built-in HTML renderer:

```bash
flutter build web --web-renderer html
```

If you're not sure which to use, start with the default (which is `canvaskit` for release builds) and test on your target devices.

---

## Step 3: Serve the App Locally Before Deploying

Flutter doesn't include a built-in web server, but you have several options for local testing.

**Quick test in Chrome (debug mode):**

```bash
flutter run -d chrome
```

For a build closer to production performance:

```bash
flutter run -d chrome --profile
```

**Serving the production build with Python:**

```bash
cd build/web
python3 -m http.server 8000
```

Open `http://localhost:8000` in your browser.

**Serving with Node.js:**

```bash
npm install -g http-server
cd build/web
http-server -p 8000
```

**Serving with Dart's dhttpd:**

```bash
dart pub global activate dhttpd
dhttpd --path build/web --port 8000
```

Any of these will serve the `build/web` folder as a static site. The Python option requires no additional installs if Python 3 is already on your system, which makes it the quickest option for a one-off check.

---

## Step 4: Deploy to a Hosting Platform

The `build/web/` directory contains everything needed to host your app — it's a standard set of static files. Any static hosting platform will work.

**Firebase Hosting** (recommended if you're already using Firebase):

```bash
firebase init hosting
# Point the public directory to build/web
firebase deploy
```

**Vercel:**

```bash
npm install -g vercel
cd build/web
vercel
```

**Netlify:**
Drag and drop the `build/web` folder into the Netlify dashboard, or use the CLI:

```bash
npm install -g netlify-cli
netlify deploy --dir=build/web --prod
```

**GitHub Pages:**
Copy the contents of `build/web` into your `gh-pages` branch, or use a GitHub Action to automate it on each push.

**AWS S3 + CloudFront:**
Upload `build/web` to an S3 bucket configured for static website hosting, then point CloudFront at it for CDN distribution.

---

## A Few Things Worth Knowing

**The base href matters.** If you're deploying to a subdirectory rather than the root of a domain, you'll need to set the base href at build time:

```bash
flutter build web --base-href /my-app/
```

Without this, routing and asset loading will break when the app isn't served from the root path.

**Routing on the server.** Flutter web uses client-side routing by default. If a user navigates directly to a deep link (e.g., `yoursite.com/profile/123`), the server needs to serve `index.html` for that path rather than returning a 404. Most hosting platforms have a configuration option for this — in Firebase it's a rewrite rule, in Netlify it's a `_redirects` file.

**Service worker caching.** Flutter web builds include a service worker for offline support. If you deploy an update and users aren't seeing it, they may have a cached version. The service worker handles cache invalidation automatically, but it can take a page refresh or two to propagate.

---

## Summary

Enable web support, run `flutter build web`, verify locally with a simple HTTP server, and deploy the `build/web` folder to any static hosting provider. The whole process takes a few minutes once it's set up, and subsequent deployments are even faster.