Add mocks

WIP on creating a mechanism to mock client side api calls. Using NODE_ENV=MOCK triggers the server to send an alternative clientConfig configuration down to the client

app/actions/lastfm-actions/index.js

@@ -7,10 +7,10 @@ export function fetchLastFmData(actions, params) {
   return {
     actions,
     promise: {
-      url: 'http://ws.audioscrobbler.com/2.0/',
+      url: window.clientConfig.endpoints.lastfm.url,
       headers: {},
       params: {
-        api_key: '57ee3318536b23ee81d6b27e36997cde',
+        api_key: window.clientConfig.endpoints.lastfm.api_key,
         format : 'json',
         ...params
       },

config/default.json

@@ -0,0 +1,9 @@
+{
+  "port": 3000,
+  "endpoints": {
+    "lastfm": { 
+      "url": "http://ws.audioscrobbler.com/2.0/",
+      "api_key": "57ee3318536b23ee81d6b27e36997cde"
+    }
+  }
+}

config/mock.json

@@ -0,0 +1,9 @@
+{
+  "port": 3000,
+  "endpoints": {
+    "lastfm": { 
+      "url": "http://localhost:2020",
+      "api_key": "57ee3318536b23ee81d6b27e36997cde"
+    }
+  }
+}

mocks/index.js

@@ -0,0 +1,12 @@
+import express from 'express';
+
+const mockServer = express();
+
+mockServer.get('*', (req, res) => {
+  console.log(req.params);
+});
+
+
+mockServer.listen('2020', () => {
+  console.log('Mock server running on port 2020');
+});

mocks/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "Mock server",
+  "description": "Mocks out the apis for Tuneify for development without internet connection and for unit tests",
+  "version": "0.0.1",
+  "dependencies": {
+    "express": "4.14.0"
+  }
+}

package.json

@@ -4,43 +4,45 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start:mock": "NODE_ENV=MOCK node .",
+    "start": "NODE_ENV=development node ."
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-register": "^6.11.6",
-    "classnames": "^2.2.5",
-    "ejs": "^2.5.1",
-    "es6-promise": "^3.3.1",
-    "express": "^4.14.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "isomorphic-fetch": "^2.2.1",
-    "lodash": "^4.16.1",
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "react-redux": "^4.4.5",
-    "react-router": "^2.6.1",
-    "react-router-redux": "^4.0.5",
-    "redux": "^3.5.2",
-    "redux-thunk": "^2.1.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-middleware": "^1.6.1"
+    "babel-plugin-react-transform": "2.0.2",
+    "babel-plugin-transform-react-jsx": "6.8.0",
+    "babel-polyfill": "6.13.0",
+    "babel-preset-es2015": "6.13.2",
+    "babel-register": "6.11.6",
+    "classnames": "2.2.5",
+    "config": "1.24.0",
+    "ejs": "2.5.1",
+    "es6-promise": "3.3.1",
+    "express": "4.14.0",
+    "extract-text-webpack-plugin": "1.0.1",
+    "isomorphic-fetch": "2.2.1",
+    "lodash": "4.16.1",
+    "react": "15.3.0",
+    "react-dom": "15.3.0",
+    "react-redux": "4.4.5",
+    "react-router": "2.6.1",
+    "react-router-redux": "4.0.5",
+    "redux": "3.5.2",
+    "redux-thunk": "2.1.0",
+    "webpack": "1.13.1",
+    "webpack-dev-middleware": "1.6.1"
   },
   "devDependencies": {
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "eslint": "^3.3.0",
-    "eslint-config-airbnb": "^10.0.1",
-    "eslint-plugin-import": "^1.13.0",
-    "eslint-plugin-jsx-a11y": "^2.1.0",
-    "eslint-plugin-react": "^6.1.0",
-    "file-loader": "^0.9.0"
+    "babel-core": "6.13.2",
+    "babel-eslint": "6.1.2",
+    "babel-loader": "6.2.4",
+    "babel-plugin-transform-object-rest-spread": "6.8.0",
+    "eslint": "3.3.0",
+    "eslint-config-airbnb": "10.0.1",
+    "eslint-plugin-import": "1.13.0",
+    "eslint-plugin-jsx-a11y": "2.1.0",
+    "eslint-plugin-react": "6.1.0",
+    "file-loader": "0.9.0"
   }
 }

server.js

@@ -1,3 +1,4 @@
+import config from 'config';
 import express from 'express';
 import React from 'react';
 import path from 'path';
@@ -104,6 +105,13 @@ const store = createStore(
   }
 );
 
+// pass the necessary config down to the client
+// this makes it easy to manage stuff like mocking api urls
+// configurable via NODE_ENV
+const clientConfig = {
+  endpoints : config.get('endpoints')
+}
+
 app.get('*', (req, res) => {
   match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
     if (error) {
@@ -130,6 +138,7 @@ app.get('*', (req, res) => {
           <div id="react-view">${componentHTML}</div>
           <script>
             window.__PRELOADED_STATE__ = ${JSON.stringify(serverState)}
+            window.clientConfig = ${JSON.stringify(clientConfig)}
           </script>
           <script src="https://apis.google.com/js/api.js"></script>
           <script type="application/javascript" src="/bundle.js"></script>
@@ -143,6 +152,7 @@ app.get('*', (req, res) => {
   });
 });
 
-app.listen(3000, () => {
-  console.log('Tuneify running on port 3000');
+const port = config.get('port');
+app.listen(port, () => {
+  console.log(`Tuneify running on port ${port}`);
 });