How can I run a flutter web app using Docker?

Question

I have implemented my first (running) web app using Flutter and I would now to deploy it using Docker (which is rather new to me) to run it.

My folder structure is as follows: ${workdir}/Dockerfile, ${workdir}/docker-compose.yaml and ${workdir}/myprog where the latter is my Intellij project directory, thus containing the pubspec.yaml-file. The latter is the same as the demo-file.

Dockerfile is as follows:

FROM ubuntu:20.04

# Prerequisites
RUN apt-get update && apt-get install -y unzip xz-utils git openssh-client curl && apt-get upgrade -y && rm -rf /var/cache/apt

# Install flutter beta
RUN curl -L https://storage.googleapis.com/flutter_infra/releases/beta/linux/flutter_linux_1.22.0-12.1.pre-beta.tar.xz | tar -C /opt -xJ

ENV PATH "$PATH:/opt/flutter/bin"

# Enable web capabilities
RUN flutter config --enable-web
RUN flutter upgrade
RUN flutter pub global activate webdev
RUN flutter doctor

# Initialize web-app
WORKDIR /opt/web

# Copy it into docker container
COPY ./myprog/ ./

and docker-compose.yaml file is

version: '3.1'
services:
  webapp:
    container_name: myprog
    restart: always
    image: myprog
    ports:
      - 5001:5001 
    build:
      context: ./
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    command: ["flutter", "pub", "global", "run", "webdev", "serve", "0.0.0.0:5001"]

I successfully build it using docker-compose -f docker-compose.yaml build, but running it using docker-compose -f docker-compose.yaml up fails with the following error message

myprog    | webdev could not run for this project.
myprog    | Could not find a file named "pubspec.yaml" in "/opt/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_keyboard_visibility-3.2.2".
myprog    | pub finished with exit code 78

The full path of the pubspec.yaml is /opt/web/pubspec.yaml. How can I fix this issue?

Answer 1

I think you are forgetting to install dependencies packages in your docker file. From inside the Flutter project directory (the one containing the pubspec.yaml) you need to

RUN flutter pub get

before you build the application.

Also I think you should run the proper build command for web. Refering to the guide (https://flutter.dev/docs/get-started/web) you should

RUN flutter build web