How to handle env variable using DefinePlugin in SPFx Solutions

Ahamed Fazil Buhari
 
Senior Developer
May 25, 2020
 
Rate this article
 
Views
2785

Handling environmental variable in solution is pretty important especially if we have multiple target environment to deploy the solution. One easy way to handle Env using code is by using Webpack DefinePlugin, all we need to do is create a file called “webpack-definePlugin-variables.d.ts” inside src folder.

defineplugin

start declaring variables that you are going to use in the code. For example, I just declared three variables – AppInsight key, webpart name, release type.

declarevar

Now we are free to use those var in our code. example,

globalVar

final thing that we need to do is, modify gulpfile.js to map those env var with actual value during build. The updated gulpfile.js will look like below. I have added condition for DEBUG which will be true if we work with workbench. And if you are using CI/CD like Azure Pipeline then we can easily map environemental variable as process.env.”varname”

"use strict";
const build = require("@microsoft/sp-build-web");
build.addSuppression(
  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
);
build.initialize(require("gulp"));

//#region webpack config custom actions - CUSTOM
const webpack = require("webpack");
const fs = require("fs");

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfig) => {
    // find the Define plugins

    let plugin, pluginDefine;
    for (var i = 0; i < generatedConfig.plugins.length; i++) {
      plugin = generatedConfig.plugins[i];
      if (plugin instanceof webpack.DefinePlugin) {
        pluginDefine = plugin;
      }
    }

    // determine if in debug build
    const isDebugMode = pluginDefine.definitions.DEBUG;
    // set env replacements values
    if (isDebugMode) {
      pluginDefine.definitions.AZURE_APPINSIGHTS_INSTRUMENTATIONKEY_ENVV = JSON.stringify(
        ""
      );
      pluginDefine.definitions.WEBPART_NAME_ENVV = JSON.stringify(
        "MyWebPart_local"
      );
      pluginDefine.definitions.RELEASE_TYPE_ENVV = JSON.stringify(
        "Local Version"
      );
    } else {

      pluginDefine.definitions.AZURE_APPINSIGHTS_INSTRUMENTATIONKEY_ENVV = JSON.stringify(
        process.env.AZURE_APPINSIGHTS_INSTRUMENTATIONKEY_ENVV
      );
      pluginDefine.definitions.WEBPART_NAME_ENVV = JSON.stringify(
        process.env.WEBPART_NAME_ENVV
      );
      pluginDefine.definitions.RELEASE_TYPE_ENVV = JSON.stringify(
        process.env.RELEASE_TYPE_ENVV
      );
    }
    return generatedConfig;
  },
});

//#endregion

If you have the same variables in azure pipeline, then during build it will replace the value from Azure Pipeline library.

az pipeline

Hope this article gives an idea on how to quickly declare global variables for SPFx solution.

 

Happy Coding,

Fazil

 

Category : SharePoint, SPFx, TypeScript

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment