App plugins

An app plugin file, located inside a component's directory, defines a component as an 'app' of a certain type. Its filename contains a specific extension that is detected and loaded by a specific application type.

For example, a plugin file with the .react-app.ts extension defines its component as a react app, an app that is built and deployed by the react application type. In addition to that, a plugin file provides an interface for an app to set its app configurations. For example, the following my-app.react-app.ts file sets the app's name, entry file and even deploy function:

import type { ReactAppOptions } from '@teambit/react';
import { Netlify } from '@teambit/cloud-providers.deployers.netlify';

export const MyApp: ReactAppOptions = {
  name: 'my-app',
  entry: [require.resolve('./my-app.app-root')],
  deploy: Netlify.deploy(),
};

export default MyApp;
CopiedCopy

A single component can have multiple plugin files. In that case, the component will be built and deployed by multiple application types. This can be especially useful when you need your component to be consumable in runtime, in different compilation formats (for example, as a UMD module and as an ES6 module).

Apps as aspects

App components (components with an app plugin file) are treated by Bit as Bit aspects. As such, an app needs to be configured on the workspace for it to be loaded. Apps are currently also required to use the teambit.harmony/aspect env. This will soon be changed to allow for an app to use any env.

To learn how to define an app type's plugin file see 'Application types'