Using Env Variables in Component Previews
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>;
};
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-envOption 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();Env variables read from
process.envshould 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-varsUse 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();A file with the environment variables will have the following structure:
ENV_VAR_3=value3
# you can also use comments
ENV_VAR_4=value4When 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 directory | Place the file in a nested directory or outside the env's directory |
Use a suffix in the file name, such as .env.development | Use .env as it is ignored by default by Bit |
Run
bit show ENV_COMPONENT_NAMEto verify the file is tracked as part of the component's files. Note that Bit also follows the.gitignorerules.
