fix: remove unnecessary environment variable (#292 )

* fix: remove unnecessary environment variable * fix: bumping version of frontend-base for csrf env var change * fix: get IDE linting to work again
Create 0002-build-time-customization-with-npm-aliases.rst (#291 )
2019-10-10 14:16:25 -04:00 · 2019-10-07 16:05:57 -04:00 · 2019-10-02 15:54:25 -04:00
11 changed files with 206 additions and 135 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,6 @@ NODE_ENV=null
 ACCESS_TOKEN_COOKIE_NAME=null
 BASE_URL=null
 CREDENTIALS_BASE_URL=null
-CSRF_COOKIE_NAME=null
 CSRF_TOKEN_API_PATH=null
 ECOMMERCE_BASE_URL=null
 LANGUAGE_PREFERENCE_COOKIE_NAME=null
--- a/.env.development
+++ b/.env.development
@@ -3,7 +3,6 @@ PORT=1995
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CSRF_COOKIE_NAME='csrftoken'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
--- a/.env.test
+++ b/.env.test
@@ -1,7 +1,6 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CSRF_COOKIE_NAME='csrftoken'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 language: node_js
 node_js: 12
 before_install:
- npm install -g npm@latest
+- npm install -g npm@6
 install:
 - npm ci
 script:
--- a/docs/decisions/0002-build-time-customization-with-npm-aliases.rst
+++ b/docs/decisions/0002-build-time-customization-with-npm-aliases.rst
@@ -0,0 +1,72 @@
+2. Build time customization using NPM aliases
+---------------------------------------------
+
+Status
+------
+
+Accepted
+
+Context
+-------
+
+Frontend applications created throughout FY2019 contain hardcoded edX brand specific elements
+such as the site's header, footer, logo, visual style, and navigational links. This enabled
+teams to move more quickly in efforts to adopt a micro-frontend architecture to enable more
+rapid UI innovation in the future. There was no easy path for these new applications to be
+incorporated into the Open edX platform where they need to be branded properly.
+
+Decision
+--------
+
+In order to make frontend applications brand agnostic, we will split branded elements into
+npm packages such as ``frontend-component-header``. Frontend applications will expect to
+find components or other exports according to a defined interface. Package interfaces will
+be defined in the README for each npm package repository.
+
+.. code-block:: javascript
+
+  // exports React component as default and a 'messages' object for i18n 
+  import Header, { messages } from '@edx/frontend-component-header';
+
+To build a frontend application for a specific brand (edX or other Open edX implementation) we
+will leverage npm aliases to override these npm packages with branded packages that implement the
+same interface before build. For example, ``frontend-component-header`` will be overriden with
+``frontend-component-header-edx``. This is done using the 
+`npm alias syntax introduced in version 6.9.0`_. 
+
+We install aliases using the syntax below:
+
+.. code-block:: bash
+  
+  # npm install <package-name>@<type>:<branded-package>
+  
+  # npm package
+  npm install @edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest
+
+  # git repository
+  npm install @edx/frontend-component-header@git:https://github.com/edx/frontend-component-header-edx.git
+  
+  # local folder
+  npm install @edx/frontend-component-header@file:../path/to/local/module/during/build
+
+After installing overrides using npm aliases, we build the project normally:
+
+.. code-block:: bash
+
+  npm run build
+
+Using this mechanism branded packages are substituted for the default unbranded packages at build
+and deployment time.
+
+.. _npm alias syntax introduced in version 6.9.0: https://github.com/npm/rfcs/blob/latest/implemented/0001-package-aliases.md
+
+Consequences
+------------
+
+One drawback of this process is the inability to automatically test substituted packages before
+deployment. This is a risk we are willing to accept until it becomes an issue.
+
+edX has built a deployment pipeline that will read configuration for npm packages to override
+and alias. This code is open source but heavily catered to edX's specific deployment needs.
+The Open edX community will need to collaborate on a simpler, less opinionated build and 
+deployment process for micro-frontend applications.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1029,15 +1029,14 @@
      }
    },
    "@edx/frontend-base": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-2.2.0.tgz",
