load environment from .env file

Author: gondzo

envSample renamed to .env.example

@@ -23,6 +23,7 @@ See Guild https://github.com/lorenwest/node-config/wiki/Configuration-Files
 |`REACT_APP_AUTH0_CLIEND_ID`| The React app auth0 client id`|
 |`REACT_APP_AUTH0_DOMAIN`| The React app auth0 domain`|
 
+Environment variables will be loaded from the .env file during build. Create the .env file based on the provided env.example
 
 ## Install dependencies
 `npm i`

README.md

@@ -10,15 +10,15 @@
     "lint": "eslint --ext jsx --ext js .",
     "lint:fix": "npm run lint -- --fix",
     "test": "mocha-webpack --require setup-test.js --webpack-config webpack.config-test.js \"src/**/*.spec.(jsx|js)\"",
-    "postinstall":"npm run build",
-    "heroku:prod:init":"git remote remove production && heroku create --remote production && heroku config:set NODE_ENV=production --remote production",
+    "postinstall": "npm run build",
+    "heroku:prod:init": "git remote remove production && heroku create --remote production && heroku config:set NODE_ENV=production --remote production",
     "heroku:dev:init": "git remote remove dev && heroku create --remote dev && heroku config:set NODE_ENV=development NPM_CONFIG_PRODUCTION=false --remote dev",
-    "heroku:staging:init":  "git remote remove staging && heroku create --remote staging && heroku config:set NODE_ENV=staging --remote staging",
+    "heroku:staging:init": "git remote remove staging && heroku create --remote staging && heroku config:set NODE_ENV=staging --remote staging",
     "heroku:test:init": "git remote remove test && heroku create --remote test && heroku config:set NODE_ENV=test --remote test",
-    "heroku:prod:deploy":"git push production master",
-    "heroku:dev:deploy":"git push dev master",
-    "heroku:staging:deploy":"git push staging master",
-    "heroku:test:deploy":"git push test master"
+    "heroku:prod:deploy": "git push production master",
+    "heroku:dev:deploy": "git push dev master",
+    "heroku:staging:deploy": "git push staging master",
+    "heroku:test:deploy": "git push test master"
   },
   "author": "",
   "license": "MIT",
@@ -44,6 +44,8 @@
     "cross-env": "^3.1.2",
     "css-loader": "^0.23.0",
     "dateformat": "^2.0.0",
+    "dotenv": "^2.0.0",
+    "dotenv-webpack": "^1.3.1",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
@@ -65,17 +67,18 @@
     "rc-tooltip": "^3.4.2",
     "react": "^15.3.2",
     "react-breadcrumbs": "^1.5.1",
-    "react-count-down": "^1.0.3",
     "react-click-outside": "^2.2.0",
+    "react-count-down": "^1.0.3",
     "react-css-modules": "^3.7.10",
     "react-date-picker": "^5.3.28",
     "react-dom": "^15.3.2",
+    "react-dropdown": "^1.2.0",
     "react-flexbox-grid": "^0.10.2",
     "react-google-maps": "^6.0.1",
-    "react-dropdown": "^1.2.0",
+    "react-highcharts": "^11.0.0",
     "react-icheck": "^0.3.6",
     "react-input-range": "^0.9.3",
-    "react-highcharts": "^11.0.0",
+    "react-modal": "^1.5.2",
     "react-redux": "^4.0.0",
     "react-redux-toastr": "^4.2.2",
     "react-router": "^2.8.1",
@@ -84,8 +87,8 @@
     "react-simple-dropdown": "^1.1.5",
     "react-slick": "^0.14.5",
     "react-star-rating-component": "^1.2.2",
-    "react-timeago": "^3.1.3",
     "react-tabs": "^0.8.2",
+    "react-timeago": "^3.1.3",
     "reactable": "^0.14.1",
     "redbox-react": "^1.2.10",
     "redux": "^3.0.0",
@@ -95,8 +98,8 @@
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.0",
     "sass-loader": "^4.0.0",
-    "socket.io-client": "^1.7.1",
     "slick-carousel": "^1.6.0",
+    "socket.io-client": "^1.7.1",
     "style-loader": "^0.13.0",
     "superagent": "^2.3.0",
     "superagent-promise": "^1.1.0",

package.json

@@ -3,6 +3,8 @@
 const path = require('path');
 const _ = require('lodash');
 const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
+
 const config = require('config');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -94,16 +96,12 @@ module.exports = {
     publicPath: '/',
   },
   plugins: [
+    new Dotenv({
+      path: '.env', // if not simply .env 
+      safe: true // lets load the .env.example file as well 
+    }),
     new webpack.DefinePlugin({
-      __COVERAGE__: !argv.watch && process.env.NODE_ENV === 'test',
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-        GOOGLE_API_KEY: JSON.stringify(process.env.GOOGLE_API_KEY),
-        REACT_APP_API_BASE_PATH: JSON.stringify(process.env.REACT_APP_API_BASE_PATH),
-        REACT_APP_SOCKET_URL: JSON.stringify(process.env.REACT_APP_SOCKET_URL),
-        REACT_APP_AUTH0_CLIEND_ID: JSON.stringify(process.env.REACT_APP_AUTH0_CLIEND_ID),
-        REACT_APP_AUTH0_DOMAIN: JSON.stringify(process.env.REACT_APP_AUTH0_DOMAIN),
-      },
+      __COVERAGE__: !argv.watch && process.env.NODE_ENV === 'test'
     }),
     new HtmlWebpackPlugin({
       GOOGLE_API_KEY: config.GOOGLE_API_KEY,