From Flutter App to PWA: The Easiest Way to Share a Side Project

Tech Stories by Hadi — Mon, 08 Jun 2026 21:50:11 +0000

Turning My Flutter App into a PWA

Following up on my Smart Shower Meter project, I decided to make it a Progressive Web App (PWA) while still using Flutter.

👉 Read about the original project here: Never Built a Mobile App? Now We Can

👉 You can skip this guide and just try it first

Why?

I originally chose Flutter because it allowed me to build a cross-platform app from a single codebase.

But I quickly realised that getting an iOS version into the hands of friends for testing would take much longer than expected. Between App Store requirements, TestFlight, and developer fees, sharing a small hobby project felt more complicated than building it.

So I thought:

Why not just make it a PWA?

Users can open it directly in their browser and even install it on their device without going through an app store.

Since Flutter already supports web, the transition was surprisingly easy.

How?

The goal was simple: keep the existing Flutter app and make it easy to access, deploy, and update.

Like many developers these days, I started with coding agents and AI assistants to generate most of the setup. They got me most of the way there, but understanding the deployment stack still mattered when things broke (more on that later).

The final setup consists of:

Flutter Web
PWA support
Docker Compose
Coolify hosting
Automatic CI/CD

PWA Enabled

A Progressive Web App is basically a website that behaves like an app.

Users can:

Install it from their browser
Launch it from their home screen
Use it in a standalone window
Get faster loading through caching

Flutter already ships with most of the required web infrastructure, so enabling PWA support mostly came down to configuring the web build and ensuring the generated app included the proper manifest and service worker files.

The result feels surprisingly close to a native application for a project of this size.

Docker Compose

Once the web build worked, I wanted a deployment setup that could be reproduced easily.

Docker Compose became the single source of truth for running the application.

Benefits:

Consistent deployments
Version-controlled infrastructure
Easy server migration
Built-in health checks and configuration management

This means I can move the project to another server with minimal effort.

Coolify to Host It

Coolify is an open-source Platform as a Service (PaaS) that I use for most of my personal projects.

For this project I'm using its Docker Compose deployment option. By simply providing the repository URL and selecting Docker Compose as the build pack, Coolify handles the build and deployment process automatically.

It also integrates nicely with GitHub.

Every merge to main automatically triggers a deployment, giving me a simple CI/CD pipeline with almost no setup.

What Did I Learn?

Security? Never Heard of : )

One thing I learned quickly is that AI-generated infrastructure shouldn't be trusted blindly.

To make sure the setup was reasonably secure, I had to ask specific security questions and validate responses across different models and documentation sources.

This was mainly an experiment, so there may still be issues lurking around.

If you spot something questionable, I'd be happy to discuss it.

How to Debug in This Setup?

For this project I initially tried solving deployment issues exclusively through coding agents and chat interfaces.

A few hours later...

Nothing worked.

The setup involved Flutter, Docker, health checks, networking, and Coolify. Despite providing logs and screenshots, the agents kept insisting the problem was related to port configuration.

It wasn't.

Switching back to a more traditional debugging approach solved the issue in just a couple of attempts.

For the younger readers, by "traditional debugging" I mean:

Read the official docs
Find the relevant troubleshooting guide
Inspect the logs
Verify assumptions one by one

In my case, the answer was sitting in the Coolify troubleshooting documentation.

The application was failing its health checks.

After fixing that configuration, everything worked immediately.

AI can generate solutions quickly. Understanding the system helps you identify the correct problem.

Bonus: Feel free to check the commit history and pull request discussion to watch both me and several LLMs confidently debug the wrong thing for a while 😅

Try It Out

Feedback, bug reports, and contributions are always welcome.

DEV Community: Tech Stories by Hadi