🔧 Deployment Specific Env.

Checked against existing env.example schema

Author: kevalmalde

.env.development

@@ -0,0 +1 @@
+API_BASE_URL=

.env.example

@@ -12,7 +12,8 @@
 /build
 
 # Environment files
-.env.local
+.env.*
+!.env.example
 
 #others
 yarn-error.log

.env.production

@@ -21,17 +21,17 @@ This Template is for building React efficient React Frontend Apps. It uses moder
 
 - Package Manager : 🧶 yarn Version 1.22.5
 - Compiler : 🤖 Babel Version 7
-- Framework : 🔥 React Project (TypeScript) Verison 17
+- Framework : 🔥 React Project (TypeScript) Version 17
 - Bundler : 📦 Webpack Version 5
 - Styling : 💅 styled-components (supports traditional css/scss)
 - Component Preview : 🔖 Storybook with Webpack 5 bundler
-- Development : eslint, prettier, editorconfig
+- Development : 🎨 eslint, prettier, editorconfig
 - Testing : 🧪 React Testing Library with Jest
-- Environment Variable - ⚙️ Support with environment files
-     - .env.local - varialbles with secrets (should include in .gitignore)
-     - .env.development - variables required while development
-     - .env.production - variables required for production
+- Environment Variable -
+     - APP_ENV - Current build / running environment. Default is local.
+- Environment Configuration - ⚙️ Support with deployment specific environment files
+     - .env.example - Define a schema of what variables should be defined in .env.{your_APP_ENV}. It throws an error if all values are not configured
+     - Access the env variable in javascript using process.env.<your-env-variable>
 # Future Implementations
  - Code Spiltting
  - Tree Shaking
- - cross-env

.gitignore

@@ -6,7 +6,7 @@
   "author": "Tushar Mistry",
   "license": "ISC",
   "scripts": {
-    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
+    "start": "cross-env APP_ENV=local webpack serve --config webpack/webpack.config.js --env env=dev",
     "build": "yarn clean && webpack --config webpack/webpack.config.js --env env=prod",
     "analyze": "yarn clean && webpack --config webpack/webpack.config.js --env env=prod --analyze",
     "clean": "rimraf build",
@@ -31,17 +31,17 @@
     "styled-components"
   ],
   "dependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.14.1",
+    "@babel/core": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
     "@svgr/webpack": "^5.5.0",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^8.1.1",
     "css-loader": "^5.2.4",
-    "dotenv": "^9.0.2",
+    "dotenv-webpack": "^7.0.2",
     "html-webpack-plugin": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -61,17 +61,18 @@
     "@storybook/builder-webpack5": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.4",
+    "@types/react-dom": "^17.0.5",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.1",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
@@ -80,7 +81,7 @@
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^11.0.0",
-    "netlify-cli": "^3.29.2",
+    "netlify-cli": "^3.29.15",
     "prettier": "^2.3.0",
     "react-refresh": "^0.10.0",
     "ts-jest": "^26.5.6",

README.md

@@ -5,12 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet" />
     <title>React-Template</title>
   </head>
   <body>
     <div id="root"></div>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet" />
   </body>
 </html>

package.json

@@ -2,22 +2,15 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const dotenv = require('dotenv');
-const { DefinePlugin } = require('webpack');
+const DotEnv = require('dotenv-webpack');
 
-let envKeys = {};
-try {
-  const env = dotenv.config({ path: path.join(__dirname, '..', '.env.local') }).parsed;
+const APP_ENV = process.env.APP_ENV || 'local';
 
-  envKeys = Object.keys(env).reduce((prev, next) => {
-    // eslint-disable-next-line no-param-reassign
-    prev[`process.env.${next}`] = JSON.stringify(env[next]);
-    return prev;
-  }, {});
-  console.log('Loaded Environment variable from .env.local');
-} catch (error) {
-  console.log('.env.local File Not Found');
-}
+const DotEnvPlugin = new DotEnv({
+  systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs. (useful for CI purposes)
+  safe: true, // load '.env.example' to verify the '.env' variables are all set.
+  path: path.join(__dirname, '..', `.env.${APP_ENV}`),
+});
 
 module.exports = {
   entry: path.resolve(__dirname, '..', './src/index.tsx'),
@@ -73,6 +66,6 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{ from: path.join(__dirname, 'source'), to: 'dest', noErrorOnMissing: true }],
     }),
-    new DefinePlugin(envKeys),
+    DotEnvPlugin,
   ],
 };

public/index.html

@@ -1,28 +1,11 @@
 /* eslint-disable no-console */
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const { DefinePlugin } = require('webpack');
-const dotenv = require('dotenv');
-const path = require('path');
-
-let envKeys = {};
-try {
-  const env = dotenv.config({ path: path.join(__dirname, '..', '.env.development') }).parsed;
-
-  envKeys = Object.keys(env).reduce((prev, next) => {
-    // eslint-disable-next-line no-param-reassign
-    prev[`process.env.${next}`] = JSON.stringify(env[next]);
-    return prev;
-  }, {});
-  console.log('Loaded environment variable from .env.development');
-} catch (error) {
-  console.log('.env.development file Not Found');
-}
 
 module.exports = {
   mode: 'development',
   devServer: { hot: true },
   devtool: 'cheap-module-source-map',
   stats: 'minimal',
   // incase failures for webpack react-refresh add HotModuleReplacementPlugin
-  plugins: [new ReactRefreshWebpackPlugin(), new DefinePlugin(envKeys)],
+  plugins: [new ReactRefreshWebpackPlugin()],
 };

webpack/webpack.common.js

@@ -1,24 +1,5 @@
-/* eslint-disable no-console */
-const dotenv = require('dotenv');
-const path = require('path');
-const { DefinePlugin } = require('webpack');
-
-let envKeys = {};
-try {
-  const env = dotenv.config({ path: path.join(__dirname, '..', '.env.production') }).parsed;
-  envKeys = Object.keys(env).reduce((prev, next) => {
-    // eslint-disable-next-line no-param-reassign
-    prev[`process.env.${next}`] = JSON.stringify(env[next]);
-    return prev;
-  }, {});
-  console.log('Loaded environment variable from .env.production');
-} catch (error) {
-  console.log('.env.production file Not Found');
-}
-
 module.exports = {
   mode: 'production',
   devtool: 'source-map',
   stats: 'normal',
-  plugins: [new DefinePlugin(envKeys)],
 };