🎉
Welcome to Bit's new open-source website!

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

During this quick start, you will learn to create your own composable wiki app. We will show you how simple it is to build a complex app like a Wiki using components! We will use the components built for this documentation app in this example.

Welcome to .bit

Welcome to your component-driven wiki app!

This is the first component-driven wiki! Content pages are MDX components, and you can use any type of component from inside any wiki page.

Here is an example using our What is Bit component:

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.

People tend to think of components like apps as "bigger" and components like a button as "smaller", but for us they are the same size. Both Button and App are components, with different responsibilities. An App is the most "concrete" component with a dependecy graph and minor amount of dependents, and button is the most "abstract" component with just few dependencies and a lot of dependents, indicating higher reusability. They have different responsibilities but they are equal in size and importance.

Bit does not prescribe how you 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 might be compiled, tested and sometimes even deployed with a different composition of tools than a backend-service component, or a generic function. Bit comes with native support in 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 adding one more component into Bit!

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 can support other software languages in the future! For now, our development environments use official TypeScript by default, to compile both JS and TS components and you can easily change to use Babel as a compiler or anything else, Bit has no opinion regarding your tech stack.


Installation

To get started, we would first have to make sure the bit binary is installed on your machine and configured to your PATH.

npx @teambit/bvm install
CopiedCopy

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

Create workspace

The first step in the Bit journey is to initiate a new Bit workspace. It is a development workspace for distributed, component-driven software. You can create new components, use and modify existing components, and export your changes.

  • Distributed. Developers can pull the specific components they need to work on from any project, whether it is a repo, monorepo or a new Bit workspace.
  • Scalable. Scale from one to hundreds of components in a single workspace. Distribute to more worksapces as more people get involved for your codebases to stay small and easy to maintain.
  • Tech agnostic. Designed to fit your tech needs - for example, React, Node and Angular components can be built and used in the same workspace.

To create a new workspace, run:

bit new react my-wiki --default-scope my-org.wiki
CopiedCopy

cd my-wiki
CopiedCopy

Start the Workspace UI console:

bit start
CopiedCopy
tip

It is recommended to open an editor like VSCode on the workspace to start editing the components source code. To learn more on editor setup head here.

Bit was designed for gradual adoption and has a minimal footprint. You can use Bit to start building and sharing components from an existing project.

Components

A component is an independent, reusable product that provides an interface for using it. You begin by designing the component interface to suit your own needs, and iterate over time to broaden support for new needs as they come. Design every component to serve your own needs, then iterate and grow to serve the needs of your fellow product teams, or even the entire world.

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.

Building the components

During this tutotial we will walk through building the components below. You can either create a new component, implement it yourself and use our component just as a reference or fork ours as a starting point.

Keep in mind you can record your progress at any time, push components to remote scopes and resume work later! Head over to the collaborate section and follow the step to push your changes to remote scopes at any time!

1
teambit.wiki/apps/wiki
We start with Building the Wiki-app. This will use other components to add the functionality and content. To learn more about apps in Bit you can continue reading the Docs or skip to the Apps section.

First, make sure to install react-router-dom in your workspace.
bit install react-router-dom@^6.0.0
CopiedCopy
You can either fork the component.
bit fork teambit.wiki/apps/wiki
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react apps/wiki
CopiedCopy
2
teambit.wiki/sections/wiki
After adding the App to our workspace (either by using fork or create), we are now adding the wiki component. Our App will use the wiki component to get all the functionality it needs.
You can either fork the component.
bit fork teambit.wiki/sections/wiki
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react sections/wiki
CopiedCopy
3
teambit.wiki/blocks/header
Now we have the functionality we need, but we would also like some structure to the page, so we are adding a header and footer component. Starting with the header:
You can either fork the component.
bit fork teambit.wiki/blocks/header
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/header
CopiedCopy
4
teambit.wiki/blocks/footer
And now we add the footer! You can choose to skip this component and you will still have a working app, with only a header.
You can either fork the component.
bit fork teambit.wiki/blocks/footer
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/footer
CopiedCopy
5
teambit.wiki/content/welcome
It's time to add some content to this Wiki! Here is an example of a content component. You can ask your whole team to contribute to the content by creating their own content components. See next section on how to collaborate with Bit!
You can either fork the component.
bit fork teambit.wiki/content/welcome
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react content/welcome
CopiedCopy

Collaborate

Now that we have done our work and all seems to be working locally, its time to share our changes and collaborate with others.
Bit tells you which components changed and their current status.

bit status
CopiedCopy

Create a remote scope

A Scope is a collaboration server for components. It enables you to export components created in your workspace, to have them stored remotely, and to collaborate on them with others. Other developers, with access to your scope, could either use your components or propose changes to them.

Scopes help organize components in a shared domain of responsibility. For example, the analytics scope will include all components that provide Analytics services, and the design scope will include the services for our design language.

If you don't have a remote scope yet, it is a good time to create one! You can create and host scopes on bit.cloud for free or self-host your scope.

If you've created a new remote scope, to update it to be your default scope, use this command:

bit scope rename <old-name> <new-name> --refactor
CopiedCopy

The --refactor flag updates the components in your workspace with the new scope name, if you prefer to update manually, remove it:

bit scope rename <old-name> <new-name>
CopiedCopy

Snap your changes

To record your component changes you can use:

bit snap --all --message "initial snap"
CopiedCopy

To release components in a new semantic version, use:

bit tag --all --message "initial tag"
CopiedCopy

Create a Lane (Alpha)

Lanes are used to propose component changes to the component main history lane. To record changes on a Lane.

bit lane create my-feature
CopiedCopy

Then, use snap to record your changes into the Lane:

bit snap --all --message "my first lane snap"
CopiedCopy

Export changes to remote scopes

After recoding component changes with snaps or tags, you can sync the staging changes with the defined remote scopes.

bit export
CopiedCopy

Be aware to how changes affect others

Bit automatically detects affected dependents in your Workspace. It is a best practice import few or more dependents and test your changes against them prior to releasing.

bit import blocks/header --dependents
CopiedCopy

Running test and build can test your modified components vs affected dependencies.

bit test
CopiedCopy

Have an idea for your own Quick Start?

If you think you can build a better quick start, or just show anything else. Head over to the Quick start for creating Quick Starts, share your own and let us know about it!

What's next?