fix: switch to axios and ensure production builds work

Author: calvinl

common/js/actions/todos.js

@@ -2,7 +2,7 @@ import {
   ADD_TODO, REMOVE_TODO, TOGGLE_TODO,
   FETCH_TODOS_REQUEST, FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE
 } from 'constants/index';
-import { fetch } from 'helper/api';
+import api from 'helper/api';
 import generateActionCreator from 'helper/generateActionCreator';
 
 export const addTodo = generateActionCreator(ADD_TODO, 'text');
@@ -14,15 +14,19 @@ export const fetchTodosSuccess = generateActionCreator(FETCH_TODOS_SUCCESS, 'tod
 export const fetchTodosFailure = generateActionCreator(FETCH_TODOS_FAILURE, 'error');
 
 export const fetchTodos = () => {
-  return async (dispatch) => {
+  return (dispatch) => {
     dispatch(fetchTodosRequest());
 
-    try {
-      const response = await fetch('/api/todos', { method: 'GET' });
-      const todos = await response.json();
-      dispatch(fetchTodosSuccess(todos));
-    } catch (e) {
-      dispatch(fetchTodosFailure(e.message));
-    }
+    return api.get('/api/todos')
+      .then(todos => {
+        dispatch(fetchTodosSuccess(todos));
+
+        return Promise.resolve(todos);
+      })
+      .catch(error => {
+        dispatch(fetchTodosFailure(error));
+
+        return Promise.reject(error);
+      });
   };
 };

common/js/helper/api.js

@@ -1,6 +1,12 @@
-import isomorphicFetch from 'isomorphic-fetch';
+import axios from 'axios';
 
-const apiUrl = process.env.APPLICATION_BASE_URL || '';
+const headers = { 'Content-Type': 'application/json' };
+const baseURL = process.env.APPLICATION_BASE_URL || '';
+const api = axios.create({ baseURL, headers, timeout: 200000 });
 
-// Overrides the fetch() method to add the base API url to the front.
-export const fetch = (url, ...rest) => isomorphicFetch(apiUrl + url, ...rest);
+api.interceptors.response.use(
+  (response) => Promise.resolve(response.data)  ,
+  (err) => Promise.reject(err.response.data)
+);
+
+module.exports = api;

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "universal-react-redux",
   "description": "A universal starter kit built with ES2015, react, react-router and redux. Server rendering with react and express. Bundled with Webpack with HMR transforms and css-modules support.",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "license": "MIT",
   "main": "client/index.js",
   "repository": {
@@ -129,6 +129,7 @@
   "dependencies": {
     "app-module-path": "^2.2.0",
     "autoprefixer": "^7.2.1",
+    "axios": "^0.17.1",
     "babel": "^6.23.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
@@ -193,6 +194,7 @@
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-isomorphic-tools": "^3.0.5",
+    "webpack-node-externals": "^1.6.0",
     "yn": "^2.0.0"
   }
 }

package.json

@@ -65,6 +65,6 @@ export const SERVER_RESOLVE_PATHS = {
   auth: 'server/auth',
   models: 'server/models',
   services: 'server/services',
-  constants: 'server/constants',
+  constants: 'common/js/constants',
   lib: 'server/lib'
 };