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.

default
my-scope/envs
my-react-env
new

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
Copiedcopy

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

$bit
Copiedcopy

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
Copiedcopy
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
Copiedcopy
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"]
  }
}
CopiedCopy

Run the following to list all available templates:

$bit
Copiedcopy
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
Copiedcopy
See command synopsis

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

$bit
Copiedcopy

The output should be similar to the following:

┌───────────────────────────────────┬────────────────────────────────────┐
componentenv
├───────────────────────────────────┼────────────────────────────────────┤
│ 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
Copiedcopy
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.