Webpack-cra-runtime-config NPM

webpack-cra-runtime-plugin

With this plugin you could still use process.env object in your production built application. Used process.env.EVN_VAR values not replaced in production build, but keep clean process.env object. For runtime configuration update, plugin generate configuration chunk .dist file with configuration values placeholders, which could be replaced on server side at runtime.

Getting Started

To begin, you'll need to install webpack-cra-runtime-plugin:

$ npm install webpack-cra-runtime-plugin --save-dev

Then add the plugin to your react-app-rewired config. For example:

config-overrides.js

const { override } = require('customize-cra');
const webpack = require('webpack');
const CraRuntimeConfigPlugin = require('webpack-cra-runtime-plugin');

function overrides(config, env) {
    config.plugins.push(new CraRuntimeConfigPlugin(config))
    return config;
}

module.exports = {
    webpack: override(
        overrides,
    ),
}

Next just call generated helper script build/entrypoint.sh, which will update REACT_ configuration values from environment variables in configuration module. This is very useful when you use Docker containers, where posible just to call entrypoint.sh in ENTRYPOINT.

Dockerfile

COPY ./build/entrypoint.sh /working-directory/entrypoint.sh
RUN chmod -x /working-directory/entrypoint.sh
ENTRYPOINT ['/working-directory/entrypoint.sh']