-      "integrity": "sha512-eOoy3Hb6T7n2wJgaYrVYXH4MOpICj364XAzsomL/kUqyIY7lGLC55OAForI6lKZICl8cm21QJzLPYFzHZT/WSQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-4.0.1.tgz",
+      "integrity": "sha512-IEyrorssh3uwRqXYmr7UFVtiz5MtpmnmysA9faCvi2KL4QVP+S9LQYv/48AFmTzNF3gqhO8kRT69YsawX4bdiA==",
      "requires": {
        "babel-polyfill": "6.26.0",
        "history": "4.9.0",
        "lodash.memoize": "4.1.2",
        "lodash.merge": "4.6.2",
-        "lodash.pick": "4.4.0",
        "pubsub-js": "1.7.0",
        "redux-devtools-extension": "2.13.8",
        "redux-logger": "3.0.6",
@@ -1060,9 +1059,9 @@
      }
    },
    "@edx/frontend-build": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-1.0.1.tgz",
-      "integrity": "sha512-cdpfMjJDYg6e6wOBhFall1hekR8pgeF6vHzfivFT5BOLJMnIAz0qF9BG+5tOIRj8rj63//nzgt+VohfmIqMDdg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-1.1.0.tgz",
+      "integrity": "sha512-9PMb2O0z/YqECc4KynMh/lfPGUjlIbKfv5xoWNrKKzIZ7/tY8uFKg4kaZCPE7V1nZzAWfj9P1l1NnrFzzoztKg==",
      "dev": true,
      "requires": {
        "@babel/cli": "^7.6.0",
@@ -1132,15 +1131,15 @@
      }
    },
    "@edx/frontend-component-footer": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-8.0.0.tgz",
-      "integrity": "sha512-ZeZ15jhchHF8LS8yyhqvfqsm38nTcHgIDPGNzkvotDHNjqa2m+onIum1AouoQ3WDbynii3OiFVcl3u40W7c1CA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-9.0.0.tgz",
+      "integrity": "sha512-fRbwnS0N1ZSCNOa/71yFVCYSHgCIE81awjl4Y68RIjU8UDBxNXDR42OjovK9dnLnZPGGFiF+vz/UGShtd1Bbbg==",
      "requires": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.17",
-        "@fortawesome/free-brands-svg-icons": "^5.8.1",
-        "@fortawesome/free-regular-svg-icons": "^5.8.1",
-        "@fortawesome/free-solid-svg-icons": "^5.8.1",
-        "@fortawesome/react-fontawesome": "^0.1.4"
+        "@fortawesome/fontawesome-svg-core": "1.2.17",
+        "@fortawesome/free-brands-svg-icons": "5.8.1",
+        "@fortawesome/free-regular-svg-icons": "5.8.1",
+        "@fortawesome/free-solid-svg-icons": "5.8.1",
+        "@fortawesome/react-fontawesome": "0.1.4"
      },
      "dependencies": {
        "@fortawesome/fontawesome-common-types": {
@@ -1149,47 +1148,47 @@
          "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
        },
        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.25",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
-          "integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
+          "version": "1.2.17",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.17.tgz",
+          "integrity": "sha512-TORMW/wIX2QyyGBd4XwHGPir4/0U18Wxf+iDBAUW3EIJ0/VC/ZMpJOiyiCe1f8g9h0PPzA7sqVtl8JtTUtm4uA==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.25"
+            "@fortawesome/fontawesome-common-types": "^0.2.17"
          }
        },
        "@fortawesome/free-brands-svg-icons": {
-          "version": "5.11.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.11.2.tgz",
-          "integrity": "sha512-wKK5znpHiZ2S0VgOvbeAnYuzkk3H86rxWajD9PVpfBj3s/kySEWTFKh/uLPyxiTOx8Tsd0OGN4En/s9XudVHLQ==",
+          "version": "5.8.1",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.1.tgz",
+          "integrity": "sha512-NN5Nap2D5e7Lusa5uarAUkcaO7PMbme5wmUF8kofZzPUZR753zDg/UFffi+LLE2Mi9zRXCJEYmIRfMON9SxLPg==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.25"
+            "@fortawesome/fontawesome-common-types": "^0.2.17"
          }
        },
        "@fortawesome/free-regular-svg-icons": {
-          "version": "5.11.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.11.2.tgz",
-          "integrity": "sha512-k0vbThRv9AvnXYBWi1gn1rFW4X7co/aFkbm0ZNmAR5PoWb9vY9EDDDobg8Ay4ISaXtCPypvJ0W1FWkSpLQwZ6w==",
+          "version": "5.8.1",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.1.tgz",
+          "integrity": "sha512-U+tFjDyQpVdD0UPWoKRBVLhh0J1/q3iaWDrnxNMJKuKRmerc4d0jfiZdM2X7agOTcG7amvcllRBiWCu2FwYlMA==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.25"
+            "@fortawesome/fontawesome-common-types": "^0.2.17"
          }
        },
        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.11.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
