chore(proxy): add cors proxy server to npm registry server

Author: topheman

.env

@@ -1,2 +1,2 @@
-REACT_APP_NPM_REGISTRY_API_BASE_URL=http://localhost:8000/npm-registry
+REACT_APP_NPM_REGISTRY_API_BASE_URL=http://localhost:8000/https://registry.npmjs.org
 REACT_APP_NPM_REGISTRY_API_CACHE_ENABLED=true

NOTES.md

@@ -5,9 +5,14 @@ Bellow, you will find some notes I took along the way.
 ## Table of Contents
 
 * `create-react-app related`
-  * [Error npm test on MacOs Sierra](error-npm-test-on-macos-sierra)
+  * [Error npm test on MacOs Sierra](#error-npm-test-on-macos-sierra)
+* [React specific](#react-specific)
+* [Miscellaneous](#miscellaneous)
+  * [CORS anywhere development proxy](#cors-anywhere-development-proxy)
 
-## Error npm test on MacOs Sierra
+## create-react-app related
+
+### Error npm test on MacOs Sierra
 
 Due to the following error:
 
@@ -28,3 +33,15 @@ npm ERR! Test failed.  See above for more details.
 I installed [watchman](https://facebook.github.io/watchman/docs/install.html), which solved the problem ([known problem on MacOS](https://github.com/facebook/create-react-app/issues/871)).
 
 Note: `create-react-app` doesn't rely on the latest version `jest` (currently `[email protected]`). This [should be resolved](https://github.com/amasad/sane/pull/91) for more recent versions.
+
+## React specific
+
+## Miscellaneous
+
+### CORS anywhere development proxy
+
+The npm registry doesn't return any CORS headers nor can it be called with jsonp. So any in-browser XHR request will be blocked.
+
+I made a little script that will proxy any request, adding those CORS headers to the response. It is automatically launched on `npm start`.
+
+Note: `./bin/cors-anywhere.js` is for development purpose only, it may not be suited for production.

bin/cors-anywhere.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+/**
+ * This file will open a server that will proxy ANY requests
+ * and add CORS to the response headers.
+ *
+ * It is meant to be used for development purpose.
+ */
+
+// Listen on a specific host via the HOST environment variable
+const host = process.env.HOST || "0.0.0.0";
+// Listen on a specific port via the PORT environment variable
+const port = process.env.PORT || 8000;
+
+const corsProxy = require("cors-anywhere"); // eslint-disable-line
+
+corsProxy
+  .createServer({
+    originWhitelist: [] // Allow all origins
+  })
+  .listen(port, host, () => {
+    console.log(`Running CORS Anywhere on ${host}:${port}`);
+  });

package-lock.json

@@ -14,7 +14,8 @@
     "warning": "^3.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "npm-run-all --parallel start:react proxy-npm-registry",
+    "start:react": "react-scripts start",
     "build": "react-scripts build",
     "test": "npm run test:watch",
     "test:watch": "react-scripts test --env=jsdom",
@@ -23,17 +24,20 @@
     "eject": "react-scripts eject",
     "lint": "npx eslint .",
     "pretty": "npx prettier --write '**/*.{js,jsx,json,css,scss}'",
-    "precommit": "lint-staged && npm run lint && npm run test:precommit"
+    "precommit": "lint-staged && npm run lint && npm run test:precommit",
+    "proxy-npm-registry": "node ./bin/cors-anywhere.js"
   },
   "lint-staged": {
     "**/*.{js,jsx,json,css,scss}": ["prettier --write", "git add"]
   },
   "devDependencies": {
+    "cors-anywhere": "^0.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-prettier": "^2.6.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.0",
+    "npm-run-all": "^4.1.2",
     "prettier": "1.11.1"
   }
 }