feat: add JS config handling to webpack and jest configs

README.md

@@ -129,7 +129,6 @@ if you need to do this and are running into problems.
 
 ## Local module configuration for Webpack
 
-
 The development webpack configuration allows engineers to create a
 \"module.config.js\" file containing local module overrides. This means
 that if you\'re developing a new feature in a shared library
@@ -218,6 +217,31 @@ locally. To serve a production build locally:
     attempt to run the build on the same port specified in the
     `env.config.js` file.
 
+## Creating a Production Build with env.config.js
+
+To use a private `env.config.js` file during the production build, the Webpack Production config will look for an env
+variable `process.env.JS_CONFIG_FILEPATH`, which should represent a file path to the desired `env.config.js`.
+
+The only requirement is that the filepath end with `env.config.*`, with either `.js` or `.jsx` as the extension.
+
+    // examples of acceptable filepaths
+
+    JS_CONFIG_FILEPATH="{HOME}/frontends/frontend-app-learner-dashboard/prod.env.config.js"
+
+    JS_CONFIG_FILEPATH="{HOME}/frontends/frontend-app-profile/stage.env.config.jsx"
+
+## Requiring Jest to reference env.config.js
+
+Jest doesn't rely on Webpack to merge the JS-based config into the Config Document,
+so to ensure Jest is aware of the environment variables in env.config, add the following to the MFE's `setupTest.js`
+
+    import envConfig from '../env.config';
+    import mergeConfig from '@edx/frontend-platform';
+
+    ...
+
+    mergeConfig(envConfig);
+
 ## Development
 
 This project leverages the command line interface for webpack, jest,

config/jest.config.js

@@ -3,11 +3,16 @@ const fs = require('fs');
 
 const presets = require('../lib/presets');
 
+// This assigns the envConfigPath filepath based on whether env.config exists, otherwise it uses the fallback filepath.
+// If both env.config.js and env.config.jsx files exist, then the former will be used to populate the Config Document.
 let envConfigPath = path.resolve(__dirname, './jest/fallback.env.config.js');
-const appEnvConfigPath = path.resolve(process.cwd(), './env.config.js');
+const appEnvConfigPathJs = path.resolve(process.cwd(), './env.config.js');
+const appEnvConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx');
 
-if (fs.existsSync(appEnvConfigPath)) {
-  envConfigPath = appEnvConfigPath;
+if (fs.existsSync(appEnvConfigPathJs)) {
+  envConfigPath = appEnvConfigPathJs;
+} else if (fs.existsSync(appEnvConfigPathJsx)) {
+  envConfigPath = appEnvConfigPathJsx;
 }
 
 module.exports = {

config/webpack.prod.config.js

@@ -12,6 +12,7 @@ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugi
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const fs = require('fs');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
 const PostCssCustomMediaCSS = require('postcss-custom-media');
@@ -23,6 +24,23 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
 const commonConfig = require('./webpack.common.config');
 const presets = require('../lib/presets');
 
+/**
+ * This condition confirms whether the configuration for the MFE has switched to a JS-based configuration
+ * as previously implemented in frontend-build and frontend-platform. If the environment variable JS_CONFIG_FILEPATH
+ * exists, then an env.config.js(x) file will be copied from the location referenced by the environment variable to the
+ * root directory. Its env variables can be accessed with getConfig().
+ *
+ * https://github.com/openedx/frontend-build/blob/master/docs/0002-js-environment-config.md
+ * https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst
+ */
+
+const envConfigPath = process.env.JS_CONFIG_FILEPATH;
+
+if (envConfigPath) {
+  const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config'));
+  fs.copyFileSync(envConfigPath, envConfigFilename);
+}
+
 // Add process env vars. Currently used only for setting the PUBLIC_PATH.
 dotenv.config({
   path: path.resolve(process.cwd(), '.env'),