SPFx App Configuration, dev vs prod

The Read and manipulate SPFx configuration values in your code like a boss by Sergei Sergeev is a very good start for setting different configurations for different environments.

In the meantime however, the cross-env is in a maintenance mode, and at the same time we got some other tools we can use.

Building on top of the Advanced section of Sergei's article, I did the following changes to make things work with a minimum effort:

npm install webpack-merge --save-dev

gulpfile.js

'use strict';

const build = require('@microsoft/sp-build-web');
const webpack = require('webpack');
const { merge } = require('webpack-merge'); //<--NEW
const argv = build.rig.getYargs().argv; //<--NEW

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
    var result = getTasks.call(build.rig);
    result.set('serve', result.get('serve-deprecated'));

    return result;
};

//NEW
build.configureWebpack.setConfig({
    additionalConfiguration: function (config) {
        console.log(argv);
        let defineOptions;

        if (argv.production) {
            console.log('***********    Applying production settings to webpack *********************');
            // specify production keys here
            defineOptions = {
                'apiUrl': JSON.stringify('https://production_Url')
            }
        }
        else { 
            console.log('***********    Applying development settings to webpack *********************');
            defineOptions = {
                'apiUrl': JSON.stringify('https://dev_Url')
            }
        }

        return merge(config, {
            plugins: [
                new webpack.DefinePlugin(defineOptions)
            ]
        });
    }
});

build.initialize(require('gulp'));

Have you noticed the const argv = build.rig.getYargs().argv;? I spotted it in another of Sergei's articles, and immediately used it to replace Yargs.

From this moment on, when calling gulp commands, the console.log(argv); command will print a list of available arguments. No changes to package.json required.

So for example:

• gulp serve --nobrowser: production: false
• gulp bundle: production: false
• gulp bundle --ship: production: true