Merge pull request #699 from CodeForAfrica/ft/hurumap-setup

Climate Mapped Africa

.github/workflows/climatemappedafrica-deploy-dev.yml

@@ -0,0 +1,78 @@
+name: Climate Mapped Africa | Deploy | DEV
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "apps/climatemappedafrica/**"
+      - "Dockerfile"
+      - ".github/workflows/climatemappedafrica-deploy-dev.yml"
+
+concurrency:
+  group: "${{ github.workflow }} @ ${{ github.ref }}"
+  cancel-in-progress: true
+
+env:
+  DOKKU_REMOTE_BRANCH: "master"
+  DOKKU_REMOTE_URL: "ssh://[email protected]"
+  IMAGE_NAME: "codeforafrica/climatemappedafrica-ui"
+  NEXT_PUBLIC_APP_URL: "https://climatemapped-africa-ui.dev.codeforafrica.org"
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  APP_NAME: climatemapped-africa-ui
+
+jobs:
+  deploy:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [20.14]
+        os: [ubuntu-latest]
+    steps:
+      - name: Cloning repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          path: /tmp/.buildx-cache
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+
+      - name: Build Docker image
+        uses: docker/build-push-action@v3
+        with:
+          build-args: |
+            HURUMAP_API_URL=${{ secrets.HURUMAP_HURUMAP_API_URL }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+          context: .
+          target: climatemappedafrica-runner
+          push: true
+          tags: "${{ env.IMAGE_NAME }}:${{ github.sha }}"
+
+      # Temp fix
+      # https://github.com/docker/build-push-action/issues/252
+      # https://github.com/moby/buildkit/issues/1896
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+      - name: Push to Dokku
+        uses: dokku/[email protected]
+        with:
+          git_remote_url: ${{ env.DOKKU_REMOTE_URL }}/${{ env.APP_NAME }}
+          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
+          deploy_docker_image: ${{ env.IMAGE_NAME }}:${{ github.sha }}

Dockerfile

@@ -596,3 +596,94 @@ USER nextjs
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
 CMD ["node", "apps/vpnmanager/server.js"]
+
+
+
+# ============================================================================
+# Climate Mapped Africa
+# ============================================================================
+
+#
+# climatemappedafrica-desp: image with all climatemappedafrica dependencies
+# ---------------------------------------------------
+
+  FROM base-deps as climatemappedafrica-deps
+
+  COPY apps/climatemappedafrica/package.json ./apps/climatemappedafrica/package.json
+
+  # Use virtual store: https://pnpm.io/cli/fetch#usage-scenario
+  RUN pnpm --filter "./apps/climatemappedafrica" install --offline --frozen-lockfile
+
+  #
+  # climatemappedafrica-builder: image that uses deps to build shippable output
+  # ----------------------------------------------------------------
+
+  FROM base-builder as climatemappedafrica-builder
+
+  ARG NEXT_TELEMETRY_DISABLED \
+    # Next.js / Payload (build time)
+    PORT \
+    # Next.js (runtime)
+    NEXT_PUBLIC_APP_NAME=Climate Mapped Africa \
+    NEXT_PUBLIC_APP_URL \
+    NEXT_PUBLIC_SENTRY_DSN \
+    NEXT_PUBLIC_SEO_DISABLED \
+    NEXT_PUBLIC_IMAGE_DOMAINS="cms.dev.codeforafrica.org,hurumap-v2.s3.amazonaws.com" \
+    NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2 \
+    NEXT_PUBLIC_GOOGLE_ANALYTICS \
+    # Sentry (build time)
+    SENTRY_AUTH_TOKEN \
+    SENTRY_ENVIRONMENT \
+    SENTRY_ORG \
+    SENTRY_PROJECT \
+    # Custom (runtime)
+    HURUMAP_API_URL
+
+  # This is in app-builder instead of base-builder just incase app-deps adds deps
+  COPY --from=climatemappedafrica-deps /workspace/node_modules ./node_modules
+
+  COPY --from=climatemappedafrica-deps /workspace/apps/climatemappedafrica/node_modules ./apps/climatemappedafrica/node_modules
+
+  COPY apps/climatemappedafrica ./apps/climatemappedafrica
+
+  RUN pnpm --filter "./apps/climatemappedafrica" build
+
+  #
+  # climatemappedafrica-runner: final deployable image
+  # ---------------------------------------
+
+  FROM base-runner as climatemappedafrica-runner
+
+  ARG NEXT_PUBLIC_IMAGE_DOMAINS \
+    NEXT_PUBLIC_IMAGE_SCALE_FACTOR \
+    NEXT_PUBLIC_OPENAFRICA_DOMAINS \
+    NEXT_PUBLIC_SOURCEAFRICA_DOMAINS
+
+  ENV NEXT_PUBLIC_IMAGE_DOMAINS=${NEXT_PUBLIC_IMAGE_DOMAINS} \
+    NEXT_PUBLIC_IMAGE_SCALE_FACTOR=${NEXT_PUBLIC_IMAGE_SCALE_FACTOR} \
+    NEXT_PUBLIC_OPENAFRICA_DOMAINS=${NEXT_PUBLIC_OPENAFRICA_DOMAINS} \
+    NEXT_PUBLIC_SOURCEAFRICA_DOMAINS=${NEXT_PUBLIC_SOURCEAFRICA_DOMAINS}
+
+  RUN set -ex \
+    # Create nextjs cache dir w/ correct permissions
+    && mkdir -p ./apps/climatemappedafrica/.next \
+    && chown nextjs:nodejs ./apps/climatemappedafrica/.next
+
+  # PNPM
+  # symlink some dependencies
+  COPY --from=climatemappedafrica-builder --chown=nextjs:nodejs /workspace/node_modules ./node_modules
+
+  # Next.js
+  # Public assets
+  COPY --from=climatemappedafrica-builder --chown=nextjs:nodejs /workspace/apps/climatemappedafrica/public ./apps/climatemappedafrica/public
+
+  # Automatically leverage output traces to reduce image size
+  # https://nextjs.org/docs/advanced-features/output-file-tracing
+  COPY --from=climatemappedafrica-builder --chown=nextjs:nodejs /workspace/apps/climatemappedafrica/.next/standalone ./apps/climatemappedafrica
+  COPY --from=climatemappedafrica-builder --chown=nextjs:nodejs /workspace/apps/climatemappedafrica/.next/static ./apps/climatemappedafrica/.next/static
+
+  USER nextjs
+
+  # server.js is created by next build from the standalone output
+  # https://nextjs.org/docs/pages/api-reference/next-config-js/output
+  CMD ["node", "apps/climatemappedafrica/server.js"]

apps/climatemappedafrica/.env.template

@@ -0,0 +1,38 @@
+# Learn more about ENV variables at https://github.com/WebDevStudios/nextjs-wordpress-starter/wiki/env-variables
+
+# Tells Next.js we're in development mode. You do not need a Vercel account for this.
+VERCEL_ENV="development"
+
+NEXT_PUBLIC_APP_URL = 'http://localhost:3000'
+
+# Allows Node to work with local, self-signed certificates.
+NODE_TLS_REJECT_UNAUTHORIZED="0"
+
+# The domain where your images are hosted on.
+# See https://nextjs.org/docs/basic-features/image-optimization#domains
+NEXT_PUBLIC_IMAGE_DOMAINS="cms.dev.codeforafrica.org"
+
+# How to scale downloaded/shared images (width and height)
+# See https://vega.github.io/vega/docs/api/view/#view_toImageURL
+NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2
+
+# HURUmap URL
+HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"
+
+# openAFRICA domains
+# A comma-separated list of domains to openAFRICA (or any CKAN-based site domain)
+NEXT_PUBLIC_OPENAFRICA_DOMAINS=
+
+# sourceAFRICA domains
+# A comma-separated list of domains to sourceAFRICA (or any DocumentCloud
+# based site domain)
+NEXT_PUBLIC_SOURCEAFRICA_DOMAINS=
+
+# AWS S3 bucket for storing images
+S3_UPLOAD_KEY=AAAAAAAAAAAAAAAAAAAA
+S3_UPLOAD_SECRET=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+S3_UPLOAD_BUCKET=name-of-s3-bucket
+S3_UPLOAD_REGION=bucket-region-us-east-1
+
+#Analytics
+NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-xxxxxxxx"

apps/climatemappedafrica/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-commons-ui/next"],
+};

apps/climatemappedafrica/.lintstagedrc.js

@@ -0,0 +1 @@
+module.exports = require("eslint-config-commons-ui/.lintstagedrc");

apps/climatemappedafrica/CHANGELOG.md

@@ -0,0 +1 @@
+# hurumap

apps/climatemappedafrica/README.md

@@ -0,0 +1,34 @@
+# ClimateMapped.AFRICA
+
+ClimateMapped.AFRICA is a web application that provides a platform for users to view climate data for different regions in Africa.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/climatemappedafrica/contrib/dokku/Dockerfile

@@ -0,0 +1 @@
+FROM codeforafrica/climatemapped-africa-ui:0.0.1

apps/climatemappedafrica/jest.config.js

@@ -0,0 +1,16 @@
+const defaultConfig = require("jest-config-commons-ui/next");
+
+const { moduleNameMapper } = defaultConfig;
+
+module.exports = {
+  ...defaultConfig,
+  moduleNameMapper: {
+    ...moduleNameMapper,
+    "^@/climatemappedafrica/(.*)$": "<rootDir>/src/$1",
+    "^@/commons-ui/core/(.*)$":
+      "<rootDir>/../../packages/commons-ui-core/src/$1",
+    "^@/commons-ui/next/(.*)$":
+      "<rootDir>/../../packages/commons-ui-next/src/$1",
+  },
+  transformIgnorePatterns: ["<rootDir>/node_modules/(?!camelcase-keys)"],
+};

