Set up your environment

An env (component development environment) provides your components with the proper tooling, configurations and runtime environment.

A React env is an env that extends Bit's base React env.

my-scope/envs

my-react-env

new

react/

react-env

latest

Create a React env

Run the following to create a new workspace that contains a custom React env component. Replace the default-scope with your own scope name.

$bit new react my-workspace --env teambit.react/react-env --default-scope my-org.my-scope

Copied

Alternatively, run the following to create a custom React env in an existing workspace:

$bit create react-env envs/my-react-env --aspect teambit.react/react-env

Copied

Your env looks similar to the following:

teambit.react/react-env-extension

config

config/eslintrc.js

config/jest.config.js

config/prettier.config.js

config/tsconfig.json

config/webpack.config.ts

preview

preview/host-dependencies.ts

preview/mounter.tsx

types

types/asset.d.ts

types/style.d.ts

env.jsonc

index.ts

react-env-extension.bit-env.ts

Update your React env

Your React env extends Bit's base react-env. You can update your env with the latest changes from the base env.

Run the following to review the current version used by your env:

$bit show envs/my-react-env

Copied

See command synopsis

The output should list the base env as a dependency:

┌──────────────────┬────────────────────────────────────────────────────────────┐ │ id │ my-org.my-scope/envs/my-react-env │ ├──────────────────┼────────────────────────────────────────────────────────────┤ │ env │ teambit.envs/env │ ├──────────────────┼────────────────────────────────────────────────────────────┤ │ dependencies │ @teambit/react.react-env@0.0.30-------------- (component) │ └──────────────────┴────────────────────────────────────────────────────────────┘

Run the following to install the latest version of react env:

$bit install @teambit/react.react-env

Copied

See command synopsis

Your env should now resolve to the latest version of the base env. Verify this by running the following:

┌──────────────────┬────────────────────────────────────────────────────────────┐ │ id │ my-org.my-scope/envs/my-react-env │ ├──────────────────┼────────────────────────────────────────────────────────────┤ │ env │ teambit.envs/env │ ├──────────────────┼────────────────────────────────────────────────────────────┤ │ dependencies │ @teambit/react.react-env@0.0.40-------------- (component) │ └──────────────────┴────────────────────────────────────────────────────────────┘

Create a component pre-configured with an env

Components can be created using pre-configured generators (templates). These generators include the source files for the component as well as its configuration.

Before your create a component using a generator, make sure your custom env is set properly in your workspace.jsonc. Setting your env in the generator config ensures all (relevant) components will be configured to use that env, when they are generated.

/* @filename: workspace.jsonc */
{
  "teambit.generator/generator": {
    "envs": ["my-org.my-scope/envs/my-react-env"]
  }
}
Copied

Run the following to list all available templates:

$bit templates

Copied

See command synopsis

The output is similar to the following:

The following template(s) are available with the command bit create: Example - bit create <template-name> <component-name>

react (my-org.my-scope/envs/my-react-env)
react
react-hook
react-context
react-app

Generate a component using one of these templates:

$bit create react pages/welcome

Copied

See command synopsis

Run the following to verify your component uses the proper env:

$bit envs

Copied

The output should be similar to the following:

┌───────────────────────────────────┬────────────────────────────────────┐
│ component │ env │
├───────────────────────────────────┼────────────────────────────────────┤
│ my-org.my-scope/envs/my-react-env │ teambit.envs/env │
├───────────────────────────────────┼────────────────────────────────────┤
│ my-org.my-scope/pages/welcome │ my-org.my-scope/envs/my-react-env │
└───────────────────────────────────┴────────────────────────────────────┘

Configure a component to use an env

You can set an existing component to use a different env at any time:

$bit envs set ui/form my-org.my-scope/envs/my-react-env

Copied

See command synopsis

This component's next snap will include a change to its configuration, the new env.

Learn more about setting components with envs in Use envs.