How to inject env variables with doppler into react with webpack

Question

I have recently switched from using .env file to a secrets management tool, Doppler, and is trying to inject the variables from Doppler into React, which is built by webpack.

However, simply by running

doppler run -- webpack serve --config webpack.dev.js

does not do the trick. What should I do if I want to inject env from Doppler into webpack to build my React app?

Answer 1

I found out about the EnvironmentPlugin in webpack,

When you run doppler run -- webpack serve --config webpack.dev.js, doppler injected the env variables into the runtime and we can pass them with EnvironmentPlugin by specifying the key name in the array and pass that into the plugin

const { EnvironmentPlugin } = require("webpack");

module.exports = {
  plugins: [
    new EnvironmentPlugin(["SAMPLE_KEY"]),
  ],
};

Another approach is to pass an object instead, and this approach allows for default values in case doppler has failed to provide the key

const { EnvironmentPlugin } = require("webpack");

module.exports = {
  plugins: [
    new EnvironmentPlugin({"SAMPLE_KEY":"abcde"}),
  ],
};

As long as the key specified in either the array or the object matches that in doppler, this should work.

referencing webpack docs here

Answer 2

I'll answer my own question from my comment...since I finally figured it out.

If you are coming from using a .env file in your project - I had a very large one with over 50 lines.

Running from a Unix based IDE You can mount the .env file: doppler run --mount .env npm run build

This wont work on Windows VSCode, so if you are running your build from Windows based IDE command line (like me), you have to download the .env file

doppler secrets download --no-file --format env > .env

Best practice would be to delete this unencrypted file after processing!!

and using Docker for a CI build on a config branch you will want to run:

doppler run --token ${TOKEN NAME} --mount .env npm run build