apps/climatemappedafrica/jest.setup.js

@@ -0,0 +1,12 @@
+/* eslint-env jest */
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn().mockImplementation(() => ({
+    asPath: "",
+    isReady: true,
+    push: jest.fn(),
+    query: {},
+  })),
+}));
+
+module.exports = require("@commons-ui/testing-library/jest.setup");

apps/climatemappedafrica/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
+      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/climatemappedafrica/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}

apps/climatemappedafrica/next.config.js

@@ -0,0 +1,63 @@
+const path = require("path");
+
+const PROJECT_ROOT = process.env.PROJECT_ROOT?.trim();
+const outputFileTracingRoot = PROJECT_ROOT
+  ? path.resolve(__dirname, PROJECT_ROOT)
+  : undefined;
+
+module.exports = {
+  experimental: {
+    outputFileTracingRoot,
+  },
+  images: {
+    domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
+      ?.map((d) => d.trim())
+      ?.filter((d) => d),
+    unoptimized:
+      process.env.NEXT_PUBLIC_IMAGE_UNOPTIMIZED?.trim()?.toLowerCase() ===
+      "true",
+  },
+  modularizeImports: {
+    // NOTE: only transform @mui/material and not any of sub-modules e.g. @mui/material/styles.
+    "@mui/material^": {
+      transform: "@mui/material/{{member}}",
+    },
+  },
+  output: "standalone",
+  reactStrictMode: false,
+  transpilePackages: ["@commons-ui/core", "@commons-ui/next"],
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        "@svgr/webpack",
+        {
+          loader: "svg-url-loader",
+          options: {},
+        },
+      ],
+    });
+    // eslint-disable-next-line no-param-reassign
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      path: false,
+      child_process: false,
+    };
+    return config;
+  },
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/explore/af",
+        permanent: true,
+      },
+      {
+        source: "/explore",
+        destination: "/explore/af",
+        permanent: true,
+      },
+    ];
+  },
+};