Creating an app

Create an app component

An app component is a component that includes a plugin file that defines it as an app. Each app plugin file has an extension that is detected and loaded by its corresponding app-type (for example, react-app.ts files are loaded by the React app-type.)

In this example you'll create a Node component that is built and deployed by the Node app-type.

To create a Node app, fork this demo app to your workspace:

bit fork learnbit.apps/node-app
Copied

Using app types that are not part of Bit's core aspects

The Node app-type is a Bit core aspects. It is, therefore, always loaded by your workspace. When using an app-type that is not a core aspect, install and set it in your workspace first. For example:

bit install @teambit/cloud-providers.aspects.cloudflare-worker@0.0.23
bit use @teambit/cloud-providers.aspects.cloudflare-worker@0.0.23
Copied

Add the app to your workspace config

Add the app to your workspace.jsonc config file to make it executable by your workspace:

"myorg.some-scope/node-app": {}
Copied

Run the app in development

To list all available apps, run the following:

bit app list
Copied

The output should include the app's component ID and name:

┌───────────────────────────────────┬────────────────┐
│ id                                │ name           │
├───────────────────────────────────┼────────────────┤
│ myorg.somescope/node-app          │ hello-node-app │
└───────────────────────────────────┴────────────────┘
Copied

To run the app locally, run the following:

bit run hello-node-app
Copied

The output should show the port used for this app:

listening on port 3000

hello-node-app app is running
Copied

Go to http://localhost:3000 to see the app running.

Configure your apps's build and deployment

Your app component includes the app.node-app.ts plugin file. This file contains configuration for your app's build and deployment. Node apps are agnostic to the deployment implementation. To add your own deployment function, set it in the configurations below:

import type { NodeAppOptions } from '@teambit/node';
import { myDeployer} from '@myorg.some-scope/my-deployer'

export const HelloWorldApp: NodeAppOptions = {
    name: 'hello-node-app',
    entry: require.resolve('./hello-world.app-root'),
    deploy: myDeployer();
};

export default HelloWorldApp;
Copied

See the Netlify and Cloudflare deployers, for more examples.

Test your app's build

Your Component's build pipeline now includes an additional build task for app's build (this build task was added by the Node app-type). To build your app, run the 'build' command on the app Component:

bit build company.scope/apps/my-app
Copied

To examine the build output, head over to the your Component's Capsule (to list the capsule paths run bit capsule list).

Build and deploy

Your Component's tag and snap pipelines, now include an additional build task for your app's deployment (this build task was added by the Node app-type). To build and deploy your app, tag or snap your app's Component. For example:

bit tag company.scope/apps/my-app
Copied