Deploy a web app written in Flutter Link to heading

Flutter is the best cross-platform UI SDK. You can write not only mobile apps (iOS, Android) but also desktop apps (Linux, macOS, Windows) and web apps with a single code base. I personally love a language that is strongly typed so that a compiler can catch errors at compile time. In this respect, the Dart language (on top of which Flutter framework is built) is much better than, say Python or Javascript.

Flutter Logo

Today, let’s create a demo web app in Flutter and deploy using Docker. Below is Dockerfile that creates a demo Flutter app and deploy.

FROM ubuntu AS build-env
RUN apt-get update
RUN apt-get install -y curl git unzip xz-utils zip libglu1-mesa
RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="${PATH}:/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin"
RUN flutter doctor -v
RUN flutter channel master
RUN flutter upgrade

WORKDIR /
RUN flutter create --platforms=web app
WORKDIR /app/
RUN flutter build web --web-renderer=canvaskit --release

FROM nginx
COPY --from=build-env /app/build/web /usr/share/nginx/html

All it does is install Flutter SDK, create a simple web-app, compile into html, css, js, wasm codes and host it using nginx. To build the image, run

docker build -t flutter-web-app .

And finally to run deploy it locally, run

docker run --rm -p 8080:80 flutter-web-app

You can always add -d option to detach, i.e, run the server in the background. Once the app is deployed, you can open up a new tab and enter http://localhost:8080 to see it in action.