feat(project-environment): add mobile app docker build

Add:
- docker-compose.yml improvments (passing env vars as build args)
- Makefile for docker
- separated .env files for docker-compose, web and mobile
- apk build
- apk serving on web client
- devops documentation

Signed-off-by: Charles Madjeri <[email protected]>

.env.example

@@ -0,0 +1 @@
+VITE_PORT=8081

Makefile

@@ -0,0 +1,59 @@
+# Colors
+GREEN  := \033[0;32m
+YELLOW := \033[0;33m
+WHITE  := \033[0;37m
+RESET  := \033[0m
+
+# Target help text
+TARGET_MAX_CHAR_NUM=20
+
+.PHONY: start build stop restart reset logs clean help
+
+PROJECT_IMAGES = area-client-web area-client-mobile
+
+## Show help
+help:
+	@printf '\n'
+	@printf 'Usage:\n'
+	@printf '  $(YELLOW)make$(RESET) $(GREEN)<target>$(RESET)\n'
+	@printf '\n'
+	@printf 'Targets:\n'
+	@awk '/^[a-zA-Z\-\_0-9]+:/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpCommand = substr($$1, 0, index($$1, ":")-1); \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf "  $(YELLOW)%-$(TARGET_MAX_CHAR_NUM)s$(RESET) $(GREEN)%s$(RESET)\n", helpCommand, helpMessage; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)
+	@printf '\n'
+
+## Start containers in detached mode
+start:
+	docker compose up -d
+
+## Build and start containers in detached mode
+build:
+	docker compose up --build -d
+
+## Stop all containers
+stop:
+	docker compose down
+
+## Restart all containers
+restart: stop start
+
+## Reset containers, remove images and rebuild
+reset:
+	docker compose down
+	docker rmi $(PROJECT_IMAGES) -f
+	docker compose up --build -d
+
+## Show container logs
+logs:
+	docker compose logs -f
+
+## Clean up containers, images, volumes and orphans
+clean:
+	docker compose down --rmi local -v --remove-orphans

README.md

@@ -33,7 +33,16 @@ With AREA, you can create automated workflows that integrate various services an
 git clone [email protected]:ASM-Studios/AREA.git
 ```
 
-2. Install NPM packages
+2. Create .env files
+- Run the following command to create private env files
+```sh
+cp .env.example .env
+cp client_web/.env.local.example .env.local
+cp client_mobile/.env.mobile.example .env.mobile
+```
+- Fill the .env, .env.web and .env.mobile files
+
+3. Install NPM packages
 ```sh
 cd AREA/client-web
 npm install

client_mobile/.env.mobile.example

@@ -0,0 +1,24 @@
+VITE_PORT=8081
+VITE_ENDPOINT=http://localhost:8080
+
+VITE_GOOGLE_CLIENT_ID=
+VITE_GOOGLE_CLIENT_SECRET=
+
+VITE_MICROSOFT_CLIENT_ID=
+
+VITE_LINKEDIN_CLIENT_ID=
+VITE_LINKEDIN_CLIENT_SECRET=
+
+VITE_SPOTIFY_CLIENT_ID=
+VITE_SPOTIFY_CLIENT_SECRET=
+
+# Server URLs
+API_URL=http://localhost:8080
+WEB_CLIENT_URL=http://localhost:8081
+MOBILE_CLIENT_URL=http://localhost:8082
+
+# OAuth credentials
+GITHUB_CLIENT_ID=your_github_client_id
+GITHUB_CLIENT_SECRET=your_github_client_secret
+
+# Add other environment variables as needed

client_mobile/.gitignore

@@ -41,3 +41,4 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+.env.mobile

client_mobile/Dockerfile

@@ -0,0 +1,26 @@
+FROM ghcr.io/cirruslabs/flutter:stable
+
+WORKDIR /app
+
+ARG VITE_PORT
+ARG VITE_ENDPOINT
+ARG VITE_GOOGLE_CLIENT_ID
+ARG VITE_GOOGLE_CLIENT_SECRET
+ARG VITE_MICROSOFT_CLIENT_ID
+ARG VITE_LINKEDIN_CLIENT_ID
+ARG VITE_LINKEDIN_CLIENT_SECRET
+ARG VITE_SPOTIFY_CLIENT_ID
+ARG VITE_SPOTIFY_CLIENT_SECRET
+ARG API_URL
+ARG WEB_CLIENT_URL
+ARG MOBILE_CLIENT_URL
+ARG GITHUB_CLIENT_ID
+ARG GITHUB_CLIENT_SECRET
+
+COPY . .
+
+RUN flutter pub get
+RUN flutter build apk --release
+
+RUN mv build/app/outputs/flutter-apk/app-release.apk build/app/outputs/flutter-apk/client.apk
+RUN chmod -R 755 build/app/outputs/flutter-apk/

client_mobile/pubspec.yaml

@@ -68,7 +68,7 @@ flutter:
 
   # To add assets to your application, add an assets section, like this:
   assets:
-      - .env
+      - .env.mobile
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
 

client_web/.env.local.example

@@ -0,0 +1,24 @@
+VITE_PORT=8081
+VITE_ENDPOINT=http://localhost:8080
+
+VITE_GOOGLE_CLIENT_ID=
+VITE_GOOGLE_CLIENT_SECRET=
+
+VITE_MICROSOFT_CLIENT_ID=
+
+VITE_LINKEDIN_CLIENT_ID=
+VITE_LINKEDIN_CLIENT_SECRET=
+
+VITE_SPOTIFY_CLIENT_ID=
+VITE_SPOTIFY_CLIENT_SECRET=
+
+# Server URLs
+API_URL=http://localhost:8080
+WEB_CLIENT_URL=http://localhost:8081
+MOBILE_CLIENT_URL=http://localhost:8082
+
+# OAuth credentials
+GITHUB_CLIENT_ID=your_github_client_id
+GITHUB_CLIENT_SECRET=your_github_client_secret
+
+# Add other environment variables as needed

client_web/.gitignore

@@ -27,3 +27,7 @@ dist-ssr
 *.sw?
 
 .vite/
+
+# Environment files
+.env
+.env.local

client_web/Dockerfile

@@ -16,51 +16,39 @@ RUN curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64" \
 
 
 ###----------------------- Build stage for Node.js application -----------------------###
-FROM node:18-alpine AS app-builder
+FROM node:latest AS builder
 
 WORKDIR /app
 
-# Copy certificates from cert-builder
-COPY --from=cert-builder /localhost* ./
-
-# Copy only package files first for better layer caching
-COPY package*.json ./
+ARG VITE_PORT
+ARG VITE_ENDPOINT
+ARG VITE_GOOGLE_CLIENT_ID
+ARG VITE_GOOGLE_CLIENT_SECRET
+ARG VITE_MICROSOFT_CLIENT_ID
+ARG VITE_LINKEDIN_CLIENT_ID
+ARG VITE_LINKEDIN_CLIENT_SECRET
+ARG VITE_SPOTIFY_CLIENT_ID
+ARG VITE_SPOTIFY_CLIENT_SECRET
+ARG API_URL
+ARG WEB_CLIENT_URL
+ARG MOBILE_CLIENT_URL
+ARG GITHUB_CLIENT_ID
+ARG GITHUB_CLIENT_SECRET
+
+COPY ./package*.json ./
 RUN npm install
-
-# Copy source files and build
 COPY . .
-RUN npm run build
-
-
-###----------------------- Python tools stage -----------------------###
-FROM alpine:3.19 AS tools-builder
 
-# Install Python and tools
-RUN apk add --no-cache \
-    python3 \
-    py3-virtualenv \
-    py3-pip
-
-# Setup Python environment
-RUN python3 -m venv /opt/venv
-ENV PATH="/opt/venv/bin:$PATH"
-RUN pip3 install --no-cache-dir sphinx sphinx_rtd_theme
+RUN npm run build
 
 
 ###----------------------- Production stage -----------------------###
-FROM nginx:alpine
+FROM nginx:alpine AS production
 
-# Create directory for mobile builds
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 RUN mkdir -p /usr/share/nginx/html/mobile_builds
 
-# Copy production assets
-COPY --from=app-builder /app/dist /usr/share/nginx/html
-COPY --from=cert-builder /localhost* /etc/nginx/certs/
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-# Create volume mount point for shared mobile builds
-VOLUME /usr/share/nginx/html/mobile_builds
-
-EXPOSE 8081
+EXPOSE ${VITE_PORT}
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

client_web/nginx.conf

@@ -4,11 +4,14 @@ server {
 
     location / {
         root /usr/share/nginx/html;
+        index index.html index.htm;
         try_files $uri $uri/ /index.html;
     }
 
     # Serve mobile client binary
     location /client.apk {
         alias /usr/share/nginx/html/mobile_builds/client.apk;
+        add_header Content-Type application/vnd.android.package-archive;
+        add_header Content-Disposition attachment;
     }
 }

docker-compose.yml

@@ -1,32 +1,63 @@
 services:
-  # server:
-  #   build: ./server
-  #   ports:
-  #     - "8080:8080"
-  #   networks:
-  #     - app_network
-
-  # client_mobile:
-  #   build: ./client_mobile
-  #   volumes:
-  #     - client_build:/app/build
-  #   networks:
-  #     - app_network
+  area-client-mobile:
+    build:
+      context: ./client_mobile
+      dockerfile: Dockerfile
+      args:
+        - VITE_PORT
+        - VITE_ENDPOINT
+        - VITE_GOOGLE_CLIENT_ID
+        - VITE_GOOGLE_CLIENT_SECRET
+        - VITE_MICROSOFT_CLIENT_ID
+        - VITE_LINKEDIN_CLIENT_ID
+        - VITE_LINKEDIN_CLIENT_SECRET
+        - VITE_SPOTIFY_CLIENT_ID
+        - VITE_SPOTIFY_CLIENT_SECRET
+        - API_URL
+        - WEB_CLIENT_URL
+        - MOBILE_CLIENT_URL
+        - GITHUB_CLIENT_ID
+        - GITHUB_CLIENT_SECRET
+    volumes:
+      - area-client-data:/app/build/app/outputs/flutter-apk
+    networks:
+      - area-network
+    env_file:
+      - ./client_mobile/.env.mobile
 
-  client_web:
-    build: ./client_web
+  area-client-web:
+    build:
+      context: ./client_web
+      dockerfile: Dockerfile
+      args:
+        - VITE_PORT
+        - VITE_ENDPOINT
+        - VITE_GOOGLE_CLIENT_ID
+        - VITE_GOOGLE_CLIENT_SECRET
+        - VITE_MICROSOFT_CLIENT_ID
+        - VITE_LINKEDIN_CLIENT_ID
+        - VITE_LINKEDIN_CLIENT_SECRET
+        - VITE_SPOTIFY_CLIENT_ID
+        - VITE_SPOTIFY_CLIENT_SECRET
+        - API_URL
+        - WEB_CLIENT_URL
+        - MOBILE_CLIENT_URL
+        - GITHUB_CLIENT_ID
+        - GITHUB_CLIENT_SECRET
     ports:
-      - "8081:8081"
+      - "${VITE_PORT}:${VITE_PORT}"
     volumes:
-      - client_build:/usr/share/nginx/html/mobile_builds
-    # depends_on:
-    #   - client_mobile
-    #   - server
+      - area-client-data:/usr/share/nginx/html/mobile_builds
+    depends_on:
+      - area-client-mobile
     networks:
-      - app_network
+      - area-network
+    env_file:
+      - ./client_web/.env.local
 
 volumes:
-  client_build:
+  area-client-data:
+
 
 networks:
-  app_network:
+  area-network: