Build: Pass most env vars at runtime instead of build time (#6)

.env.local.dist

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://localhost:8000/graphql/
-NEXT_PUBLIC_FALLBACK_URL=http://localhost:8000
+GRAPHQL_ENDPOINT=http://localhost:8000/graphql/
+FALLBACK_URL=http://localhost:8000

.github/workflows/build_docker_image.yml

@@ -0,0 +1,61 @@
+name: Build OpenHEXA Frontend
+
+on:
+  release:
+    types: [ published ]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Image tag
+        required: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    # see https://github.com/docker/build-push-action
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Login to DockerHub
+        uses: docker/#-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Store version number (on release)
+          if: ${{ github.event_name == 'release' }}
+          id: version
+          # GITHUB_REF looks like "refs/tags/0.3.1" - we need to extract the actual version without the v prefix
+          run: echo ::set-output name=number::${GITHUB_REF##*/}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Build and push (release)
+        if: ${{ github.event_name == 'release' }}
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          context: .
+          tags: |
+            blsq/openhexa-frontend:${{ steps.version.outputs.number }}
+            blsq/openhexa-frontend:latest
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          RELEASE: ${{ steps.version.outputs.number }}
+
+      - name: Build and push (manual)
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        uses: docker/build-push-action
+        with:
+          push: true
+          context: .
+          file: Dockerfile
+          tags: |
+            blsq/openhexa-frontend:${{ github.event.inputs.tag }}
+            blsq/openhexa-frontend:latest
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          RELEASE: ${{ steps.version.outputs.number }}

Dockerfile

@@ -19,15 +19,9 @@ COPY --from=deps /code/node_modules ./node_modules
 
 ARG RELEASE
 ARG SENTRY_AUTH_TOKEN
-ARG SENTRY_DSN
-ARG SENTRY_ENVIRONMENT
-ARG GRAPHQL_ENDPOINT
 
 ENV SENTRY_RELEASE=${RELEASE}
 ENV NEXT_PUBLIC_RELEASE=${RELEASE}
-ENV NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
-ENV NEXT_PUBLIC_SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT}
-ENV NEXT_PUBLIC_GRAPHQL_ENDPOINT=${GRAPHQL_ENDPOINT}
 
 RUN npm run build
 

README.md

@@ -100,20 +100,17 @@ Translations are stored in `public/locales/[lang]/[ns].json`.
 
 The project is meant to be deployed in a containerized environment, such as [Kubernetes](https://kubernetes.io/).
 
-The following environment variables should be provided at build time:
+The following environment variables should be provided at build time (for the `docker build` or `npm run build`):
 
 - `RELEASE`: a release identifier, such as a Git tag (used for uploading source maps to Sentry)
 - `SENTRY_AUTH_TOKEN`: A valid Sentry authentication token
-- `NEXT_PUBLIC_SENTRY_DSN`: the [Sentry](https://sentry.io/) DSN
 
 The following environment variables should be provided at run time:
-- `NEXT_PUBLIC_GRAPHQL_ENDPOINT`: the URL of the OpenHexa GraphQL API
-- `NEXT_PUBLIC_RELEASE`: a release identifier used in-app (should be the same as `SENTRY_RELEASE`)
-- `SENTRY_RELEASE`: a release identifier used for Sentry (such as a Git tag)
-- `NEXT_PUBLIC_SENTRY_DSN`: the [Sentry](https://sentry.io/) DSN
-- `NEXT_PUBLIC_SENTRY_ENVIRONMENT`: the [Sentry](https://sentry.io/) environment tag
+- `GRAPHQL_ENDPOINT`: the URL of the OpenHexa GraphQL API
+- `SENTRY_DSN`: the [Sentry](https://sentry.io/) DSN
+- `SENTRY_ENVIRONMENT`: the [Sentry](https://sentry.io/) environment tag
+- `FALLBACK_URL`: the URL the traffic will be redirected to if NextJS cannot answer the request
 
-If you use the provided `Dockerfile`, `NEXT_PUBLIC_RELEASE` and `SENTRY_RELEASE` are set for you if you provide `RELEASE` at build time and `NEXT_PUBLIC_SENTRY_DSN` is already set.
 
 ## Local development
 

next.config.js

@@ -3,11 +3,20 @@
 const { withSentryConfig } = require("@sentry/nextjs");
 const { i18n } = require("./next-i18next.config");
 
-const { NEXT_PUBLIC_FALLBACK_URL = "" } = process.env;
+const { FALLBACK_URL = "" } = process.env;
+
 const config = {
+  publicRuntimeConfig: {
+    GRAPHQL_ENDPOINT: process.env.GRAPHQL_ENDPOINT,
+    SENTRY_DSN: process.env.SENTRY_DSN,
+    SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT,
+  },
+
+  poweredByHeader: false, // Disable 'x-powered-by' header
   reactStrictMode: true,
   trailingSlash: false,
   i18n,
+
   async rewrites() {
     return {
       // After checking all Next.js pages (including dynamic routes)...
@@ -16,11 +25,11 @@ const config = {
         // Proxied static files do not need to have a trailing slash
         {
           source: "/static/:path*",
-          destination: `${NEXT_PUBLIC_FALLBACK_URL}/static/:path*`,
+          destination: `${FALLBACK_URL}/static/:path*`,
         },
         {
           source: "/:path*",
-          destination: `${NEXT_PUBLIC_FALLBACK_URL}/:path*/`,
+          destination: `${FALLBACK_URL}/:path*/`,
         },
       ],
     };

sentry.client.config.js

@@ -3,11 +3,13 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
+import getConfig from "next/config";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const { publicRuntimeConfig } = getConfig();
 
 Sentry.init({
-  dsn: SENTRY_DSN,
+  dsn: publicRuntimeConfig.SENTRY_DSN,
+  environment: publicRuntimeConfig.SENTRY_ENVIRONMENT,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1.0,
   // ...

sentry.properties

@@ -1,4 +1,4 @@
 defaults.url=https://sentry.io/
 defaults.org=bluesquareorg
-defaults.project=openhexa-frontend
+defaults.project=openhexa
 # cli.executable=./node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -4,10 +4,13 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+import getConfig from "next/config";
+
+const { publicRuntimeConfig } = getConfig();
 
 Sentry.init({
-  dsn: SENTRY_DSN,
+  dsn: publicRuntimeConfig.SENTRY_DSN,
+  environment: publicRuntimeConfig.SENTRY_ENVIRONMENT,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1.0,
   // ...

src/libs/apollo.ts

@@ -5,6 +5,7 @@ import {
   NormalizedCacheObject,
   createHttpLink,
 } from "@apollo/client";
+import getConfig from "next/config";
 import { onError } from "@apollo/link-error";
 import merge from "deepmerge";
 import { IncomingHttpHeaders } from "http";
@@ -19,6 +20,8 @@ export type CustomApolloClient = ApolloClient<NormalizedCacheObject>;
 
 let apolloClient: CustomApolloClient | undefined;
 
+const { publicRuntimeConfig } = getConfig();
+
 const createApolloClient = (headers: IncomingHttpHeaders | null = null) => {
   const enhancedFetch = (url: RequestInfo, init: RequestInit) => {
     if (process.env.NODE_ENV === "development") {
@@ -54,7 +57,7 @@ const createApolloClient = (headers: IncomingHttpHeaders | null = null) => {
       }),
 
       createHttpLink({
-        uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
+        uri: publicRuntimeConfig.GRAPHQL_ENDPOINT,
         fetch: enhancedFetch,
         credentials: "include",
         fetchOptions: {