How to inject env variables with doppler into react with webpack

Need Help
1

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?

Question is also posted in Stackoverflow here

2

Hi @kennysliding!

Welcome to the Doppler Community!

Generally speaking, you don’t really want to be bundling your secrets with your application. When it comes to frontend JS applications, we typically recommend pairing them with a backend application. Then inject the secrets into your backend application and have your frontend application fetch any configuration it needs via requests to the backend. If you have API tokens or other credentials that are needed in the frontend – use the backend application to proxy those requests (i.e., the frontend calls the backend, which then calls the API using the credentials it has and relays the response back to the frontend).

We also have a JS package available to aid in fetching secrets in your backend application as well that may help you out. Once again, we still recommend only using this in a backend application to avoid leaking your Doppler token or secrets in frontend JS though. Give it a look and see if it might be useful for you:

Let me know if the above was helpful or not.

Regards,
-Joel

3

Hi @kennysliding!

Quick follow-up here! All of what I mentioned earlier said, if you’re only passing configuration in, then you should be able to get this working. You’ll need to use the Webpack EnvironmentPlugin though.

To do that, you would need to add a webpack require to your application:

const webpack = require('webpack');

and then add the plugin to your conf. Here’s a small example showing how you would expose the PORT environment variable (and assign a default if one wasn’t available in the environment):

const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
        new webpack.EnvironmentPlugin({
            PORT: 9000
        })
    ],
    module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },
        ],
    },
};

In your app, you could then do this:

let port = process.env.PORT;

console.log(`PORT: ${port}`);

If you run npx webpack serve without Doppler, then the PORT will get set to 9000. If you run with doppler run -- npx webpack serve then PORT will be set to whatever value that secret has in Doppler.