Ran npm run eject, added sass to the config, and sass files

Author: David Silva

.eslintrc

@@ -11,24 +11,6 @@
     "sinon": true,
     "__DEV__": true
   },
-  "ecmaFeatures": {
-    "arrowFunctions": true,
-    "blockBindings": true,
-    "classes": true,
-    "defaultParams": true,
-    "destructuring": true,
-    "forOf": true,
-    "generators": false,
-    "modules": true,
-    "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,
-    "objectLiteralShorthandMethods": true,
-    "objectLiteralShorthandProperties": true,
-    "spread": true,
-    "superInFunctions": true,
-    "templateStrings": true,
-    "jsx": true
-  },
   "rules": {
     "no-var": 2,                     // http://eslint.org/docs/rules/no-var
     "prefer-const": 2,               // http://eslint.org/docs/rules/prefer-const

config/env.js

@@ -0,0 +1,90 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+    throw new Error(
+        'The NODE_ENV environment variable is required but was not specified.'
+    );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+    `${paths.dotenv}.${NODE_ENV}.local`,
+    `${paths.dotenv}.${NODE_ENV}`,
+    // Don't include `.env.local` for `test` environment
+    // since normally you expect tests to produce the same
+    // results for everyone
+    NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+    paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+dotenvFiles.forEach(dotenvFile => {
+    if (fs.existsSync(dotenvFile)) {
+        require('dotenv').config({
+            path: dotenvFile,
+        });
+    }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+    .split(path.delimiter)
+    .filter(folder => folder && !path.isAbsolute(folder))
+    .map(folder => path.resolve(appDirectory, folder))
+    .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+    const raw = Object.keys(process.env)
+        .filter(key => REACT_APP.test(key))
+        .reduce(
+            (env, key) => {
+                env[key] = process.env[key];
+                return env;
+            },
+            {
+                // Useful for determining whether we’re running in production mode.
+                // Most importantly, it switches React into the correct mode.
+                NODE_ENV: process.env.NODE_ENV || 'development',
+                // Useful for resolving the correct path to static assets in `public`.
+                // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+                // This should only be used as an escape hatch. Normally you would put
+                // images into the `src` and `import` them in code to get their paths.
+                PUBLIC_URL: publicUrl,
+            }
+        );
+    // Stringify all values so we can feed into Webpack DefinePlugin
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {}),
+    };
+
+    return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+    process() {
+        return 'module.exports = {};';
+    },
+    getCacheKey() {
+    // The output is always the same.
+        return 'cssTransform';
+    },
+};

config/jest/fileTransform.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+
+module.exports = {
+    process(src, filename) {
+        return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+    },
+};

config/paths.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(_path, needsSlash) {
+    const hasSlash = _path.endsWith('/');
+    if (hasSlash && !needsSlash) {
+        return _path.substr(_path, _path.length - 1);
+    } else if (!hasSlash && needsSlash) {
+        return `${_path}/`;
+    }
+    return _path;
+}
+
+const getPublicUrl = appPackageJson =>
+    envPublicUrl || require(appPackageJson).homepage;
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+    const publicUrl = getPublicUrl(appPackageJson);
+    const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+    return ensureSlash(servedUrl, true);
+}
+
+// config after eject: we're in ./config/
+module.exports = {
+    dotenv: resolveApp('.env'),
+    appBuild: resolveApp('build'),
+    appPublic: resolveApp('public'),
+    appHtml: resolveApp('public/index.html'),
+    appIndexJs: resolveApp('src/index.js'),
+    appPackageJson: resolveApp('package.json'),
+    appSrc: resolveApp('src'),
+    yarnLockFile: resolveApp('yarn.lock'),
+    testsSetup: resolveApp('src/setupTests.js'),
+    appNodeModules: resolveApp('node_modules'),
+    publicUrl: getPublicUrl(resolveApp('package.json')),
+    servedPath: getServedPath(resolveApp('package.json')),
+};

config/polyfills.js

@@ -0,0 +1,22 @@
+'use strict';
+
+if (typeof Promise === 'undefined') {
+    // Rejection tracking prevents a common issue where React gets into an
+    // inconsistent state due to an error, but it gets swallowed by a Promise,
+    // and the user has no idea what causes React's erratic future behavior.
+    require('promise/lib/rejection-tracking').enable();
+    window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// fetch() polyfill for making API calls.
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require('object-assign');
+
+// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
+// We don't polyfill it in the browser--this is user's responsibility.
+if (process.env.NODE_ENV === 'test') {
+    require('raf').polyfill(global);
+}

config-overrides.js renamed to config/webpack.config.common.js

@@ -1,21 +1,9 @@
-'use strict';
-
 const path = require('path');
 
-module.exports = (config) => {
-    config.module.loaders.push(
-        {
-            enforce: 'pre',
-            test: /\.js?$/,
-            exclude: /node_modules/,
-            loader: 'eslint-loader',
-            options: {
-                configFile: '.eslintrc',
-                failOnWarning: false,
-                failOnError: false
-            }
-        },
-        {
+module.exports = {
+    module: {
+        rules: [
+            {
             test: /\.scss/,
             use: [
                 {
@@ -31,18 +19,14 @@ module.exports = (config) => {
                 {
                     loader: 'sass-loader',
                     options: {
-                        data: `@import "${path.join(__dirname, 'app/styles/_mixins.scss')}";`
+                        data: `@import "${path.join(__dirname, '../src/styles/_variables.scss')}";`
                     }
                 }
             ]
         },
-        {
-            test: /\.css$/,
-            use: [ 'style-loader', 'css-loader' ]
-        },
         { test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
         { test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader?name=assets/fonts/[name].[ext]' },
         { test: /\.(gif|jpg|png)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader?name=assets/images/[name].[ext]' }
-    );
-    return config;
+    ],
+    }
 };