bg(Fix Heroku)Fix Heroku Configurations

- configures app to read heroku environment variables [#162693956]
andela · Dec 19, 2018 · 53bb3fa · 53bb3fa
1 parent e5af190
commit 53bb3fa
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -3,10 +3,13 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "engines": {
+    "node": "10.11.0"
+  },
   "scripts": {
-    "start:dev": "webpack-dev-server --open --config webpack.dev.js ",
-    "start:prod": "npm run build && serve -s dist",
-    "start": "serve -s dist",
+    "start:dev": "NODE_ENV=development env-cmd .env webpack-dev-server --open",
+    "start:prod": "NODE_ENV=production npm run build && serve dist",
+    "start": "serve dist",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint src",
     "heroku-postbuild": "npm run build",
@@ -37,6 +40,7 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "coveralls": "^3.0.2",
+    "env-cmd": "^8.0.2",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
@@ -48,7 +52,7 @@
     "eslint-plugin-react": "^7.11.1"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.8",
     "@fortawesome/free-brands-svg-icons": "^5.5.0",
     "@fortawesome/free-solid-svg-icons": "^5.5.0",
@@ -92,11 +96,10 @@
     "sass-loader": "^7.1.0",
     "serve": "^10.1.1",
     "sweetalert2": "^7.29.2",
-    "webpack": "^4.26.1",
+    "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
-    "webpack-merge": "^4.1.4",
-    "@babel/plugin-proposal-class-properties": "^7.2.1"
+    "webpack-merge": "^4.1.4"
   },
   "jest": {
     "snapshotSerializers": [

diff --git a/webpack.common.js → webpack.config.js b/webpack.common.js → webpack.config.js
@@ -2,41 +2,46 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const Dotenv = require('dotenv-webpack');
+const webpack = require('webpack');
+
+const mode = process.NODE_ENV || 'production';
 
 module.exports = {
-  entry: {
-    app: './src/index.js'
-  },
+  mode,
+  entry: ['babel-polyfill', './src/index.js'],
+  //   entry: {
+  //     app: './src/index.js',
+  //   },
   output: {
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader'
-        }
+          loader: 'babel-loader',
+        },
       },
       {
         test: /\.html$/,
         use: [
           {
             loader: 'html-loader',
-            options: { minimize: true }
-          }
-        ]
+            options: { minimize: true },
+          },
+        ],
       },
       {
         test: /\.(css|scss)$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpg)$/,
         include: path.join(__dirname, 'static/images'),
-        loader: 'file-loader'
+        loader: 'file-loader',
       },
       {
         test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
@@ -45,9 +50,9 @@ module.exports = {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
-              outputPath: 'fonts/'
-            }
-          }
+              outputPath: 'fonts/',
+            },
+          },
         ],
       },
     ],
@@ -65,5 +70,11 @@ module.exports = {
       chunkFilename: '[id].css',
     }),
     new Dotenv(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        APP_URL: JSON.stringify(process.env.APP_URL),
+      },
+    }),
   ],
 };
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -1,10 +1,10 @@
 const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
+const common = require('./webpack.config.js');
 
 module.exports = merge(common, {
-	mode: 'development',
-	devtool: 'inline-source-map',
-	devServer: {
-		contentBase: './dist'
-	}
-});
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+  },
+});
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,6 +1,6 @@
 const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
+const common = require('./webpack.config.js');
 
 module.exports = merge(common, {
-	mode: 'production',
-});
+  mode: 'production',
+});