Using Env Variables in Component Previews

ed
eden-e3 months ago

This blog explores different methods to configuring environment variables for your component previews.

Injecting env variables should allow you to use them in your components like so:

/** @filename: my-component/my-component.tsx */

const MyComponent = () => {
  return <pre>{process.env.ENV_VAR_1}</pre>;
};
CopiedCopy

Configuring env variables

Bit env uses Webpack to bundle your component previews. Start by creating a custom development environment (env), or use an existing one.

bit create react-env my-react-env
CopiedCopy

Option 1: Set env variables directly using webpack.DefinePlugin

Add the environment variables to the env's preview configuration:

/** @filename: my-react-env/my-react-env.bit-env.ts */

import webpack from 'webpack';

export class MyReactEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      transformers: [
        (config, context) => {
          config.addPlugin(
            new webpack.DefinePlugin({
              'process.env': JSON.stringify({
                /* set the env variable  directly */
                ENV_VAR_1: 'value1',
                /* get env variables from the process.env */
                ENV_VAR_2: process.env.ENV_VAR_2,
              }),
            })
          );
          return config;
        },
      ],
    });
  }

  // ...
}

export default new MyReactEnv();
CopiedCopy

Env variables read from process.env should also be configured as Ripple CI "secrets", to enable the CI to access them.

Option 2: Set env variables directly or from a file, using a Webpack transformer

Use this Webpack transformer to set the environment variables directly or from a file.

Install the transformer:

bit install @learnbit/env-vars.webpack-env-vars
CopiedCopy

Use it in the env's preview configuration:

/** @filename: my-react-env/my-react-env.bit-env.ts */

import { WebpackEnvVars } from '@learnbit/env-vars.webpack-env-vars';

export class MyReactEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      transformers: [
        /**
         * specify filename for the file containing the env vars or leave `undefined`.
         * The file should be placed at the root of the env's directory. for example: `my-react-env/.env.development`
         * */
        WebpackEnvVars.from('.env.development', {
          /** you can also add env vars directly */
          ENV_VAR_1: 'value1',
          ENV_VAR_2: process.env.ENV_VAR_2,
        }),
      ],
    });
  }

  // ...
}

export default new MyReactEnv();
CopiedCopy

A file with the environment variables will have the following structure:

ENV_VAR_3=value3
# you can also use comments
ENV_VAR_4=value4
CopiedCopy

When using a file to set the env variables, make sure to follow these guidelines:

Do ✅Don't 🚫
Place the file at the root of the env's directoryPlace the file in a nested directory or outside the env's directory
Use a suffix in the file name, such as .env.developmentUse .env as it is ignored by default by Bit

Run bit show ENV_COMPONENT_NAME to verify the file is tracked as part of the component's files. Note that Bit also follows the .gitignore rules.