IFRCGo · tnagorra · Nov 8, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 7, 2024
diff --git a/.dockerignore b/.dockerignore
@@ -139,4 +139,5 @@ data/
 ./.tox
 
 backend/
+!backend/schema.graphql
 geographical_data/
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,6 +7,7 @@ on:
       - 'develop'
 
 env:
+  APP_ENVIRONMENT: testing
   APP_TITLE: ${{ vars.APP_TITLE }}
   APP_MAPBOX_ACCESS_TOKEN: ${{ vars.APP_MAPBOX_ACCESS_TOKEN }}
   APP_GRAPHQL_CODEGEN_ENDPOINT: ${{ vars.APP_GRAPHQL_CODEGEN_ENDPOINT }}
@@ -22,16 +23,18 @@ jobs:
   #     - uses: actions/checkout@v4
   #       with:
   #         submodules: true
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version: 20
-  #         cache: 'yarn'
-
-  #     - name: Install dependencies
-  #       run: yarn install --frozen-lockfile
-
+  #    - name: Install pnpm
+  #      uses: pnpm/action-setup@v4
+  #    - name: Install Node.js
+  #      uses: actions/setup-node@v4
+  #      with:
+  #        node-version: 20
+  #        cache: 'pnpm'
+  #    - name: Install dependencies
+  #      run: pnpm install
+  #
   #     - name: Run unimported
-  #       run: yarn unimported
+  #       run: pnpm unimported
   # fix use better tool, this is deprecated
   lint-js:
     name: Lint JS
@@ -41,32 +44,36 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: true
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'yarn'
-
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Lint Javascript
-        run: yarn generate && yarn lint:js
+        run: pnpm generate && pnpm lint:js
   css-lint:
     name: Lint CSS
     environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'yarn'
-
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Css Lint
-        run: yarn lint:css
+        run: pnpm lint:css
   typecheck:
     name: Typecheck
     environment: 'test'
@@ -75,16 +82,18 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: true
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'yarn'
-
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Typecheck
-        run: yarn generate && yarn typecheck
+        run: pnpm generate && pnpm typecheck
   build:
     name: Build
     environment: 'test'
@@ -94,13 +103,15 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: true
-      - uses: actions/setup-node@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'yarn'
-
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm install
 
       - name: Build
-        run: yarn generate && yarn build
+        run: pnpm generate && pnpm build
diff --git a/.github/workflows/publish-nginx-serve.yml b/.github/workflows/publish-nginx-serve.yml
@@ -0,0 +1,145 @@
+name: Publish nginx serve image
+
+on:
+  push:
+    branches:
+      - develop
+      - project/*
+
+permissions:
+  packages: write
+
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+
+    outputs:
+      docker_image_name: ${{ steps.prep.outputs.tagged_image_name }}
+      docker_image_tag: ${{ steps.prep.outputs.tag }}
+      docker_image: ${{ steps.prep.outputs.tagged_image }}
+
+    steps:
+      - uses: actions/checkout@main
+        with:
+          submodules: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🐳 Prepare Docker
+        id: prep
+        env:
+          IMAGE_NAME: ghcr.io/${{ github.repository }}
+        run: |
+          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|:|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
+
+          # XXX: Check if there is a slash in the BRANCH_NAME eg: project/add-docker
+          if [[ "$BRANCH_NAME" == *"/"* ]]; then
+              # XXX: Change the docker image package to -alpha
+              IMAGE_NAME="$IMAGE_NAME-alpha"
+              TAG="$(echo "$BRANCH_NAME" | sed 's|/|-|g').$(echo $GITHUB_SHA | head -c7)"
+          else
+              TAG="$BRANCH_NAME.$(echo $GITHUB_SHA | head -c7)"
+          fi
+
+          IMAGE_NAME=$(echo $IMAGE_NAME | tr '[:upper:]' '[:lower:]')
+          echo "tagged_image_name=${IMAGE_NAME}" >> $GITHUB_OUTPUT
+          echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          echo "tagged_image=${IMAGE_NAME}:${TAG}" >> $GITHUB_OUTPUT
+          echo "::notice::Tagged docker image: ${IMAGE_NAME}:${TAG}"
+
+      - name: 🐳 Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: 🐳 Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.ref }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-refs/develop
+            ${{ runner.os }}-buildx-
+
+      - name: 🐳 Docker build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          builder: ${{ steps.buildx.outputs.name }}
+          file: Dockerfile
+          target: nginx-serve
+          load: true
+          push: true
+          tags: ${{ steps.prep.outputs.tagged_image }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: 🐳 Move docker cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+  publish_helm:
+    name: Publish Helm
+    needs: publish_image
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Install Helm
+      uses: azure/setup-helm@v3
+
+    - name: Tag docker image in Helm Chart values.yaml
+      env:
+        IMAGE_NAME: ${{ needs.publish_image.outputs.docker_image_name }}
+        IMAGE_TAG: ${{ needs.publish_image.outputs.docker_image_tag }}
+      run: |
+        # Update values.yaml with latest docker image
+        sed -i "s|SET-BY-CICD-IMAGE|$IMAGE_NAME|" nginx-serve/helm/values.yaml
+        sed -i "s/SET-BY-CICD-TAG/$IMAGE_TAG/" nginx-serve/helm/values.yaml
+
+    - name: Package Helm Chart
+      id: set-variables
+      env:
+        IMAGE_TAG: ${{ needs.publish_image.outputs.docker_image_tag }}
+      run: |
+        # XXX: Check if there is a slash in the BRANCH_NAME eg: project/add-docker
+        if [[ "$GITHUB_REF_NAME" == *"/"* ]]; then
+            # XXX: Change the helm chart to <chart-name>-alpha
+            sed -i 's/^name: \(.*\)/name: \1-alpha/' nginx-serve/helm/Chart.yaml
+        fi
+
+        sed -i "s/SET-BY-CICD/$IMAGE_TAG/g" nginx-serve/helm/Chart.yaml
+        helm package ./nginx-serve/helm -d .helm-charts
+
+    - name: Push Helm Chart
+      env:
+        IMAGE: ${{ needs.publish_image.outputs.docker_image }}
+        OCI_REPO: oci://ghcr.io/${{ github.repository }}
+      run: |
+        OCI_REPO=$(echo $OCI_REPO | tr '[:upper:]' '[:lower:]')
+        PACKAGE_FILE=$(ls .helm-charts/*.tgz | head -n 1)
+        echo "# Helm Chart" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "Tagged Image: **$IMAGE**" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "Helm push output" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo '```bash' >> $GITHUB_STEP_SUMMARY
+        helm push "$PACKAGE_FILE" $OCI_REPO >> $GITHUB_STEP_SUMMARY
+        echo '```' >> $GITHUB_STEP_SUMMARY
diff --git a/Dockerfile b/Dockerfile
@@ -1,12 +1,14 @@
 # -------------------------- Dev ---------------------------------------
 
-FROM node:18-bullseye as dev
+FROM node:18-bullseye AS dev
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \
         git bash g++ make \
     && rm -rf /var/lib/apt/lists/*
 
+RUN npm install -g pnpm
+
 WORKDIR /code
 
 RUN git config --global --add safe.directory /code
@@ -15,10 +17,38 @@
 # -------------------------- Builder ---------------------------------------
 FROM dev AS builder
 
-COPY ./package.json ./yarn.lock /code/
+COPY ./package.json ./pnpm-lock.yaml /code/
 
 # TODO: patches are not working with this?
-RUN yarn install --frozen-lockfile --check-files --cache-folder .ycache && \
-    rm -rf .ycache
+RUN pnpm install
 
 COPY . /code/
+
+# -------------------------- Nginx - Builder --------------------------------
+FROM builder AS nginx-build
+
+# Dynamic configs. Can be changed with containers. (Placeholder values)
+ENV APP_TITLE=APP_TITLE_PLACEHOLDER
+ENV APP_ENVIRONMENT=APP_ENVIRONMENT_PLACEHOLDER
+ENV APP_MAPBOX_ACCESS_TOKEN=APP_MAPBOX_ACCESS_TOKEN_PLACEHOLDER
+ENV APP_GOOGLE_ANALYTICS_ID=APP_GOOGLE_ANALYTICS_ID_PLACEHOLDER
+ENV APP_GRAPHQL_API_ENDPOINT=https://APP-GRAPHQL-API-ENDPOINT-PLACEHOLDER.COM/
+
+# Build variables (Requires backend pulled)
+ENV APP_GRAPHQL_CODEGEN_ENDPOINT=./backend/schema.graphql
+
+RUN pnpm generate && pnpm build
+
+# ---------------------------------------------------------------------------
+FROM nginx:1 AS nginx-serve
+
+LABEL maintainer="IFRC"
+LABEL org.opencontainers.image.source="github.com/IFRCGo/alert-hub-web-app"
+
+COPY ./nginx-serve/apply-config.sh /docker-entrypoint.d/
+COPY ./nginx-serve/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY --from=nginx-build /code/build /code/build
+
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
+ENV APPLY_CONFIG__OVERWRITE_DESTINATION=true
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Web client for the [Alert Hub](https://alerthub.ifrc.org/) platform
 
 ### Prerequisites
 
-You can either use [`docker`](https://www.docker.com/) or [`yarn`](https://yarnpkg.com/) to locally run or build this application.
+You can either use [`docker`](https://www.docker.com/) or [`pnpm`](https://pnpm.io/) to locally run or build this application.
 
 ### Local setup
 
@@ -21,7 +21,7 @@ cd alert-hub-web-app
 
 ```bash
 # Skip if running through docker
-yarn install
+pnpm install
 ```
 
 #### 3. Setup environment variables:
@@ -40,7 +40,7 @@ You can contact IFRC team to get appropriate values for these variables
 #### 4. Run dev instance
 
 ```bash
-yarn start
+pnpm start
 # or
 docker-compose up
 ```

diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml
@@ -92,17 +92,14 @@ services:
       target: builder
     environment:
       NODE_OPTIONS: "--max_old_space_size=1024"
+      APP_GOOGLE_ANALYTICS_ID: ${FRONTEND_APP_GOOGLE_ANALYTICS_ID?error}
       APP_TITLE: ${FRONTEND_APP_TITLE:-IFRC Alert Hub}
-      APP_MAPBOX_ACCESS_TOKEN: ${FRONTEND_APP_MAPBOX_ACCESS_TOKEN?error}
-      APP_GRAPHQL_API_ENDPOINT: ${FRONTEND_APP_GRAPHQL_API_ENDPOINT?error}
-      APP_GRAPHQL_ENDPOINT: ${FRONTEND_APP_GRAPHQL_ENDPOINT?error}
       APP_ENVIRONMENT: ${FRONTEND_APP_ENVIRONMENT:-prod}
+      APP_GRAPHQL_API_ENDPOINT: ${FRONTEND_APP_GRAPHQL_API_ENDPOINT?error}
+      APP_MAPBOX_ACCESS_TOKEN: ${FRONTEND_APP_MAPBOX_ACCESS_TOKEN?error}
       APP_GRAPHQL_CODEGEN_ENDPOINT: ${FRONTEND_APP_GRAPHQL_CODEGEN_ENDPOINT?error}
-    env_file:
-      - .env
-    # TODO: Due to patch, we need yarn install for now. Try to resolve this in Dockerfile for builder
     command: |
-      sh -c 'yarn install && yarn generate && yarn build && rm -rf /client-build/* ; cp -r build/* /client-build/'
+      sh -c 'pnpm generate && pnpm build && rm -rf /client-build/* ; cp -r build/* /client-build/'
     volumes:
       - client_static:/client-build/
     profiles: [frontend]