Apps are deployable components. They can be used as full backend or frontend applications, or consumed by other apps, at runtime, as microservices, micro-frontends and serverless functions. Just like other components, apps are independent. They contain all the information they need to be built, served and deployed.
Apps can be of different types. An app's type is determined by the application-type responsible for building, serving and deploying it.
Follow the instructions below to try an app for yourself. Choose between creating a new component using a template and forking an existing one.
Run the following to create a React app using a component template:
The output displays the ID of the generated app (component):
my-org.my-scope/apps/my-react-app
location: my-scope/apps/my-react-app
env: teambit.harmony/aspect (set by template)
The generated app component includes an app plugin file with a unique extension that is detected
by its corresponding application-type (see the my-express-app.node-app.ts file, in your app's directory). Use the app plugin
file to determine how it should be served, built and deployed.
Run the following using the app's component ID to make this app loadable by your workspace:
The app's name, as configured in its plugin file, is my-react-app. Run the following to run this app locally (make sure to install 'react-router-dom' first, as it is a dependency of this app):
The output displays the port used for serving that app:
Deploying apps
React apps do not provide their own default deployer. To learn how to set a deployer see App deployment. To explore a demo React app configured with a deployer, see this React app with Netlify deployer or this React app with Cloudflare deployer.
Search bit.cloud for an app component that best fits your needs, and fork it to your workspace. This will provide you with a new component that has much of its boilerplate written for you.
For example, run the following to fork the apps/to-do React app to your workspace:
Run the following to make this app loadable by the workspace:
Run the following to run the app:
Define an existing component as an app
To define an existing component as an app, add to its directory the necessary app plugin and entry file (use a plugin file the corresponds to the application-type you choose).
For example, the previously created component, apps/to-do, requires this plugin file and this app root file to be included in its component directory, for it to be defined as a react app.
Once these files are added, run the bit use <app-component-id> command, to make it loadable by your workspace.
