Feature(env): add dotenv file support

Author: Armour

.env

@@ -0,0 +1,7 @@
+PORT=3003
+PORT_WEBPACK_DEV_SERVER=3004
+PORT_BUNDLE_ANALYZER=3005
+
+POSTGRES_DB=docker
+POSTGRES_USER=docker
+POSTGRES_PASSWORD=docker

Dockerfile

@@ -1,12 +1,14 @@
 FROM node:alpine
 
+ARG PORT=${PORT}
+
 WORKDIR /usr/src/app
 COPY . /usr/src/app/
 
 RUN apk add --no-cache --update make gcc g++ libc-dev libpng-dev automake autoconf libtool nasm
 RUN yarn install
 RUN yarn build
 
-EXPOSE 3003
+EXPOSE ${PORT}
 
 CMD ["yarn", "serve"]

docker-compose.yml

@@ -5,8 +5,10 @@ services:
     image: cguo/express-webpack-react-redux-typescript-boilerplate
     build: # ignored when deploying a stack in swarm mode or kubernetes
       context: .
+      args:
+        - PORT=${PORT}
     ports:
-      - "3003:3003"
+      - "${PORT}:${PORT}"
     depends_on: # ignored when deploying a stack in swarm mode or kubernetes
       - postgres
       - redis
@@ -22,9 +24,9 @@ services:
       - ./backend/sql/schema.sql:/docker-entrypoint-initdb.d/1-schema.sql
       - ./backend/sql/data.sql:/docker-entrypoint-initdb.d/2-data.sql
     environment:
-      - POSTGRES_DB=docker
-      - POSTGRES_USER=docker
-      - POSTGRES_PASSWORD=docker
+      - POSTGRES_DB=${POSTGRES_DB}
+      - POSTGRES_USER=${POSTGRES_USER}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
     ports:
       - "5432:5432"
     restart: always # ignored when deploying a stack in swarm mode or kubernetes

frontend/src/router.tsx

@@ -13,22 +13,42 @@ import ParallaxPageLoader from 'pages/ParallaxPage/components/ContentLoader';
 import ReactPageLoader from 'pages/ReactPage/components/ContentLoader';
 
 const HomePage = Loadable({
-  loader: () => import(/* webpackChunkName: "home-page" */ './pages/HomePage'),
+  loader: () => import(
+    /*
+      webpackChunkName: "home-page",
+      webpackPreload: true
+    */
+    './pages/HomePage'),
   loading: HomePageLoader,
 });
 
 const NotFoundPage = Loadable({
-  loader: () => import(/* webpackChunkName: "not-found-page" */ './pages/NotFoundPage'),
+  loader: () => import(
+    /*
+      webpackChunkName: "not-found-page",
+      webpackPrefetch: true
+    */
+    './pages/NotFoundPage'),
   loading: NotFoundPageLoader,
 });
 
 const ParallaxPage = Loadable({
-  loader: () => import(/* webpackChunkName: "parallax-page" */ './pages/ParallaxPage'),
+  loader: () => import(
+    /*
+      webpackChunkName: "parallax-page",
+      webpackPrefetch: true
+    */
+    './pages/ParallaxPage'),
   loading: ParallaxPageLoader,
 });
 
 const ReactPage = Loadable({
-  loader: () => import(/* webpackChunkName: "react-page" */ './pages/ReactPage'),
+  loader: () => import(
+    /*
+      webpackChunkName: "react-page",
+      webpackPrefetch: true
+    */
+    './pages/ReactPage'),
   loading: ReactPageLoader,
 });
 

package.json

@@ -33,27 +33,27 @@
     }
   },
   "dependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@types/i18next": "^8.4.5",
     "@types/i18next-browser-languagedetector": "^2.0.1",
     "@types/materialize-css": "^1.0.4",
     "@types/prismjs": "^1.9.0",
-    "@types/react": "^16.4.13",
+    "@types/react": "^16.4.14",
     "@types/react-content-loader": "^3.1.3",
     "@types/react-dom": "^16.0.7",
     "@types/react-i18next": "^7.8.2",
     "@types/react-loadable": "^5.4.1",
-    "@types/react-redux": "^6.0.7",
-    "@types/react-router": "^4.0.30",
-    "@types/react-router-dom": "^4.3.0",
+    "@types/react-redux": "^6.0.9",
+    "@types/react-router": "^4.0.31",
+    "@types/react-router-dom": "^4.3.1",
     "@types/redux-logger": "^3.0.6",
     "@types/uuid": "^3.4.4",
     "@types/webpack-env": "^1.13.6",
