Building a Flutter Web Container

A couple years ago, I was doing a lot of flutter development and ended up writing a blog post about how to containerize a flutter web app. Unfortunately, I was hosting my site with squarespace at the time, and no longer have access to any of the blog posts I made.

On the bright side; however, I've decided to re-write the post. And this time it's in source control!

Setup​

Before we can containerize anything, we need to make sure the required software is installed. You can follow these instructions for setting up Flutter, and these for installing docker.

Create a Flutter Project​

The first thing we need to do is create a flutter project. You can do this in VS Code by hitting

ctrl + shift + p

and selecting "Flutter - New Project". We'll want to choose "Create an Application" and select a directory for it.

This will create the default counter application, and for this tutorial we'll leave it at that, since this is more about getting it running with docker.

Build and Run the Application​

This is optional, but before throwing docker in the mix, I like to make sure that everything builds and runs normally. To do so, I run the following two commands:

flutter build web
flutter run

Building the Dockerfile​

Now that we know everything builds and runs, we can create the dockerfile. In the root directory, create a new Dockerfile.

#Stage 1 - Install dependencies and build the app in a build environment
FROM debian:latest AS build-env

# Install flutter dependencies
RUN apt-get update
RUN apt-get install -y curl git wget unzip libgconf-2-4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3 sed
RUN apt-get clean

# Clone the flutter repo
RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter

# Set flutter path
ENV PATH="${PATH}:/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin"

# Run flutter doctor
RUN flutter doctor -v
RUN flutter channel master
RUN flutter upgrade

# Copy files to container and build
RUN mkdir /app/
COPY . /app/
WORKDIR /app/

RUN flutter build web

# Stage 2 - Create the run-time image
FROM nginx:1.21.1-alpine
COPY --from=build-env /app/build/web /usr/share/nginx/html

Create the Container​

To get the container running, we first have to build an image.

docker build -t flutter-web .

This builds an image called flutter-web and uses the current directory as the context for the Dockerfile

If everything completed successfully, we then run the container.

docker run -d -p 8080:80 --name flutter-web flutter-web

Here, we're telling docker to create a container called flutter-web using the flutter-web image, and to run it in detached mode while mapping our local port 8080 to the containers port 80.

Now, if you navigate to http://localhost:8080, you should see the demo flutter app.

When you want to stop it, run

docker stop flutter-web