⚙️ Added Environment Variables Support

Author: tushar1998

.env.development

@@ -0,0 +1 @@
+DEVELOPMENT=DEVELOPMENT

.env.production

@@ -0,0 +1 @@
+PRODUCTION=PRODUCTION

.gitignore

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

README.md

@@ -25,10 +25,12 @@ This Template is for building React efficient React Frontend Apps. It uses moder
 - Bundler : 📦 Webpack Version 5
 - Styling : 💅 styled-components (supports traditional css/scss)
 - Component Preview : 🔖 Storybook with Webpack 5 bundler
-- Environment Variable - ⚙️ Support with .env file
 - 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
 # Future Implementations
  - Code Spiltting
  - Tree Shaking

package.json

@@ -53,19 +53,6 @@
     "webpack-cli": "^4.7.0",
     "webpack-merge": "^5.7.3"
   },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json}": [
-      "eslint --fix"
-    ],
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@storybook/addon-actions": "^6.2.9",

webpack/webpack.common.js

@@ -2,23 +2,21 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { DefinePlugin } = require('webpack');
 const dotenv = require('dotenv');
-
-//! Note : Alias and Rules are the same for Storybook Webpack configuration
+const { DefinePlugin } = require('webpack');
 
 let envKeys = {};
 try {
-  const env = dotenv.config().parsed;
+  const env = dotenv.config({ path: path.join(__dirname, '..', '.env.local') }).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');
+  console.log('Loaded Environment variable from .env.local');
 } catch (error) {
-  console.log('.env File Not Found');
+  console.log('.env.local File Not Found');
 }
 
 module.exports = {
@@ -34,10 +32,6 @@ module.exports = {
       utils: path.resolve(__dirname, '..', 'src', 'utils'),
     },
   },
-  devServer: {
-    port: 3000,
-  },
-  stats: 'minimal',
   module: {
     rules: [
       {

webpack/webpack.dev.js

@@ -1,12 +1,28 @@
+/* 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,
-    open: true,
-  },
+  devServer: { hot: true },
   devtool: 'cheap-module-source-map',
+  stats: 'minimal',
   // incase failures for webpack react-refresh add HotModuleReplacementPlugin
-  plugins: [new ReactRefreshWebpackPlugin()],
+  plugins: [new ReactRefreshWebpackPlugin(), new DefinePlugin(envKeys)],
 };

webpack/webpack.prod.js

@@ -1,5 +1,24 @@
+/* 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',
-  plugins: [],
+  stats: 'normal',
+  plugins: [new DefinePlugin(envKeys)],
 };