Create an Env

Dev environments in Bit simplify your workflow by combining common development tasks — compiling, testing, linting, previewing, and more — into reusable components. These components centralize all your configuration files (like tsconfig.json, webpack.config.js, jest.config.js, .eslintrc, etc.) making them easily manageable and shareable.

You can use or compose our existing development environments:

React

NodeJS

Vue

Angular

Lit

HTML

Stencil

React Native

Svelte

Harmony

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.

To create your first development environment, run:

$bit create node-env envs/my-node-env

Copied

This command will create a new Node.js-based development environment in our workspace. The example below includes a Bit development environment implementation that inherits the basic Bit Node.js environment and customizes its compiler.

import { NodeEnv } from '@bitdev/node.node-env';

export class MyCustomEnv extends NodeEnv {
  name = 'my-env';

  compiler(): EnvHandler<Compiler> {
    /**
     * use babel for compilation during development (in the workspace)
     * executed on 'bit compile', 'bit start', 'bit watch'
     */
    return BabelCompiler.from({
      babelConfig: require.resolve('./config/babel.config.json'),
    });
  }
}

export default new MyCustomEnv();
Copied

A development environment is simply a set of methods, integrating different development tooling into a development environment experience. It consists of two primary files:

• env.jsonc. The env configuration file for controlling component dependencies.
• my-env.bit-env.ts. The development environment implementation file.

Customizing these files will allow you to control the stitching of your development environment. Below, we will walk through the main services in your development environment and how to customize each.

Choose an existing compiler for your components and apply your preferred configuration.

TypeScript

Babel

Multi compiler

Use the compiler:

import { BabelCompiler } from '@teambit/compilation.babel-compiler';

export class MyBabelEnv extends NodeEnv {
  name = 'my-env';

  compiler(): EnvHandler<Compiler> {
    /**
     * use babel for compilation during development (in the workspace)
     * executed on 'bit compile', 'bit start', 'bit watch'
     */
    return BabelCompiler.from({
      babelConfig: require.resolve('./config/babel.config.json'),
    });
  }
}
Copied

• Compile components
• Implement your own compiler

Choose and configure your testing framework of choice, and its desired configuration.

Jest

Mocha

Vitest

Use the tester:

import { JestTester } from '@teambit/defender.jest-tester';

export class MyBabelEnv extends NodeEnv {
  name = 'my-env';

  /**
   * use jest for testing during development
   * executed on 'bit test'
   */
  tester(): EnvHandler<Tester> {
    return JestTester.from({
      jest: require.resolve('jest'),
      config: require.resolve('./config/jest.config'),
    });
  }
}
Copied

• Test components
• Implement your own tester

A build pipeline is a sequence of tasks that are executed when a component is built or snapped. Usually, tasks are exposed by plugins. For example, the TypeScript compiler exposes the TypeScript task, and the same goes for ESLint and Jest.

import { JestTask } from '@teambit/defender.jest-tester';
import { TypeScriptTask } from '@teambit/typescript.typescript-compiler';
import { EslintTask } from '@teambit/defender.eslint-linter';

class MyEnv extends ReactEnv {
  build() {
    return Pipeline.from([
      TypescriptTask.from({
        tsconfig: require.resolve('./config/tsconfig.json'),
        types: resolveTypes(__dirname, [this.tsTypesPath]),
      }),
      EslintTask.from({
        tsconfig: this.tsconfigPath,
        configPath: this.eslintConfigPath,
        pluginsPath: __dirname,
        extensions: this.eslintExtensions,
      }),
      JestTask.from({
        config: require.resolve('./config/jest.config'),
      }),
    ]);
  }
}
Copied

• Run build pipelines
• Implement a build task

Configure the component templates for your development environment. This will allow new developers to onboard using these component templates.

import { TemplateList } from '@teambit/generator';
/* import the generator */
import { ReactComponentTemplate } from '@teambit/react.generator.react-templates';

export class MyEnv {
  generators() {
    return TemplateList.from([ReactComponentTemplate.from()]);
  }
}
Copied

• Use templates
• Set up generators
• Implement a component generator

Setup a linter to ensure quality and standards for your compoennts.

$bit install @teambit/defender.eslint-linter

Copied

import { ESLintLinter } from '@teambit/defender.eslint-linter';

export class MyBabelEnv extends NodeEnv {
  name = 'my-env';

  /**
   * run eslint during development
   * 'bit lint'
   */
  linter() {
    return ESLintLinter.from({
       /* use this config file */
      configPath: this.eslintConfigPath,
      /* resolve all plugins from this env. */
      pluginsPath: __dirname,
    });
  }
}
Copied

• Set up a linter
• Use linters
• Create a linter

You can use the development environment to control the package.json for your components. To modify your components' package.json properties, see the Modify the package.json documentation.