Start your next initiative in components:
React
Build a full-stack composable React application.
Platforms
Stitch micro-services and micro-frontends together to a unified platform.
Harmony
Connect your composable architecture into a unified and plugable platform.
Design System
Build a composable React design system.
Vue
Build a full-stack composable Vue application.
Angular
A simple Angular and Node example to get you started with component-driven development.
NextJS
A simple Next.js and React example to get you started with component-driven development.
Todo MVC
A TodoMVC app with VueJS.
Wiki
Learn how to use component-driven wiki to power knowledge sharing.
Analytics
Build a component-driven analytics
Platforms
This quick start will guide you through building a service-oriented architecture, composed from backend services and a UI application.
To get started, install Bit on your machine:
For a more advanced installation guide, head to our installation section.
A workspace is used to create and maintain a set of independent components and apps, and compose them one to the other.
Open your workspace directory:
Your workspace maintains a number of components. One of these components is also an app. Run the app by using the following command:
You can list the apps and platforms available on your workspace using bit app list
. Head to the apps section to learn more on running apps.
my-project-platform
is your platform composition. Composing the backend service and the frontend app.my-project-web
a React web application for the platform.discussions-service
. A backend service for managing discussions for the platform.ui/discussions
. A UI component for displaying recent discussions.hooks/use-discussion
React hook for retrieve announcement from the backend.entities/discusson
An entity to describe the discussion data object.
Run the Workspace UI to preview your components and inspect your workspace:
The workspace UI displays all components maintained by your workspace. Use it to explore your components' preview, documentation, dependency graph, version history, and more.
You can create new components using our official templates. Our templates includes apps, backend services, UI components and more to help stitch your architecture:
Head to the create components section to learn on creating components.
Components are used as standard packages. Use an import statement with the requested component package name to use a component:
import { Announcement } from '@my-org/my-project.entities.announcement';
You can install external packages or components using bit install. Learn more on using components.
You can use bit test, lint and other commands to operate the components on your workspace. Find useful commands on the CLI reference.
Run the following to verify there are no issues preventing Bit from snapping each component as an independent unit that is uncoupled from the rest of the workspace:
The output should confirm all components are ok
to be snapped. The components' status is currently new
as they were forked by the workspace starter and not imported.
Scopes help organize components in a shared domain of responsibility. For example, the analytics
scope includes all components that provide analytics services, and the design
scope includes the services for our design language.
Run the following to log in to your bit.cloud account:
If the name you chose is different than the name you chose while creating your workspace, then use the following command to update your components to the newly created account and scope:
Run the following to tag your components with a semantic release version:
You can also use snap to create a new version for the component without assigning with a semantic release.
By default, components are built using bit.cloud's Ripple CI. However, you can run the components' build locally by adding the --build
flag, or use your own CI platform. To learn more see Set up CI.
Export the newly created versions to your remote scope by running the following command:
Head over to your bit.cloud account to see your components build progress. Once the build process is completed, you components are deployed and ready to be used!