How can I run a flutter web app using Docker?

5,499

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
Share:
5,499
Searles
Author by

Searles

Software Architect for some years. I also worked in akademia on programming and programming languages. I have implemented an inversible parser (which is actually pretty cool) and created two nice fractal apps for Android: Fract and Fractview. Likes: Kotlin, A philosophy of software design, Music by Sigur Ros, Bicycling. Dislikes: Mean people.

Updated on December 24, 2022

Comments

  • Searles
    Searles 7 minutes

    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?

  • Searles
    Searles about 2 years
    You are right, I thought that launching webdev would start the build. After correcting this I ran into further problems, in the end I used dhttpd as a web-server and everything works smoothly.