-    "add-asset-html-webpack-plugin": "^2.1.3",
+    "add-asset-html-webpack-plugin": "^3.0.1",
     "awesome-typescript-loader": "^5.2.1",
     "axios": "^0.18.0",
     "babel-loader": "^8.0.2",
@@ -69,6 +69,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.0",
+    "dotenv-webpack": "^1.5.7",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "express": "^4.16.3",
     "express-session": "^1.15.6",
@@ -77,13 +78,13 @@
     "history": "^4.7.2",
     "html-webpack-plugin": "^3.2.0",
     "http-status": "^1.2.0",
-    "i18next": "^11.7.0",
+    "i18next": "^11.9.0",
     "i18next-browser-languagedetector": "^2.2.3",
     "image-webpack-loader": "^4.3.1",
     "immutable": "4.0.0-rc.9",
     "materialize-css": "1.0.0",
     "mini-css-extract-plugin": "^0.4.2",
-    "morgan": "^1.9.0",
+    "morgan": "^1.9.1",
     "node-sass": "^4.9.3",
     "nodemon": "^1.18.4",
     "offline-plugin": "^5.0.5",
@@ -94,10 +95,10 @@
     "postcss-preset-env": "^5.3.0",
     "prismjs": "^1.15.0",
     "progress-bar-webpack-plugin": "^1.11.0",
-    "react": "^16.5.0",
+    "react": "^16.5.1",
     "react-content-loader": "^3.1.2",
-    "react-dom": "^16.5.0",
-    "react-hot-loader": "^4.3.6",
+    "react-dom": "^16.5.1",
+    "react-hot-loader": "^4.3.8",
     "react-i18next": "^7.12.0",
     "react-loadable": "^5.5.0",
     "react-redux": "^5.0.7",
@@ -109,12 +110,12 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.0",
     "trash-cli": "^1.4.0",
-    "ts-loader": "^5.1.0",
+    "ts-loader": "^5.1.1",
     "typescript": "^3.0.3",
     "url-loader": "^1.1.1",
     "uuid": "^3.3.2",
-    "webpack": "^4.17.2",
-    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack": "^4.19.0",
+    "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cli": "^3.1.0",
     "webpack-merge": "^4.1.4",
     "webpack-pwa-manifest": "^3.7.1"
@@ -124,19 +125,21 @@
     "@types/jest": "^23.3.2",
     "@types/react-test-renderer": "^16.0.2",
     "babel-core": "^7.0.0-bridge.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "commitlint": "^7.1.2",
     "commitlint-config-armour": "^1.2.1",
     "coveralls": "^3.0.2",
-    "eslint": "^5.5.0",
+    "dotenv": "^6.0.0",
+    "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-import-resolver-webpack": "^0.10.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
-    "husky": "1.0.0-rc.13",
+    "husky": "1.0.0-rc.14",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.5.0",
-    "react-test-renderer": "^16.5.0",
+    "jest": "^23.6.0",
+    "react-test-renderer": "^16.5.1",
     "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.2.0",
     "ts-jest": "^23.1.4",

webpack.config.base.babel.js

@@ -1,3 +1,5 @@
+import 'dotenv/config'; // Allow webpack config file to use .env variables
+
 import path from 'path';
 import webpack from 'webpack';
 
@@ -6,7 +8,9 @@ import postcssImport from 'postcss-import';
 import postcssPresetEnv from 'postcss-preset-env';
 
 import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
+import DotenvPlugin from 'dotenv-webpack';
 import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
@@ -118,6 +122,10 @@ export default {
 
   // A list of used webpack plugins
   plugins: [
+    // Enforces case sensitive paths.
+    new CaseSensitivePathsPlugin(),
+    // Supports dotenv file
+    new DotenvPlugin(),
     // Warns when multiple versions of the same package exist in a build
     new DuplicatePackageCheckerPlugin(),
     // Load pre-build dll reference files

webpack.config.dev.babel.js

@@ -23,11 +23,11 @@ export default merge(BaseWebpackConfig, {
 
   devServer: {
     // Port number for webpack dev server
-    port: 3004,
+    port: process.env.PORT_WEBPACK_DEV_SERVER || 3004,
     // Add proxy for api call
     proxy: {
       '/api/v1': {
-        target: 'http://localhost:3003/',
+        target: `http://localhost:${process.env.PORT || 3003}/`,
         secure: false,
       },
     },

webpack.config.profile.babel.js

@@ -8,7 +8,7 @@ export default merge(ProdWebpackConfig, {
   plugins: [
     // Webpack bundle analyzer for profiling
     new BundleAnalyzerPlugin({
-      analyzerPort: 3003,
+      analyzerPort: process.env.PORT_BUNDLE_ANALYZER || 3005,
       generateStatsFile: true,
     }),
   ],