-          "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
+          "version": "5.8.1",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.1.tgz",
+          "integrity": "sha512-FUcxR75PtMOo3ihRHJOZz64IsWIVdWgB2vCMLJjquTv487wVVCMH5H5gWa72et2oI9lKKD2jvjQ+y+7mxhscVQ==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.25"
+            "@fortawesome/fontawesome-common-types": "^0.2.17"
          }
        }
      }
    },
    "@edx/frontend-component-header": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-1.1.2.tgz",
-      "integrity": "sha512-S03zgniCXr+a8OHpimm3b20EiWSIru3FNHnAQuG3kBJYeETOnLjgwh6EpXhrAZB1rcDH6isetCW2uxC6nX1r7g==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-1.1.4.tgz",
+      "integrity": "sha512-6Mt2Q+VKdwI1PlhpJ8OE0/975fbPnOXgvLwkzoDIrYkd5OTP+VjEB3uoyqJtDENkH7d8XF1T09WJJCaTPQieUQ==",
      "requires": {
-        "babel-polyfill": "^6.26.0",
-        "react-responsive": "^8.0.1",
-        "react-transition-group": "^4.3.0"
+        "babel-polyfill": "6.26.0",
+        "react-responsive": "8.0.1",
+        "react-transition-group": "4.3.0"
      }
    },
    "@edx/frontend-i18n": {
@@ -3028,22 +3027,22 @@
      }
    },
    "babel-plugin-react-intl": {
-      "version": "4.1.19",
-      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-4.1.19.tgz",
-      "integrity": "sha512-mcJkLyZLE2FdoD//rRHZXDNh1ZWOhp+9K9bXasnspWtM3VWR3J05UVEhtiJfSP0vrQG+VpqMlLi4QQ5k++xBbw==",
+      "version": "4.1.20",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-4.1.20.tgz",
+      "integrity": "sha512-IsHp08rkQ0VX3t/Px/tvOm1izuxf9v+kFwjPSdVKZbo/uJ/vXGNJ2ebEXxYyX0dNYeyDkSFUjvBgJxmvKASjow==",
      "dev": true,
      "requires": {
-        "@babel/core": "^7.4.5",
+        "@babel/core": "^7.6.2",
        "@babel/helper-plugin-utils": "^7.0.0",
        "@types/babel__core": "^7.1.2",
        "fs-extra": "^8.0.1",
-        "intl-messageformat-parser": "^3.2.0"
+        "intl-messageformat-parser": "^3.2.1"
      },
      "dependencies": {
        "intl-messageformat-parser": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.2.0.tgz",
-          "integrity": "sha512-07G+OTgIEsYIPpy793/EU14Slz03nqouODE+CGXlojw1gOF1IaUXk99EOlVdKsPwl95hUJon4dsp9D7/XPBDCw==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.2.1.tgz",
+          "integrity": "sha512-ajCL1k1ha0mUrutlBTo5vcTzyfdH2OoghUu8SmR7tJ1D0uifZh9Hqd3ZC2SYVv/GTfTdW//rgKonMgAhZWmwZg==",
          "dev": true
        }
      }
@@ -3195,9 +3194,9 @@
      },
      "dependencies": {
        "bluebird": {
-          "version": "3.5.5",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
-          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.0.tgz",
+          "integrity": "sha512-aBQ1FxIa7kSWCcmKHlcHFlT2jt6J/l4FzC7KcPELkOJOsPOb/bccdhmIrKDfXhwFrmc7vDoDrrepFvGqjyXGJg==",
          "dev": true
        }
      }
@@ -3856,9 +3855,9 @@
      },
      "dependencies": {
        "bluebird": {
-          "version": "3.5.5",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
-          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.0.tgz",
+          "integrity": "sha512-aBQ1FxIa7kSWCcmKHlcHFlT2jt6J/l4FzC7KcPELkOJOsPOb/bccdhmIrKDfXhwFrmc7vDoDrrepFvGqjyXGJg==",
          "dev": true
        },
        "glob": {
@@ -4541,9 +4540,9 @@
      },
      "dependencies": {
        "mime-db": {
-          "version": "1.41.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.41.0.tgz",
-          "integrity": "sha512-B5gxBI+2K431XW8C2rcc/lhppbuji67nf9v39eH8pkWoZDxnAL0PxdpH32KYRScniF8qDHBDlI+ipgg5WrCUYw==",
+          "version": "1.42.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz",
+          "integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==",
          "dev": true
        }
      }
@@ -4941,9 +4940,9 @@
          }
        },
        "schema-utils": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
-          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.4.1.tgz",
+          "integrity": "sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==",
          "dev": true,
          "requires": {
            "ajv": "^6.10.2",
@@ -5878,9 +5877,9 @@
      "dev": true
    },
    "electron-to-chromium": {
-      "version": "1.3.266",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.266.tgz",
-      "integrity": "sha512-UTuTZ4v8T0gLPHI7U75PXLQePWI65MTS3mckRrnLCkNljHvsutbYs+hn2Ua/RFul3Jt/L3Ht2rLP+dU/AlBfrQ==",
+      "version": "1.3.272",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.272.tgz",
+      "integrity": "sha512-TjsDKYOZGgaD8tUJtRiiBNlIrv2Ol6SxNMy4yeTX0goRmoBhV941m4EN8QjA3vfshs16F5KLDyUv2m7GdTqIgg==",
      "dev": true
    },
    "elliptic": {
@@ -6165,9 +6164,9 @@
      }
    },
    "eslint": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.4.0.tgz",
-      "integrity": "sha512-WTVEzK3lSFoXUovDHEbkJqCVPEPwbhCq4trDktNI6ygs7aO41d4cDT0JFAT5MivzZeVLWlg7vHL+bgrQv/t3vA==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.5.1.tgz",
+      "integrity": "sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
@@ -7077,20 +7076,20 @@
      }
    },
    "eslint-plugin-react": {
-      "version": "7.14.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz",
-      "integrity": "sha512-EzdyyBWC4Uz2hPYBiEJrKCUi2Fn+BJ9B/pJQcjw5X+x/H2Nm59S4MJIvL4O5NEE0+WbnQwEBxWY03oUk+Bc3FA==",
+      "version": "7.15.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.15.1.tgz",
+      "integrity": "sha512-YotSItgMPwLGlr3df44MGVyXnHkmKcpkHTzpte3QwJtocr3nFqCXCuoxFZeBtnT8RHdj038NlTvam3dcAFrMcA==",
      "dev": true,
      "requires": {
        "array-includes": "^3.0.3",
        "doctrine": "^2.1.0",
        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.1.0",
+        "jsx-ast-utils": "^2.2.1",
        "object.entries": "^1.1.0",
        "object.fromentries": "^2.0.0",
        "object.values": "^1.1.0",
        "prop-types": "^15.7.2",
-        "resolve": "^1.10.1"
+        "resolve": "^1.12.0"
      },
      "dependencies": {
        "doctrine": {
@@ -7707,9 +7706,9 @@
          }
        },
        "schema-utils": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
-          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.4.1.tgz",
+          "integrity": "sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==",
          "dev": true,
          "requires": {
            "ajv": "^6.10.2",
@@ -8897,9 +8896,9 @@
      "dev": true
    },
    "handlebars": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.3.1.tgz",
-      "integrity": "sha512-c0HoNHzDiHpBt4Kqe99N8tdLPKAnGCQ73gYMPWtAYM4PwGnf7xl8PBUHJqh9ijlzt2uQKaSRxbXRt+rZ7M2/kA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
+      "integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
      "dev": true,
      "requires": {
        "neo-async": "^2.6.0",
@@ -12060,9 +12059,9 @@
      }
    },
    "node-forge": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.8.2.tgz",
-      "integrity": "sha512-mXQ9GBq1N3uDCyV1pdSzgIguwgtVpM7f5/5J4ipz12PKWElmPpVWLDuWl8iXmhysr21+WmX/OJ5UKx82wjomgg==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
+      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
      "dev": true
    },
    "node-gyp": {
@@ -12184,9 +12183,9 @@
      }
    },
    "node-releases": {
-      "version": "1.1.32",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.32.tgz",
-      "integrity": "sha512-VhVknkitq8dqtWoluagsGPn3dxTvN9fwgR59fV3D7sLBHe0JfDramsMI8n8mY//ccq/Kkrf8ZRHRpsyVZ3qw1A==",
+      "version": "1.1.33",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.33.tgz",
+      "integrity": "sha512-I0V30bWQEoHb+10W8oedVoUrdjW5wIkYm0w7vvcrPO95pZY738m1k77GF5sO0vKg5eXYg9oGtrMAETbgZGm11A==",
      "dev": true,
      "requires": {
        "semver": "^5.3.0"
@@ -13839,9 +13838,9 @@
          "dev": true
        },
        "react-is": {
-          "version": "16.9.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
-          "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==",
+          "version": "16.10.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.1.tgz",
+          "integrity": "sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==",
          "dev": true
        }
      }
@@ -15715,12 +15714,12 @@
      "dev": true
    },
    "selfsigned": {
-      "version": "1.10.6",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.6.tgz",
-      "integrity": "sha512-i3+CeqxL7DpAazgVpAGdKMwHuL63B5nhJMh9NQ7xmChGkA3jNFflq6Jyo1LLJYcr3idWiNOPWHCrm4zMayLG4w==",
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
+      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
      "dev": true,
      "requires": {
-        "node-forge": "0.8.2"
+        "node-forge": "0.9.0"
      }
    },
    "semver": {
@@ -16732,9 +16731,9 @@
          }
        },
        "schema-utils": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
-          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.4.1.tgz",
+          "integrity": "sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==",
          "dev": true,
          "requires": {
            "ajv": "^6.10.2",
@@ -16995,9 +16994,9 @@
      }
    },
    "terser": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.3.2.tgz",
-      "integrity": "sha512-obxk4x19Zlzj9zY4QeXj9iPCb5W8YGn4v3pn4/fHj0Nw8+R7N02Kvwvz9VpOItCZZD8RC+vnYCDL0gP6FAJ7Xg==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.3.4.tgz",
+      "integrity": "sha512-Kcrn3RiW8NtHBP0ssOAzwa2MsIRQ8lJWiBG/K7JgqPlomA3mtb2DEmp4/hrUA+Jujx+WZ02zqd7GYD+QRBB/2Q==",
      "dev": true,
      "requires": {
        "commander": "^2.20.0",
@@ -17023,9 +17022,9 @@
      },
      "dependencies": {
        "bluebird": {
-          "version": "3.5.5",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
-          "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.0.tgz",
+          "integrity": "sha512-aBQ1FxIa7kSWCcmKHlcHFlT2jt6J/l4FzC7KcPELkOJOsPOb/bccdhmIrKDfXhwFrmc7vDoDrrepFvGqjyXGJg==",
          "dev": true
        },
        "cacache": {
@@ -17652,9 +17651,9 @@
          "dev": true
        },
        "schema-utils": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.2.0.tgz",
-          "integrity": "sha512-5EwsCNhfFTZvUreQhx/4vVQpJ/lnCAkgoIHLhSpp4ZirE+4hzFvdJi0FMub6hxbFVBJYSpeVVmon+2e7uEGRrA==",
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.4.1.tgz",
+          "integrity": "sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==",
          "dev": true,
          "requires": {
            "ajv": "^6.10.2",
@@ -17905,9 +17904,9 @@
      }
    },
    "webpack-bundle-analyzer": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.1.tgz",
-      "integrity": "sha512-CDdaT3TTu4F9X3tcDq6PNJOiNGgREOM0WdN2vVAoUUn+M6NLB5kJ543HImCWbrDwOpbpGARSwU8r+u0Pl367kA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.2.tgz",
+      "integrity": "sha512-g9spCNe25QYUVqHRDkwG414GTok2m7pTTP0wr6l0J50Z3YLS04+BGodTqqoVBL7QfU/U/9p/oiI5XFOyfZ7S/A==",
      "dev": true,
      "requires": {
        "acorn": "^6.0.7",
@@ -18056,9 +18055,9 @@
      }
    },
    "webpack-dev-middleware": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.1.tgz",
-      "integrity": "sha512-5MWu9SH1z3hY7oHOV6Kbkz5x7hXbxK56mGHNqHTe6d+ewxOwKUxoUJBs7QIaJb33lPjl9bJZ3X0vCoooUzC36A==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz",
+      "integrity": "sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==",
      "dev": true,
      "requires": {
        "memory-fs": "^0.4.1",
@@ -18167,9 +18166,9 @@
          "dev": true
        },
        "is-absolute-url": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.2.tgz",
-          "integrity": "sha512-+5g/wLlcm1AcxSP7014m6GvbPHswDx980vD/3bZaap8aGV9Yfs7Q6y6tfaupgZ5O74Byzc8dGrSCJ+bFXx0KdA==",
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+          "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
          "dev": true
        },
        "is-fullwidth-code-point": {
@@ -18583,9 +18582,9 @@
      "dev": true
    },
    "yallist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-      "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true
    },
    "yargs": {
--- a/package.json
+++ b/package.json
@@ -43,9 +43,9 @@
  "dependencies": {
    "@edx/frontend-analytics": "3.0.0",
    "@edx/frontend-auth": "7.0.1",
-    "@edx/frontend-base": "2.2.0",
-    "@edx/frontend-component-footer": "8.0.0",
-    "@edx/frontend-component-header": "1.1.2",
+    "@edx/frontend-base": "4.0.1",
+    "@edx/frontend-component-footer": "9.0.0",
+    "@edx/frontend-component-header": "1.1.4",
    "@edx/frontend-i18n": "3.0.2",
    "@edx/frontend-logging": "3.0.1",
    "@edx/paragon": "7.1.3",
@@ -82,13 +82,13 @@
    "universal-cookie": "3.1.0"
  },
  "devDependencies": {
-    "@edx/frontend-build": "^1.0.1",
+    "@edx/frontend-build": "1.1.0",
    "codecov": "3.1.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
    "es-check": "5.0.0",
-    "glob": "^7.1.3",
-    "purgecss-webpack-plugin": "^1.6.0",
+    "glob": "7.1.3",
+    "purgecss-webpack-plugin": "1.6.0",
    "react-test-renderer": "16.9.0",
    "reactifex": "1.1.1",
    "redux-mock-store": "1.5.3"
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,5 +3,5 @@

@import './profile/index.scss';

-@import "~@edx/frontend-component-header/src/index";
-@import "~@edx/frontend-component-footer/src/footer";
+@import "~@edx/frontend-component-header/dist/index";
+@import "~@edx/frontend-component-footer/dist/footer";
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -38,7 +38,7 @@ import { profilePageSelector } from './data/selectors';
 // i18n
 import messages from './ProfilePage.messages';

-App.requireConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+App.ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');

 class ProfilePage extends React.Component {
  constructor(props, context) {
--- a/src/profile/data/services.js
+++ b/src/profile/data/services.js
@@ -2,7 +2,7 @@ import { App } from '@edx/frontend-base';
 import { logApiClientError } from '@edx/frontend-logging';
 import { camelCaseObject, convertKeyNames, snakeCaseObject } from '../utils';

-const { LMS_BASE_URL } = App.requireConfig(['LMS_BASE_URL'], 'Profile API service');
+App.ensureConfig(['LMS_BASE_URL'], 'Profile API service');

 function processAccountData(data) {
  return camelCaseObject(data);
@@ -20,7 +20,7 @@ function processAndThrowError(error, errorDataProcessor) {

 // GET ACCOUNT
 export async function getAccount(username) {
-  const { data } = await App.apiClient.get(`${LMS_BASE_URL}/api/user/v1/accounts/${username}`);
+  const { data } = await App.apiClient.get(`${App.config.LMS_BASE_URL}/api/user/v1/accounts/${username}`);

  // Process response data
  return processAccountData(data);
@@ -31,7 +31,7 @@ export async function patchProfile(username, params) {
  const processedParams = snakeCaseObject(params);

  const { data } = await App.apiClient
-    .patch(`${LMS_BASE_URL}/api/user/v1/accounts/${username}`, processedParams, {
+    .patch(`${App.config.LMS_BASE_URL}/api/user/v1/accounts/${username}`, processedParams, {
      headers: {
        'Content-Type': 'application/merge-patch+json',
      },
@@ -49,7 +49,7 @@ export async function patchProfile(username, params) {
 export async function postProfilePhoto(username, formData) {
  // eslint-disable-next-line no-unused-vars
  const { data } = await App.apiClient.post(
-    `${LMS_BASE_URL}/api/user/v1/accounts/${username}/image`,
+    `${App.config.LMS_BASE_URL}/api/user/v1/accounts/${username}/image`,
    formData,
    {
      headers: {
@@ -73,7 +73,7 @@ export async function postProfilePhoto(username, formData) {

 export async function deleteProfilePhoto(username) {
  // eslint-disable-next-line no-unused-vars
-  const { data } = await App.apiClient.delete(`${LMS_BASE_URL}/api/user/v1/accounts/${username}/image`);
+  const { data } = await App.apiClient.delete(`${App.config.LMS_BASE_URL}/api/user/v1/accounts/${username}/image`);

  // TODO: Someday in the future the POST photo endpoint
  // will return the new values. At that time we should
@@ -86,7 +86,7 @@ export async function deleteProfilePhoto(username) {

 // GET PREFERENCES
 export async function getPreferences(username) {
-  const { data } = await App.apiClient.get(`${LMS_BASE_URL}/api/user/v1/preferences/${username}`);
+  const { data } = await App.apiClient.get(`${App.config.LMS_BASE_URL}/api/user/v1/preferences/${username}`);

  return camelCaseObject(data);
 }
@@ -106,7 +106,7 @@ export async function patchPreferences(username, params) {
    visibility_time_zone: 'visibility.time_zone',
  });

-  await App.apiClient.patch(`${LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
+  await App.apiClient.patch(`${App.config.LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
    headers: { 'Content-Type': 'application/merge-patch+json' },
  });

@@ -124,7 +124,7 @@ function transformCertificateData(data) {
      cert.download_url.search(/http[s]?:\/\//) !== 0;

    const downloadUrl = urlIsPath ?
-      `${LMS_BASE_URL}${cert.download_url}` :
+      `${App.config.LMS_BASE_URL}${cert.download_url}` :
      cert.download_url;

    transformedData.push({
@@ -137,7 +137,7 @@ function transformCertificateData(data) {
 }

 export async function getCourseCertificates(username) {
-  const url = `${LMS_BASE_URL}/api/certificates/v0/certificates/${username}/`;
+  const url = `${App.config.LMS_BASE_URL}/api/certificates/v0/certificates/${username}/`;
  try {
    const { data } = await App.apiClient.get(url);
    return transformCertificateData(data);