Webpack loader to list the environment variables

Introduction

It list out all the environment variables which are required in the node environment. If publicEnv exists for web or mobile, it will list out all the variables that are missing in public-config.ts file as well as any unused keys. This applies to only web and mobile webpack bundle.

Install

npm install @common-stack/env-list-loader

Have the env-config.js file under config folder like below

# packages-modules/account-api/server/src/config/env-config.ts (example)
# name of the file need to be `env-config.ts`
# it has to be a cleanEnv function or process.cleanEnv function call 

export const config = cleanEnv(
    process.env,
    {
        MAIL_SEND_DEFAULT_EMAIL: str(),
        TEAM_INVITATION_TOKEN_SECRET: str({ devDefault: 'xxxxxx' }),
        INVITATION_TOKEN_SECRET: str({ devDefault: 'xxxxx' }),
        NAMESPACE: str({ default: 'default' }),
    },

)

If it is web, have the public-config.ts file under config folder like below

# name `const publicEnv =` need to be exact.
# Its value can be string, array, object 
const publicEnv = ['NODE_ENV', 'GRAPHQL_URL', 'FACEBOOK_APP_ID', 'GA_ID', 'LOG_LEVEL'];

In webpack config add as follows

const EnvListPlugin = require('@common-stack/env-list-loader');

module.exports = {

  // ...
  module: {
    rules: [
            {
                // searches for files ends with <dir>/config/env-config.js or <dir>/config/public-config.js
                test: /config\/(env-config|public-config)\.(j|t)s/,
                use: {
                    loader: '@common-stack/env-list-loader',
                },
            },
      // ...
    ],
  },
    plugins: [
      // The plugin lists the environment that required as well recommendation about the keys used.
      new EnvListPlugin.Plugin(),
    ],
  }
}

In webpack log will see below

missed keys found
[
  'APP_URL',
  'CALLBACK_REDIRECT_URL',
  'POPUP_REDIRECT_URL',
  'DEFAULT_EXTENDED_RENEWAL_TIME',
  'WEB_APP_URL',
  'LOGOUT_REDIRECT_PATH',
  'LOGIN_REDIRECT_PATH'
]
unused keys found
[
  'NODE_ENV',
  'GRAPHQL_SUBSCRIPTION_URL',
  'FACEBOOK_APP_ID',
  'GA_ID',
  'ROUTER_HISTORY',
  'LOG_LEVEL',
  'CDE_WORKSPACE_DOMAIN',
  'CDE_WORKSPACE_URL_PRFIX',
  'ZIPKIN_URL',
  'EXTENSION_SOCKET_URL'
]
required env to set
[
  'CLIENT_URL',
  'AUTH0_CLIENT_ID',
  'AUTH0_DOMAIN',
  'AUTH0_API_AUDIENCE',
  'STRIPE_PUBLISHABLE_KEY'
]

Based on the above information, we can cross check if our environment file have the required environment variables.

In browser, we can update the const publicEnv value to include all missed keys found and remove unused keys found

Babel support

We support above functionality as a babel plugin as well In babel config add as follows

{
    test: /config\/(env-config|public-config)\.(j|t)s/,
    exclude: /node_modules/,
    use: {
        // Converts source file to ast tree
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env', '@babel/preset-typescript'],
            // Expects an ast tree
            plugins: ['@common-stack/env-list-loader/lib/envLogger.js'],
        },
    },
},

references: https://github.com/crystal-ball/svg-symbol-sprite-loader