A component development environment ('env') is a collection of tools and configurations a component uses for its development, build, and delivery.
An env is a single component. It can be shared between teammates working on the same project to ensure all components use the same tools and adhere to the same standards, even when they are developed and delivered independently.
It is important to note that a single workspace can contain multiple envs, and that a each component can only use a single env. In other words, envs are configured per component, not per workspace.
Run the following to fork a demo env that you can use as a starting point for your own env:
Learn how to use an env in the 'use envs' documentation.
To extend an existing env, see the relevant base env in the docs' 'learn' section. For example, to extend a React env, see the 'set up your React env' documentation.
For a full example, see this React env.
Envs can control and standardize the dependencies of their components. This is done using the env.jsonc file, located at the root of the env directory.
To learn more see Env dependencies.
Envs control which compiler is used to compile the source files of components maintained by them.
Use the compiler method to specify the compiler for compilation during development in the workspace (bit compile, bit watch, bit start).
Use the build method to add a compilation build task to the components' build pipeline. The task will compile components when they are built in a capsule, isolated from the workspace (bit build, bit snap, bit tag).
Learn how to configure an env to use a compiler in the 'set up a compiler' documentation.
Learn how to run a compiler in the 'run compilers' documentation.
Learn how to create your own compiler in the 'create a compiler' documentation.
Envs control which tester is used to test components maintained by them.
Use the tester method to specify the tester for components in the workspace (bit test).
Use the build method to add a testing build task (using a specific tester) that tests components when they are built in a capsule, isolated from the workspace (bit build, bit snap, bit tag).
Learn how to configure an env to use a tester in the 'set up a tester' documentation.
Learn how to run a tester in the 'run testers' documentation.
Learn how to create your own compiler in the 'create a tester' documentation.
Envs control which linter is used to lint the source files of components maintained by them.
Use the linter method to specify the linter for components in the workspace (bit test).
Use the build method to add a linting build task (using a specific linter) that lints components when they are built in a capsule, isolated from the workspace (bit build, bit snap, bit tag).
Learn how to configure an env to use a linter in the 'set up a linter' documentation.
Learn how to run a linter in the 'run linters' documentation.
Learn how to create your own linter in the 'create a linter' documentation.
Envs control which code formatter is used to format the source files of components maintained by them.
Use the formatter method to specify the code formatter for components in the workspace (bit test).
Use the build method to add a code formatting build task (using a specific formatter) that formats the components' code when they are built in a capsule, isolated from the workspace (bit build, bit snap, bit tag).
Learn how to configure an env to use a formatter in the 'set up a formatter' documentation.
Learn how to run a formatter in the 'run formatters' documentation.
Learn how to create your own formatter in the 'create a formatter' documentation.
A build pipeline is a sequence of tasks that are executed when a component is built or snapped.
Envs set their components with a series of build tasks. These tasks are then included into a series of core build tasks, that are common to all components.
The tasks can be registered into any of the the three pipelines, 'build', 'snap' and 'tag'. By default these build pipelines are executed in the cloud using Ripple CI, bit.cloud's default CI, once the components are snapped and exported.
Learn more about running build pipelines in the 'build pipelines' documentation.
Learn how to create your own build task in the 'create a build task' documentation.
Envs control the way component packages are packed (this happens when your components are snapped, as well as partially, during development).
Learn how to modify your components' package.json properties in the 'modify the package.json' documentation.
Learn how to specify the files to exclude from in your components' package in the 'npm ignore' documentation.
Envs can provide component templates to quickly generate new components using a standardized structure (bit create).
Learn how to create a component using generators in the 'use component generators' documentation.
Learn how to set your env to use a component generator in the 'set up generators' documentation.
Learn how to create a new workspace starter in the 'create a workspace starter' documentation.
Envs can provide the workspace templates to quickly generate new workspaces, using pre-configured workspace setup and possibly a few imported/forked/newly-created components (bit new).
Learn more about creating a workspace using starters in the 'use workspace starters' documentation.
Learn more about setting up a workspace starter in the 'set up a workspace starter' documentation.
Learn how to create a new generator in the 'create a component generator' documentation.
Envs determine how their components are previewed and documented.
For example, the community-react env to render components in the preview. It uses this provider as a template or context for every component being rendered.
Envs can generate your IDE configuration files based on the same configuration used in the env (bit ws-config). This ensures that your IDE is configured to work with the same tools and standards used in the env for its components.
By default, config files are generated in the root of your workspace or nested in a directory. However, in many cases the same workspace maintains components of different types (different envs) that require different configurations. In such cases, config files will also be generated in nested directories, so that the IDE can use the relevant configuration for each component.
Use the workspaceConfig method to specify the IDE configuration files to generate for the workspace.
Envs can register an app-type for their app components to use.
