diff --git a/Dockerfile b/Dockerfile index 834d89d47..e453e2e77 100644 --- a/Dockerfile +++ b/Dockerfile @@ -387,9 +387,12 @@ ARG NEXT_PUBLIC_APP_LOGO_URL \ PAYLOAD_PUBLIC_APP_URL # TODO(koech): Standadise naming of GA MEASUREMENT ID. Our options: -# - GA_MEASUREMENT_ID (charterafrica, civicsignalblog, codeforafrica) -# - GOOGLE_ANALYTICS_ID (pesayetu, roboshield, vpnmanager) +# - GA_MEASUREMENT_ID (charterafrica) +# - GOOGLE_ANALYTICS_ID (pesayetu, vpnmanager) # This is only needed at runtime +# TODO(koech): Completely remove the use of ENV vars for Google Analytics +# for those app that have CMS. Measurement id should be set +# in the Settings part of a site. ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \ PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \ PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH} @@ -437,106 +440,102 @@ CMD ["node", "dist/server.js"] # codeforafrica-desp: image with all codeforafrica dependencies # ------------------------------------------------------------- - FROM base-deps AS codeforafrica-deps - - # TODO(kilemensi): Figure out why this is needed - COPY packages/commons-ui-testing-library/package.json ./packages/commons-ui-testing-library/package.json - - COPY apps/codeforafrica/package.json ./apps/codeforafrica/package.json - - RUN pnpm --filter "./apps/codeforafrica/" install --offline --frozen-lockfile - - # - # codeforafrica-builder: image that uses deps to build shippable output - # --------------------------------------------------------------------- - - FROM base-builder AS codeforafrica-builder - - ARG NEXT_TELEMETRY_DISABLED \ - # Next.js / Payload (build time) - PORT \ - # Next.js (runtime) - NEXT_PUBLIC_APP_NAME="Code for Africa" \ - NEXT_PUBLIC_APP_URL \ - NEXT_PUBLIC_SENTRY_DSN \ - # Payload (runtime) - # TODO(koech): Standadise naming of Mongo DB URL. Our options: - # - MONGODB_URL (codeforafrica) - # - MONGO_URL (charterafrica, roboshield) - MONGODB_URL \ - PAYLOAD_SECRET \ - # Sentry (build time) - SENTRY_AUTH_TOKEN \ - SENTRY_ENVIRONMENT \ - SENTRY_ORG \ - SENTRY_PROJECT - - # This is in app-builder instead of base-builder just incase app-deps adds deps - COPY --from=codeforafrica-deps /workspace/node_modules ./node_modules - - COPY --from=codeforafrica-deps /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules - - COPY apps/codeforafrica ./apps/codeforafrica/ - - # When building Next.js app, Next.js needs to connect to local Payload - ENV PAYLOAD_PUBLIC_APP_URL=http://localhost:3000 - RUN pnpm --filter "./apps/codeforafrica/" build-next - - # When building Payload app, Payload needs to have final app URL - ENV PAYLOAD_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL} - RUN pnpm --filter "./apps/codeforafrica/" build-payload - - # - # codeforafrica-runner: final deployable image - # -------------------------------------------- - - FROM base-runner AS codeforafrica-runner - - ARG NEXT_PUBLIC_APP_LOGO_URL \ - PAYLOAD_CONFIG_PATH="dist/payload.config.js" \ - PAYLOAD_PUBLIC_APP_URL - - # TODO(koech): Standadise naming of GA MEASUREMENT ID. Our options: - # - GA_MEASUREMENT_ID (charterafrica, codeforafrica) - # - GOOGLE_ANALYTICS_ID (pesayetu, roboshield, vpnmanager) - # This is only needed at runtime - ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \ - PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \ - PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH} - - RUN set -ex \ - # Create nextjs cache dir w/ correct permissions - && mkdir -p ./apps/codeforafrica//.next \ - && chown nextjs:nodejs ./apps/codeforafrica/.next - - # PNPM - # symlink some dependencies - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/node_modules ./node_modules - - # Since we can't use output: "standalone", copy all app's dependencies - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/next.config.js ./apps/codeforafrica/next.config.js - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.env ./apps/codeforafrica/.env - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/migrations ./apps/codeforafrica/migrations - # Next.js - # Public assets - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/public ./apps/codeforafrica/public - - # Since we can't use output: "standalone", copy the whole app's .next folder - # TODO(kilemensi): Figure out which files in .next folder are not needed - COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.next ./apps/codeforafrica/.next - - # Payload - COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/dist ./apps/codeforafrica/dist - COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/build ./apps/codeforafrica/build - - # Since we can't use output: "standalone", switch to specific app's folder - WORKDIR /workspace/apps/codeforafrica - - USER nextjs - - # Custom server to run Payload and Next.js in the same app - CMD ["node", "dist/server.js"] +FROM base-deps AS codeforafrica-deps + +# TODO(kilemensi): Figure out why this is needed +COPY packages/commons-ui-testing-library/package.json ./packages/commons-ui-testing-library/package.json + +COPY apps/codeforafrica/package.json ./apps/codeforafrica/package.json + +RUN pnpm --filter "./apps/codeforafrica/" install --offline --frozen-lockfile + +# +# codeforafrica-builder: image that uses deps to build shippable output +# --------------------------------------------------------------------- + +FROM base-builder AS codeforafrica-builder + +ARG NEXT_TELEMETRY_DISABLED \ + # Next.js / Payload (build time) + PORT \ + # Next.js (runtime) + NEXT_PUBLIC_APP_NAME="Code for Africa" \ + NEXT_PUBLIC_APP_URL \ + NEXT_PUBLIC_SENTRY_DSN \ + # Payload (runtime) + # TODO(koech): Standadise naming of Mongo DB URL. Our options: + # - MONGODB_URL (codeforafrica) + # - MONGO_URL (charterafrica, roboshield) + MONGODB_URL \ + PAYLOAD_SECRET \ + # Sentry (build time) + SENTRY_AUTH_TOKEN \ + SENTRY_ENVIRONMENT \ + SENTRY_ORG \ + SENTRY_PROJECT + +# This is in app-builder instead of base-builder just incase app-deps adds deps +COPY --from=codeforafrica-deps /workspace/node_modules ./node_modules + +COPY --from=codeforafrica-deps /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules + +COPY apps/codeforafrica ./apps/codeforafrica/ + +# When building Next.js app, Next.js needs to connect to local Payload +ENV PAYLOAD_PUBLIC_APP_URL=http://localhost:3000 +RUN pnpm --filter "./apps/codeforafrica/" build-next + +# When building Payload app, Payload needs to have final app URL +ENV PAYLOAD_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL} +RUN pnpm --filter "./apps/codeforafrica/" build-payload + +# +# codeforafrica-runner: final deployable image +# -------------------------------------------- + +FROM base-runner AS codeforafrica-runner + +ARG NEXT_PUBLIC_APP_LOGO_URL \ + PAYLOAD_CONFIG_PATH="dist/payload.config.js" \ + PAYLOAD_PUBLIC_APP_URL + +ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \ + PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \ + PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH} + +RUN set -ex \ + # Create nextjs cache dir w/ correct permissions + && mkdir -p ./apps/codeforafrica//.next \ + && chown nextjs:nodejs ./apps/codeforafrica/.next + +# PNPM +# symlink some dependencies +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/node_modules ./node_modules + +# Since we can't use output: "standalone", copy all app's dependencies +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/next.config.js ./apps/codeforafrica/next.config.js +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.env ./apps/codeforafrica/.env +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/migrations ./apps/codeforafrica/migrations +# Next.js +# Public assets +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/public ./apps/codeforafrica/public + +# Since we can't use output: "standalone", copy the whole app's .next folder +# TODO(kilemensi): Figure out which files in .next folder are not needed +COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.next ./apps/codeforafrica/.next + +# Payload +COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/dist ./apps/codeforafrica/dist +COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/build ./apps/codeforafrica/build + +# Since we can't use output: "standalone", switch to specific app's folder +WORKDIR /workspace/apps/codeforafrica + +USER nextjs + +# Custom server to run Payload and Next.js in the same app +CMD ["node", "dist/server.js"] # ============================================================================ diff --git a/apps/climatemappedafrica/.env.template b/apps/climatemappedafrica/.env.template index b95f0578b..61c5a0d8b 100644 --- a/apps/climatemappedafrica/.env.template +++ b/apps/climatemappedafrica/.env.template @@ -35,4 +35,4 @@ S3_UPLOAD_BUCKET=name-of-s3-bucket S3_UPLOAD_REGION=bucket-region-us-east-1 #Analytics -NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-xxxxxxxx" +NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx" diff --git a/apps/climatemappedafrica/src/lib/ga/index.js b/apps/climatemappedafrica/src/lib/ga/index.js index f23602d3a..441d00313 100644 --- a/apps/climatemappedafrica/src/lib/ga/index.js +++ b/apps/climatemappedafrica/src/lib/ga/index.js @@ -1,7 +1,7 @@ // log the pageview with their URL export const pageview = (url) => { /* eslint-env browser */ - window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, { + window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, { page_path: url, }); }; diff --git a/apps/climatemappedafrica/src/pages/_document.js b/apps/climatemappedafrica/src/pages/_document.js index 0393f86fb..8285e0b92 100644 --- a/apps/climatemappedafrica/src/pages/_document.js +++ b/apps/climatemappedafrica/src/pages/_document.js @@ -12,7 +12,7 @@ export default class MyDocument extends Document { {/* Global Site Tag (gtag.js) - Google Analytics */}