Add possibility to define service urls in .env

We will get tired of remembering to add it to storybook args and be careful not commit the mocked services. In the future we can handle other environment variables for other purposes as well.
danskernesdigitalebibliotek · Sep 28, 2023 · 50cfbf9 · 50cfbf9
1 parent b280873
commit 50cfbf9
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 21 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,4 @@
 STORYBOOK_CLIENT_ID=bdc1d425-9117-4867-acb9-c7307ddc2e0f
 STORYBOOK_LIBRARY_TOKEN=e26e4ca8934475e6a9aytefb028b2e9fa846b5b8
+PUBLIZON_BASEURL=http://publizon-mock.docker
+FBS_BASEURL=http://fbs-mock.docker
diff --git a/.eslintrc b/.eslintrc
@@ -61,6 +61,7 @@
           "/**/*.test.tsx",
           "vitest.config.ts",
           "webpack.config.js",
+          "webpack.helpers.js",
           "postcss.config.js",
           "orval.config.ts",
           "cypress/plugins/index.js",

diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.7",
     "cypress": "^9.6.1",
+    "dotenv": "^16.3.1",
     "eslint": "^8.15.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

diff --git a/src/core/storybook/serviceUrlArgs.ts b/src/core/storybook/serviceUrlArgs.ts
@@ -3,12 +3,13 @@ import { serviceUrlKeys } from "../utils/reduxMiddleware/extractServiceBaseUrls"
 export default {
   [serviceUrlKeys.fbs]: {
     name: "Base url for the FBS API",
-    defaultValue: "https://fbs-openplatform.dbc.dk",
+    defaultValue: process.env.FBS_BASEURL ?? "https://fbs-openplatform.dbc.dk",
     control: { type: "text" }
   },
   [serviceUrlKeys.publizon]: {
     name: "Base url for the Publizon API",
-    defaultValue: "https://pubhub-openplatform.dbc.dk",
+    defaultValue:
+      process.env.PUBLIZON_BASEURL ?? "https://pubhub-openplatform.dbc.dk",
     control: { type: "text" }
   },
   [serviceUrlKeys.dplCms]: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,8 +1,10 @@
 const path = require("path");
 const glob = require("glob");
+const webpack = require("webpack");
 const VersionFile = require("webpack-version-file-plugin");
 const { EnvironmentPlugin } = require("webpack");
 const ESLintPlugin = require("eslint-webpack-plugin");
+const { getWebPackEnvVariables } = require("./webpack.helpers");
 
 module.exports = (_env, argv) => {
   const production = argv.mode === "production";
@@ -42,6 +44,14 @@ module.exports = (_env, argv) => {
     );
   }
 
+  // Add environment variables to webpack in development mode
+  if (!production) {
+    const variables = getWebPackEnvVariables();
+    if (variables) {
+      plugins.push(new webpack.DefinePlugin(variables));
+    }
+  }
+
   return {
     entry: {
       ...entry,

diff --git a/webpack.helpers.js b/webpack.helpers.js
@@ -0,0 +1,18 @@
+const dotenv = require("dotenv");
+
+const getEnvVariables = () => {
+  return dotenv.config().parsed;
+};
+const convertEnvVariablesToWebpack = (env) =>
+  Object.keys(env).reduce(
+    (prev, next) => ({
+      ...prev,
+      [`process.env.${next}`]: JSON.stringify(env[next])
+    }),
+    {}
+  );
+
+exports.getWebPackEnvVariables = () => {
+  const variables = getEnvVariables();
+  return variables ? convertEnvVariablesToWebpack(variables) : null;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -6205,20 +6205,20 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-loader@^8.2.5:
-  version "8.2.5"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+babel-loader@^8.0.0:
+  version "8.2.4"
+  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz"
+  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^8.0.0:
-  version "8.2.4"
-  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+babel-loader@^8.2.5:
+  version "8.2.5"
+  resolved "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
@@ -8944,6 +8944,11 @@ dotenv@^16.0.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz"
   integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 dotenv@^8.0.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
@@ -14785,9 +14790,9 @@ number-is-nan@^1.0.0:
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nyc@^15.1.0:
+nyc@15.1.0, nyc@^15.1.0:
   version "15.1.0"
-  resolved "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/nyc/-/nyc-15.1.0.tgz#1335dae12ddc87b6e249d5a1994ca4bdaea75f02"
   integrity sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==
   dependencies:
     "@istanbuljs/load-nyc-config" "^1.0.0"
@@ -15868,15 +15873,6 @@ postcss-load-config@^3.0.0:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
-postcss-loader@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz"
-  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.5"
-
 postcss-loader@^4.2.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz"
@@ -15888,6 +15884,15 @@ postcss-loader@^4.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+postcss-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz"
+  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz"