feat: Add command to run dev:amo with staging data (close #2535)

README.md

@@ -43,7 +43,9 @@ Here are some commands you can run:
 | Command                     | Description |
 |-----------------------------|-------------|
 | yarn dev:amo                | Start the dev server and proxy (amo) |
+| yarn dev:amo:dev            | Start the dev server and proxy (amo) using data from the dev server (https://addons-dev.allizom.org/) |
 | yarn dev:amo:no-proxy       | Start the dev server without proxy (amo) |
+| yarn dev:amo:stage          | Start the dev server and proxy (amo) using data from the staging server (https://addons.allizom.org/) |
 | yarn dev:disco              | Start the dev server (discovery pane) |
 | yarn flow                   | Run Flow. By default this checks for errors and exits |
 | yarn flow:check             | Explicitly check for Flow errors and exit |

config/custom-environment-variables.json

@@ -1,5 +1,7 @@
 {
+  "amoCDN": "AMO_CDN",
   "apiHost": "API_HOST",
+  "CSP": "CSP",
   "proxyApiHost": "PROXY_API_HOST",
   "proxyEnabled": "PROXY_ENABLED",
   "proxyPort": "PROXY_PORT",

docs/index.md

@@ -1,6 +1,7 @@
 addons-frontend
 ===============
 
+* [Develop using the staging site's API](./using-the-staging-sites-api.md)
 * [How to Add a Page](./adding-a-page.md)
 * [How to develop features for mozAddonManager](./moz-addon-manager.md)
 * [Internationalization (i18n)](./i18n.md)

docs/using-the-staging-sites-api.md

@@ -0,0 +1,5 @@
+# Development Using the Stage (or Dev) API
+
+By default the local dev server (ran using `yarn dev`) will load data from the local docker instance (usually found at http://olympia.dev/). Admittedly this dataset is incomplete and small. While we discourage usage of the production API for development, you can safely develop against the "Dev" or "Stage" servers using `yarn dev:amo:dev` or `yarn dev:amo:stage`. This will give you a large amount of data to work with when testing out new features.
+
+It's best to use these commands rather than setting the `API_HOST` and other environment variables directly: these commands automatically set the API and CDN variables appropriately so screenshots, icons, etc. will load correctly.

package.json

@@ -13,7 +13,9 @@
     "extract-locales": "better-npm-run extract-locales",
     "clean": "rimraf './dist/*!(.gitkeep)' './webpack-assets.json' './src/locale/**(!.gitkeep)'",
     "dev:amo": "better-npm-run dev:amo",
+    "dev:amo:dev": "better-npm-run dev:amo:dev",
     "dev:amo:no-proxy": "better-npm-run dev:amo:no-proxy",
+    "dev:amo:stage": "better-npm-run dev:amo:stage",
     "dev:disco": "better-npm-run dev:disco",
     "eslint": "eslint .",
     "flow": "flow",
@@ -44,6 +46,15 @@
         "NODE_APP_INSTANCE": "amo"
       }
     },
+    "dev:amo:dev": {
+      "command": "better-npm-run start-dev",
+      "env": {
+        "AMO_CDN": "https://addons-amo-dev-cdn.allizom.org",
+        "API_HOST": "https://addons-dev.allizom.org",
+        "CSP": false,
+        "NODE_APP_INSTANCE": "amo"
+      }
+    },
     "dev:amo:no-proxy": {
       "command": "better-npm-run start-dev",
       "env": {
@@ -51,6 +62,15 @@
         "PROXY_ENABLED": "false"
       }
     },
+    "dev:amo:stage": {
+      "command": "better-npm-run start-dev",
+      "env": {
+        "AMO_CDN": "https://addons-stage-cdn.allizom.org",
+        "API_HOST": "https://addons.allizom.org",
+        "CSP": false,
+        "NODE_APP_INSTANCE": "amo"
+      }
+    },
     "dev:disco": {
       "command": "better-npm-run start-dev",
       "env": {

src/core/middleware/security.js

@@ -7,6 +7,7 @@ import config from 'config';
 
 import log from 'core/logger';
 
+
 export function frameguard({ _config = config } = {}) {
   return helmet.frameguard(_config.get('frameGuard'));
 }
@@ -26,13 +27,16 @@ export function getNoScriptStyles(appName, { _config = config, _log = log } = {}
 }
 
 export function csp({ _config = config, noScriptStyles, _log = log } = {}) {
-  const cspConfig = _config.get('CSP');
+  const cspConfig = _config.get('CSP') !== 'false' ? _config.get('CSP') : false;
 
   if (cspConfig) {
     if (noScriptStyles) {
       const hash = crypto.createHash('sha256').update(noScriptStyles).digest('base64');
       const cspValue = `'sha256-${hash}'`;
-      if (!cspConfig.directives.styleSrc.includes(cspValue)) {
+      if (
+        cspConfig.directives &&
+        !cspConfig.directives.styleSrc.includes(cspValue)
+      ) {
         cspConfig.directives.styleSrc.push(cspValue);
       }
     }

tests/unit/core/middleware/test_cspMiddleware.js

@@ -116,6 +116,29 @@ describe('CSP Middleware', () => {
     expect(nextSpy.calledOnce).toEqual(true);
   });
 
+  it('converts false string to false boolean', () => {
+    // This is so we can have environment config vars (`CSP=false`) for
+    // `better-npm-run` that allow us to disable CSP when using dev/stage
+    // data on a local dev server.
+    const warnStub = sinon.stub();
+    const middleware = csp({
+      _config: {
+        get: sinon.stub().withArgs('CSP').returns('false'),
+      },
+      _log: {
+        warn: warnStub,
+      },
+    });
+    const nextSpy = sinon.stub();
+    const req = new MockExpressRequest();
+    const res = new MockExpressResponse();
+    middleware(req, res, nextSpy);
+    expect(
+      warnStub.calledWith('CSP has been disabled from the config')
+    ).toBe(true);
+    expect(nextSpy.calledOnce).toEqual(true);
+  });
+
   it('logs if the csp config is false', () => {
     const warnStub = sinon.stub();
     const middleware = csp({