Saniul Ahsan

#javascript, #python, #microservices, #automations, #blockchains, #devops

Flutter Web Build Deploy With Docker


Yes, you can definitely containerize a Flutter web application using Docker. Docker allows you to package your application along with its dependencies into a container, which can then be run consistently across different environments. Here’s a general outline of the steps to containerize a Flutter web application using Docker:

Create a Dockerfile: Start by creating a Dockerfile in the root directory of your Flutter web application. This file will contain instructions for building a Docker image for your application.

# Use an official Flutter Docker image as the base image
FROM cirrusci/flutter:latest AS builder

# Set the working directory
WORKDIR /app

# Copy the project files to the container
COPY . .

# Install dependencies and build the Flutter web app
RUN flutter build web

# Use a lightweight web server image to serve the built app
FROM nginx:alpine
COPY --from=builder /app/build/web /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build the Docker Image: Open a terminal and navigate to your application’s directory where the Dockerfile is located. Run the following command to build the Docker image:

docker build -t flutter-web-app .

Replace flutter-web-app with a suitable name for your Docker image.

Run the Docker Container: Once the image is built, you can run a container based on it:

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

This command maps port 8080 on your host machine to port 80 in the container. Adjust the port numbers as needed.

Access the Application: Open a web browser and navigate to http://localhost:8080 to access your Flutter web application running inside the Docker container.

Remember that the Docker image and container will include everything needed to run your application, so you don’t need to worry about installing dependencies on different machines. However, this example assumes a simple setup and might need modifications based on your specific application’s requirements.

Additionally, the example uses the nginx web server for serving the built Flutter web app. Depending on your needs, you might choose a different web server or adapt the configuration to your requirements.

Please note that the exact steps and configurations can vary based on your specific application and requirements. Always refer to the official Docker documentation and Flutter documentation for the most up-to-date and detailed information.

Here is the docker compose file:

version: '3'
services:
  flutter_app:
    container_name: flutter_app
    build:
      context: .
      dockerfile: ./dockers/Dockerfile
    ports:
      - '8080:80'

If you want to build for a specific version or want to build the web app using flutter tag then the docker file might be different. Here is how you can do it. I have used ubuntu 18 image here for build and selected flutter 3.10 version as flutter build version.

#Stage 1 - Install dependencies and build the app in a build environment
FROM ubuntu:18.04 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 python3 sed
RUN dpkg --add-architecture i386
RUN apt-get clean

# Clone the flutter repo
RUN git clone -b flutter-3.10-candidate.1 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"

# Copy files to container and build
RUN mkdir /app/
COPY . /app/
#COPY /lib/main.dart ./app/lib/main.dart
WORKDIR /app/
RUN flutter clean
RUN flutter pub get
RUN flutter packages pub run build_runner build --delete-conflicting-outputs
RUN rm -rf build/web
RUN flutter build web --web-renderer html --release

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