How to Build and Serve a Flutter Web App for Production

Flutter is a powerful framework for building cross-platform apps, including web applications. If you’ve developed a Flutter app and want to release it on the web, this guide will walk you through the process of building and serving your Flutter web app for production.

---

Step 1: Enable Flutter Web Support

Before building for the web, ensure that Flutter’s web support is enabled on your system. Run the following command:

flutter doctor

If web support is not enabled, enable it with:

flutter config --enable-web

---

Step 2: Build the Web Release Version

Navigate to your Flutter project directory and run:

flutter build web

This will generate an optimized production build inside the build/web/ directory.

---

Step 3: Serve the Web App Locally

Unlike mobile apps, Flutter doesn’t have a flutter serve command. Instead, you can use the following methods to test your web app locally before deployment.

Option 1: Run in Chrome (Debug Mode)

For quick testing, run:

flutter run -d chrome

For better performance (closer to release mode), use:

flutter run -d chrome --profile

Option 2: Serve Using a Simple HTTP Server

After building the web version, you can serve it using an HTTP server.

Using Python (if installed)

cd build/web
python3 -m http.server 8000

Then, open http://localhost:8000 in your browser.

Using Node.js (if installed)

First, install http-server globally:

npm install -g http-server

Then, serve the app:

cd build/web
http-server -p 8000

Using Dart's dhttpd

If you prefer a Dart-based solution:

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

Then, visit http://localhost:8000 in your browser.

---

Step 4: Deploy Your Flutter Web App

Once your web app is ready, you can deploy the build/web/ folder to any static hosting service, such as:

• Firebase Hosting

    firebase deploy
  

• Vercel (vercel CLI tool required)

    vercel build && vercel deploy
  

• Netlify (drag and drop build/web into Netlify dashboard)

• GitHub Pages

• AWS S3 + CloudFront

---

Conclusion

Building and serving a Flutter web app is straightforward. Just ensure you have web support enabled, create a release build, and serve it locally before deployment. With various hosting options available, you can quickly make your Flutter web app accessible to users worldwide!

Do you have any questions or need help? Drop a comment below!