Set Up Preview

Our dev environments include the needed preview. If needed, you can use one of the Bit officially supported preview servers and compose it to your dev environment:

React

Vue

NodeJS

Install the preview:

bit install @teambit/preview.react-preview
Copied

Compose it into your dev environment, in the .bit-env.ts file:

import { TemplateList } from '@teambit/generator';
import { ReactPreview } from '@teambit/preview.react-preview';

export class MyEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      docsTemplate: require.resolve('preview/docs.js'),
      mounter: require.resolve('preview/mounter.js'),
      // transformers: [webpackTransformer],
    });
  }
}
Copied

The above examples uses our webpack configuration for React preview. To adjust the configuraiton you can add webpack config mutators, learn how to use them here.

Preview servers provide an API for mounting your components to the DOM. You can use the Preview API to pass your custom mounter to include themes, routing providers or other contextual elements you would like to include for all components using a certain env.

The example below demonstrates a mounter function provided to the ReactPreview component demonstrated above:

import React from 'react';
import { createMounter } from '@teambit/react.mounter';

/**
 * use the mounter to inject and wrap your component previews
 * with common needs like [routing](), [theming]() and [data fetching]().
 */
export function MyReactProvider({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

/**
 * to replace that mounter component for different purposes, just return a function
 * that uses ReactDOM to render a node to a div.
 */
export default createMounter(MyReactProvider);
Copied

You can also mount the component docuemntation templates, or completely replace it using the docsTemplate flag when using the preview server.

import { createDocsTemplate } from '@teambit/docs.docs-template';
import { MyReactProvider } from './mounter.js';

/**
 * customize the bit documentation template or
 * replace this with one of your own.
 */
export default createDocsTemplate(MyReactProvider);
Copied

You can check find examples in our official React env, or by creating your env by running the following command:

• Create a custom preview server
• Using component previews