Create apps

An app is a component that can be served, built and deployed. Naturally, apps have dependencies (components and packages) but no dependents. For example, the todomvc/app component is an app. It uses todomvc/header and todomvc/footer, two standard Bit components, as a dependencies:

todomvc/

app

Run an app locally

Run the following to list all available apps in your workspace:

$bit app list

Copied

The output lists the IDs of the available app components and their corresponding app names:

┌──────────────────────────┬──────────────┐
│ id │ name │
├──────────────────────────┼──────────────┤
│ learnbit-vue.todomvc/app │ todomvc-app │
└──────────────────────────┴──────────────┘

Run the following to run an app locally, independent of Bit's dev server:

$bit run todomvc-app

Copied

The output is similar the following (open the listed path and port in your browser, to explore your app):

todomvc-app app is running on http://localhost:3000

Create a new app component

Run the following to create an app using your env's component generator:

$bit create vue-app apps/my-app

Copied

The output displays the ID of the generated app (component):

1 component(s) were created

org.scope-name/apps/my-app
location: scope-name/apps/my-app
env: org.scope-name/envs/my-vue-env (set by template)
package: @org/scope-name.apps.my-app

You also need to run the install command to install missing dependencies:

$bit install --add-missing-deps

Copied

The generated app component includes an app-type file, my-app.bit-app.ts - in this case, it imports and reuses the Vue app-type. If you want to use a different app-type, just simply install and import another one. This will affect how your app is being served, built and deployed.

scope-name/apps/my-app

index.html

index.ts

my-app.bit-app.ts

my-app.docs.md

my-app.root.ts

my-app.spec.ts

my-app.vue

Define an existing component as an app

To define an existing component as an app, add to its directory an app plugin file. Note that the specific file extension of a plugin file determines its application type. For example, the following .bit-app.ts file extension is loaded by Bit's official Vue application type.

// my-app.bit-app.ts

import { VueApp } from '@bitdev/vue.app-types.vue-vite';

export default VueApp.from({
  name: "my-app",
});
Copied

To make this app loadable by your workspace, run the following:

$bit use apps/my-app

Copied

Fork Vue apps

Search bit.cloud for Vue apps. Fork app components to get started quicker, with apps that already have much of the setup you need.

For example, run the following to fork the Hello World app to your workspace:

$bit fork learnbit-vue.hello-world/hello-world-app hello-world-app

Copied

Run the following to make the forked app loadable by your workspace:

$bit use hello-world-app

Copied