Welcome to the Bit documentation site! This site is a composition of independent components, built and maintained mainly by the Docs, Design and Community teams here at Bit! It was built from React, Markdown, and Node components we have crafted specifically for the purpose and needs of this app.

Introduction

In this basic quickstart, you'll create three key components: a React application called hello-world, a ui/hello-world React component, and a straightforward Node component named get-hello-world.

The React hello-world component displays a simple greeting message on the frontend, while the get-hello-world Node component provides the data for the ui/hello-world React component.

This quickstart provides a typical example of building a modern web application using React and Node.

Hello world!

What is Bit?

Bit is an open-source tool for composing component-driven software.


Bit stands at the intersection between product and engineering. It helps you take complex product requirements, and break them down into independent, and reusable pieces called "components". It allows you to create components and compose them with each other. Components are described by names and APIs, and contain source code implementation. They can be of different kinds like apps, pages, UI components, backend services and even content. You can think of almost anything in components.

Components can be as “big” as modern web applications, e-commerce shops, large building blocks like a Blog, a Wiki or a Hero. They can also be as “small” as simple UI components like Header, Footer or other useful design components. Every Bit Component, whether it is “big” or “small” is just a composition of others, where each is kept small and independently maintained.

Bit does not prescribe how to build your entire application. It helps you define and compose components and allows for every component to adopt the dev tools that best fit its nature. A React component is likely to be compiled, tested and perhaps even deployed using a composition of tools different than the one a backend-service component, or a generic function, may use. Bit offers native support for various dev tools like TypeScript, Babel, Jest, Webpack, ESLint and ready made development environments for React, NodeJS, Angular and more. New tools can be easily integrated by extending Bit with one more component.

What can you do with Bit?

Anything is possible with Bit! We built Bit and bit.cloud entirely using Bit. These are complex systems which includes infrastructure tools, cloud products and multiple user interfaces.

People use Bit to create all kind of applications, from user interfaces with component-driven frameworks like React, Vue and Angular, to complex micro-service architectures, serverless functions, CLI utilities, desktop applications, native mobile applications and even IoT. You can do with Bit about anything you can do with JS and even beyond.

What Bit supports?

Bit was built with TypeScript and supports it natively. It was designed to be language-agnostic, and will support other software languages in the future! For now, our development environments use TypeScript as the default compiler for JS and TS components. You can easily switch to Babel or any other compiler. Bit is completely agnostic to your tech stack.

Install

To get started, install Bit on your machine:

$npx @teambit/bvm install
Copiedcopy

For a more advanced installation guide, head to our installation section.

Initialize a workspace

Initialize a workspace to start your journey into component-driven development. A workspace is a group of files and directories that provide the necessary context for components to be authored, composed, maintained, and collaborated on.

Run the following to create a workspace with a few components included, using the hello-world starter:

$bit
Copiedcopy

Open your workspace directory:

$cd my-hello-world
Copiedcopy

Run the app component

Your workspace maintains a number of components. One of these components is also an app.

Run the following to run the app component:

$bit
Copiedcopy

Preview components

A Bit component is a reusable, independently source-controlled module, that is stored in scopes and maintained in workspaces. Bit components enable a new software development strategy that can be used to complement monorepos and poly-repos, or replace them, altogether.

Run the Workspace UI to preview your components:

$bit
Copiedcopy

The workspace UI displays all components maintained by your workspace. Use it to explore your components' compositions, documentation, dependency graph, version history, and more.

Collaborate

Run the following to verify there are no issues preventing Bit from snapping each component, independently:

$bit
Copiedcopy

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.

(use "bit tag [version]" to lock a version with all your changes) new components > hello-world-app ... ok > ui/hello-world ... ok > get-hello-world ... ok

The snapping process creates an immutable snapshot of the components' latest changes. The component's 'scope' property is part of these changes. Follow the next section to create your own scope and set your components, accordingly.

Create a remote scope

A scope is a collaboration server for components. It lets you export components from your workspace, store them remotely, and collaborate on them with others. Developers with access to your scope can use your components or suggest changes.

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:

$bit
Copiedcopy

Set the components in your workspace with your newly created remote scope (replace 'my-org' with your username or organization name. For example, john.my-wiki):

$bit
Copiedcopy

Run the following to link to components (with their newly renamed scopes) from the node_modules directory:

$bit
Copiedcopy
See command synopsis

Run the following to compile all components:

$bit
Copiedcopy
See command synopsis

Snap your changes with a release version

Run the following to record your component changes and tag them with a semantic release version:

$bit
Copiedcopy
See command synopsis

Export changes to remote scopes

Export your staged components from your workspace to their remote scopes. This will make them available to be consumed by components outside of your workspace, as well as by traditional monolithic projects. More importantly, this will enable you to collaborate on individual components, independently.

$bit
Copiedcopy

Head to your bit.cloud account to see your components in the remote scope.