Create a Custom Preview Server

You can build your a preview server by composing one of our existing and mutating its configuration or by implementing the Preview interface.

You can base and create your own preview server based on our preview servers by mutating the dev server configuration or changing its configuration. Usually our existing preview servers are flexible enough to satisfy most needs.

bit create node my-preview
Copied

Than change your main file to compose the React preview for example and adjust it to your needs using mutators and mounters.

import { ReactPreview } from '@teambit/preview.react-preview';
import { transformMarkdown } from './transform-markdown';

export function MyPreview() {
  return ReactPreview.from({
    docsTemplate: require.resolve('preview/docs.js'),
    mounter: require.resolve('preview/mounter.js'),
    transformers: [transformMarkdown],
  });
}
Copied

Use it in your dev environment:

import { MyPreview } from '@acme/platform.preview.my-preview';

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

Learn more on using previews in dev environments.

You can also build a component implementing the Preview interface for create your own custom preview and use it from your dev environment:

import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';

export interface Preview {
  /**
   * get a dev server instance of the.
   */
  getDevServer(context: DevServerContext): DevServer;

  /**
   * get bundler instance.
   */
  getBundler(context: BundlerContext): Bundler;
}
Copied

• React Preview
• Vue Preview