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:
flutter doctor
If web isn't listed as a supported platform, enable it:
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:
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):
flutter build web --web-renderer canvaskit
For a smaller initial download that uses the browser's built-in HTML renderer:
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):
flutter run -d chrome
For a build closer to production performance:
flutter run -d chrome --profile
Serving the production build with Python:
cd build/web
python3 -m http.server 8000
Open http://localhost:8000 in your browser.
Serving with Node.js:
npm install -g http-server
cd build/web
http-server -p 8000
Serving with Dart's dhttpd:
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):
firebase init hosting
# Point the public directory to build/web
firebase deploy
Vercel:
npm install -g vercel
cd build/web
vercel
Netlify:
Drag and drop the build/web folder into the Netlify dashboard, or use the CLI:
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:
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.
