Deploying Bit

Introduction

Bit is a platform for component-driven development that enables teams to build, version, and share reusable components across projects. It provides tools for developing, testing, and documenting components in isolation, then publishing them for use anywhere.

With Bit, you can extract components from existing projects, develop them independently, and share them across your organization. This approach promotes code reuse, consistency, and faster development cycles.

Key highlights of Bit:

• Component Isolation: Develop and test components independently
• Version Control: Semantic versioning for components
• Component Discovery: Browse and search available components
• Live Documentation: Auto-generated component documentation
• Dependency Management: Automatic dependency resolution
• CI/CD Integration: Build and test components automatically
• Team Collaboration: Shared component libraries
• Framework Agnostic: Works with React, Vue, Angular, and more
• Component Compositions: Preview components in different contexts
• Local Development: Full development environment

This guide walks through deploying a self-hosted Bit server on Klutch.sh using Docker.

Why Deploy Bit on Klutch.sh

Deploying Bit on Klutch.sh provides several advantages:

Private Components: Keep proprietary components on your infrastructure.

Team Access: Share components across your organization securely.

HTTPS by Default: Secure component access with automatic SSL.

Persistent Storage: Reliable storage for component packages.

Custom Registry: Your own npm-compatible component registry.

GitHub Integration: Automatic deployments from your repository.

Prerequisites

Before deploying Bit on Klutch.sh, ensure you have:

• A Klutch.sh account
• A GitHub account with a repository for your configuration
• Basic understanding of Docker and containerization
• Familiarity with component-driven development
• Node.js development experience

Understanding Bit Architecture

Bit consists of several components:

Bit CLI: Command-line tool for component development.

Bit Server: Registry for storing and serving components.

Scope: Collection of related components.

Workspace: Local development environment for components.

Preparing Your Repository

Create a GitHub repository for your Bit server deployment.

Repository Structure

bit-deploy/
├── Dockerfile
├── config/
│   └── bit.config.json
└── .dockerignore

Creating the Dockerfile

Create a Dockerfile for Bit server:

FROM node:18-alpine

# Install dependencies
RUN apk add --no-cache git python3 make g++

# Install Bit
RUN npm install -g @teambit/bvm && bvm install

# Create directories
WORKDIR /opt/bit
RUN mkdir -p /opt/bit/scopes

# Environment variables
ENV BIT_HOME=/opt/bit
ENV BIT_REGISTRY_PORT=3000
ENV BIT_TOKEN=${BIT_TOKEN}

# Expose ports
# Registry
EXPOSE 3000
# UI
EXPOSE 4000

# Volume for scopes
VOLUME ["/opt/bit/scopes"]

# Start Bit server
CMD ["bit", "start", "--port", "3000"]

Environment Variables Reference

Variable	Required	Default	Description
BIT_TOKEN	Yes	-	Authentication token for registry access
BIT_REGISTRY_PORT	No	3000	Port for component registry
BIT_HOME	No	/opt/bit	Bit home directory

Deploying Bit on Klutch.sh

Generate Authentication Token

Create a secure token for registry authentication:

openssl rand -hex 32

Push Your Repository to GitHub

Initialize and push your configuration to GitHub.

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project named “bit” or “components”.

Create a New App

Within your project, create a new app and connect your GitHub repository.

Configure HTTP Traffic

Set up HTTP for the registry and UI:

• Select HTTP as the traffic type
• Set the internal port to 3000

Set Environment Variables

Configure the following:

Variable	Value
BIT_TOKEN	Your generated token

Attach Persistent Volumes

Add storage for component scopes:

Mount Path	Recommended Size	Purpose
/opt/bit/scopes	20 GB	Component packages and metadata

Deploy Your Application

Click Deploy to build and start Bit server.

Access Your Registry

Once deployment completes, access the UI at https://your-app-name.klutch.sh.

Using Bit

Installing Bit CLI

Install the Bit CLI locally:

npm install -g @teambit/bvm
bvm install

Configuring Registry

Point Bit to your self-hosted registry:

bit config set registry.url https://your-bit-server.klutch.sh
bit config set user.token YOUR_BIT_TOKEN

Creating a Workspace

Initialize a new Bit workspace:

bit init --harmony

Adding Components

Add existing code as components:

bit add src/components/button

Developing Components

Start the development server:

bit start

Publishing Components

Export components to your server:

bit tag --all
bit export

Component Development

Component Structure

Organize components with:

• Component code (.tsx, .vue, etc.)
• Tests (*.spec.tsx)
• Documentation (*.docs.mdx)
• Compositions (*.compositions.tsx)

Writing Tests

Add tests for components:

import { render } from '@testing-library/react';
import { Button } from './button';

it('should render correctly', () => {
  const { getByText } = render(<Button>Click me</Button>);
  expect(getByText('Click me')).toBeTruthy();
});

Documenting Components

Create documentation with MDX:

---
description: A reusable button component
---

import { Button } from './button';

## Usage

<Button>Click me</Button>

Team Collaboration

Creating Scopes

Organize components into scopes:

1. Create scope on your server
2. Configure scope in workspace
3. Export components to scope

Access Control

Manage team access:

• Token-based authentication
• Scope-level permissions
• Read/write access control

Importing Components

Install components in projects:

bit install @your-org/ui.button

Or use npm:

npm install @your-org/ui.button

Troubleshooting Common Issues

Export Fails

Solutions:

• Verify registry URL is correct
• Check authentication token
• Review component tag status

Component Not Found

Solutions:

• Confirm component was exported
• Verify scope name is correct
• Check registry connectivity

Build Errors

Solutions:

• Run bit compile to check for errors
• Verify all dependencies are available
• Review component configuration

Additional Resources

• Bit Official Website
• Bit GitHub Repository
• Bit Documentation

Conclusion

Deploying Bit on Klutch.sh enables your team to build, share, and reuse components across projects with a private component registry. With isolated development, automatic documentation, and seamless collaboration features, Bit transforms how teams approach component-driven development.