Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
101 commits
Select commit Hold shift + click to select a range
46b75ec
add files and directories
giteden Jul 16, 2021
77cbf92
create new sidebar
giteden Jul 17, 2021
1284d0b
add content. add zoom to Image component.
giteden Jul 18, 2021
3bcb14f
add content
giteden Jul 19, 2021
d7465cd
add content
giteden Jul 20, 2021
1ca4294
add content.
giteden Jul 20, 2021
7b1f34c
add content
giteden Jul 20, 2021
efb3a7a
add content
giteden Jul 25, 2021
0223a52
add content.
giteden Jul 25, 2021
5534a26
add content.
giteden Jul 26, 2021
e297322
changes
ranm8 Jul 29, 2021
1c63fdb
Merge branch 'new-home-bit' of github.com:teambit/docs into new-home-bit
ranm8 Jul 30, 2021
ced0dea
pair programming with Ran
debs-obrien Jul 30, 2021
c55dd5b
more changes
ranm8 Aug 1, 2021
088bd49
minor improvements
debs-obrien Aug 1, 2021
ec26b33
for itay
ranm8 Aug 2, 2021
b1741ab
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 2, 2021
d64ad7c
mfes
itaymendel Aug 2, 2021
285bc38
changes
ranm8 Aug 2, 2021
492cd75
image
ranm8 Aug 2, 2021
464c4fb
quick start improvements
debs-obrien Aug 3, 2021
9b67c9f
skeleton done
itaymendel Aug 3, 2021
626f2e8
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
itaymendel Aug 3, 2021
787c0f0
add install bit and create workspace
debs-obrien Aug 4, 2021
8bf0d24
adding in-practice
itaymendel Aug 4, 2021
e34c039
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
itaymendel Aug 4, 2021
11757bf
changes
ranm8 Aug 4, 2021
97e1a2c
changes
ranm8 Aug 4, 2021
f555417
fixed
ranm8 Aug 4, 2021
2ea6052
minor additon to create components
debs-obrien Aug 4, 2021
71f0e6c
add tester overview and ws testing
giteden Aug 4, 2021
c27b973
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
giteden Aug 4, 2021
d6fc757
Merge branch 'many-changes' of https://github.com/teambit/docs into m…
debs-obrien Aug 5, 2021
eff8051
Update create-components.mdx
debs-obrien Aug 5, 2021
b25b9b1
add linter overview and other fixes
giteden Aug 5, 2021
577697e
build time composition
itaymendel Aug 5, 2021
a338786
fix bash comments
itaymendel Aug 5, 2021
ac9997d
update getting started
debs-obrien Aug 6, 2021
faab040
getting started improvements
debs-obrien Aug 6, 2021
ed2fd91
update dependencies
debs-obrien Aug 6, 2021
dead0b8
improvements
debs-obrien Aug 6, 2021
bc05805
improvements
debs-obrien Aug 7, 2021
65cafd1
minor improvements
debs-obrien Aug 7, 2021
480d4e2
fix styling message
debs-obrien Aug 7, 2021
1cc73b5
add note on install to other app
debs-obrien Aug 7, 2021
361b77c
intro refactored, started runtime
itaymendel Aug 7, 2021
a119006
minor fixes
debs-obrien Aug 7, 2021
00cc303
add formatting overview
giteden Aug 7, 2021
e50e7e2
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
giteden Aug 7, 2021
9c2e10f
update workspace/overview
giteden Aug 7, 2021
4b756d2
restore former ws/overview
giteden Aug 8, 2021
1bdb157
benefits... done?
itaymendel Aug 8, 2021
e528216
fix title
itaymendel Aug 8, 2021
908aef3
massive updates
itaymendel Aug 8, 2021
937dfef
ci/cd copied over plus minor additions
debs-obrien Aug 9, 2021
e0dd0f5
minor improvements
debs-obrien Aug 9, 2021
654f6f4
multi-frameworks
itaymendel Aug 9, 2021
31548d3
minor improvements
debs-obrien Aug 9, 2021
4b43994
Merge branch 'many-changes' of https://github.com/teambit/docs into m…
debs-obrien Aug 9, 2021
e3e9494
data fetching
itaymendel Aug 9, 2021
31b675c
styling
itaymendel Aug 9, 2021
91d5384
fix indentation
itaymendel Aug 9, 2021
2cc732c
Angularify the docs
debs-obrien Aug 9, 2021
c3ab2cc
npmrc
itaymendel Aug 9, 2021
fce31f0
updates
itaymendel Aug 9, 2021
dd0661a
fixes and improfements
debs-obrien Aug 9, 2021
903a1e3
minor fixes
debs-obrien Aug 9, 2021
75be4fb
small changes
giteden Aug 9, 2021
c2bfe32
minor fixes
debs-obrien Aug 10, 2021
6a43835
ready to demo mfe
itaymendel Aug 10, 2021
1490157
missing pics
itaymendel Aug 10, 2021
5bc038e
add overview section to get started
debs-obrien Aug 10, 2021
3f64e91
add content
giteden Aug 10, 2021
ea1fdc0
remove overview
debs-obrien Aug 11, 2021
001efeb
Update build-pipelines.md
giteden Aug 12, 2021
ba25cb6
fixes
ranm8 Aug 12, 2021
c761db5
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 12, 2021
5d2584c
Update sidebars.js
debs-obrien Aug 12, 2021
c45406b
slight changes
ranm8 Aug 12, 2021
885bb30
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 12, 2021
e5c05f5
getting started collapsed
debs-obrien Aug 12, 2021
d3ff59a
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 12, 2021
29c2fcd
Update sidebars.js
debs-obrien Aug 12, 2021
c58b988
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 12, 2021
7533b41
add collapsed to compose components section
debs-obrien Aug 12, 2021
db684c0
globally change collapsable
debs-obrien Aug 12, 2021
ba7e7e0
set collapsable to false
debs-obrien Aug 12, 2021
b77a8ec
remove all collapsed from sidebar
debs-obrien Aug 12, 2021
bed1ec5
more collapses
debs-obrien Aug 12, 2021
c5d5205
Merge branch 'many-changes' of github.com:teambit/docs into many-changes
ranm8 Aug 12, 2021
bb3d0d6
part done
ranm8 Aug 12, 2021
8396d20
getting started and deep dive not collapsible
debs-obrien Aug 12, 2021
d392653
progress
ranm8 Aug 13, 2021
b6544d2
improvements
ranm8 Aug 15, 2021
684521d
monorepo section
ranm8 Aug 15, 2021
f0f58c2
few more changes
ranm8 Aug 15, 2021
e9c74fd
changes
ranm8 Aug 16, 2021
a1e4167
monorepo section
ranm8 Aug 16, 2021
29f27be
improvements in monorepos and structure
ranm8 Aug 16, 2021
d68cd5e
bit-ployrepo additions
debs-obrien Aug 17, 2021
68de1b1
remove 'all' option from 'tag persist'
giteden Aug 19, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ bit tag --soft <component-id>
3. Have the CI run the following command to tag all components suggested to be versioned (suggested by the previous 'soft tag')

```bash
bit tag --persist --all
bit tag --persist
```

### Untag a component
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: workspace
title: Local Workspace
title: Workspace
---

The Bit Workspace is a local development environment for Bit Components. The local workspace gives you a monolithic development experience for building Bit Components and reusing components built by other teams.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ title: Initializing a Workspace
---

import FilesBitCreates from '@site/docs/components/workspace/files-bit-creates.md'
import BitInit from '@site/docs/components/commands/bit-init.md'
import ReactEnvironment from '@site/docs/components/workspace/react-environment.md'
import QuickGuide from '@site/docs/components/quick-guide.md'
import BitInit from '@site/docs/mdx-components/commands/bit-init.md'
import ReactEnvironment from '@site/docs/mdx-components/workspace/react-environment.md'
import QuickGuide from '@site/docs/mdx-components/quick-guide.md'

In order to initialize a workspace you will need to first [install Bit](installing-bit). A Bit Workspace enables you to author and manage multiple independent components in a simple and elegant way. Bit works with Git so you can either add init a new git repo or add Bit to an existing git repo.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,4 @@ bvm upgrade

## What's next?

Once you have installed Bit and BVM you can then [initialize a workspace](/getting-started/initializing-workspace) so you can manage your components.
Once you have installed Bit and BVM you can then [create a workspace](/getting-started/initializing-workspace) to compose and ship your first components.
306 changes: 306 additions & 0 deletions __archived/reference/ci-cd.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,306 @@
---
id: ci-cd
title: CI/CD and Deployment
---

Use your CI/CD tool to install Bit components on consuming apps or publish component automatically to [bit.dev](https://bit.dev) or any remote Bit scope.

- If you want to only install components on the CI using NPM or Yarn, follow the steps bellow to [get a token](#get-a-bit-token), and [configure .npmrc on CI](#configure-npmrc-on-ci). [Go here](#common-errors) for information on common errors.
- If you want to version and export components, first [get a token](#get-a-bit-token) and [follow these steps](#version-and-export-components-on-ci).

## Get a Bit token

The first thing to do is get a Bit token that has access to scopes.
You can create a dedicated user such as `dev@company.com` for the deployment, or use an existing user's token.

> If you are using an existing user's token, follow the steps described [here](/bit-dot-dev/authentication#additional-tokens) to generate a token that does not expire on local logins.

To get your token run the following command:

```shell
bit config get user.token
```

Set `user.token` as an environment parameter on your server named `BIT_TOKEN`.

## Install Components on CI

### Configure npmrc on CI

Bit components are stored on the bit registry located in `https://node.bit.dev`.

When installing components with npm or yarn, they will try to install the components starting with `@<account-name>` by resolving the `@<account-name>` registry. This configuration is stored in an `.npmrc` configuration file. Npm and yarn respect the following file locations:

- per-project config file (`/path/to/my/project/.npmrc`)
- per-user config file (`~/.npmrc`)
- global config file (`$PREFIX/etc/npmrc`)
- npm builtin config file (`/path/to/npm/npmrc`)

When working locally, `bit login` configures this file automatically for you. You will need to set this file manually for your CI. If not done right you will get these errors:

**NPM**

```shell
failed running npm install at /Users/user/devenv/example-npm-error/components/utils/string/pad-left
npm ERR! code E404
npm ERR! 404 Not Found: @bit/bit.utils.string.pad-left@0.0.1
```

**Yarn**

```shell
failed running yarn install at /Users/user/devenv/example-npm-error/components/utils/string/pad-left
error An unexpected error occurred: "https://registry.yarnpkg.com/@bit%2fbit.utils.string.pad-left: Not found".
```

The error is solved by making sure that one of the `.npmrc` files has the configuration prior to running npm install. The solutions vary per vendor (see below), but the main methods are:

- Define `.npmrc` in the project.
- Generate `.npmrc` file for the CI user
- Extend `.npmrc` configuration with vendor's tools

### Manually create npmrc file

You can add a `.npmrc` in your project with the following:

```shell
@<account-name>:registry=https://node.bit.dev
@teambit:registry=https://node.bit.dev
//node.bit.dev/:_authToken=${BIT_TOKEN}
always-auth=true
```

Define `BIT_TOKEN` as a secret global variable on the server.

### Generate `.npmrc` on server

To generate the file dynamically, you need to run the following script (e.g. create a `bit_npm.sh` script):

```shell
echo "Adding bit.dev to npm registry"
echo "always-auth=true" >> ~/.npmrc
echo "@<account-name>:registry=https://node.bit.dev" >> ~/.npmrc
echo "@teambit:registry=https://node.bit.dev" >> ~/.npmrc
echo "//node.bit.dev/:_authToken={$BIT_TOKEN}" >> ~/.npmrc
echo "Completed adding bit.dev to npm registry"
```

### Netlify

On Netlify, [you cannot generate the file dynamically](https://community.netlify.com/t/common-issue-using-private-npm-modules-on-netlify/795/11), and you should [add `.npmrc` file in your project](#define-npmrc-in-the-project).

Add the BIT_TOKEN as [environment variable](https://www.netlify.com/docs/continuous-deployment/#environment-variables)

### ZEIT Now

On ZEIT Now, use the `now.json` configuration file to add an [environment variable](https://zeit.co/docs/v2/build-step#using-environment-variables-and-secrets) containing the contents of your `~/.npmrc` file.

First, add the following to `now.json`:

```json
{
"name": "my-app",
"version": 2,
"build": {
"env": {
"NPM_RC": "@my-app-npmrc"
}
}
}
```

Then, create a secret with the contents of your `~/.npmrc`.

```shell
now secrets add my-app-npmrc "$(cat ~/.npmrc)"
```

Note that `my-app-npmrc` is the name of the secret and can be named anything you wish.

### Gitlab

In `.gitlab-ci.yml` run the script that [generates the file for the user](#generate-npmrc-on-server) as an initial step before running npm install.

Add the BIT_TOKEN as an [environment variable](https://docs.gitlab.com/ee/ci/variables/)

### GitHub actions

Add the BIT_TOKEN as a [secret](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) in GitHub.

In the GitHub workflow file, create a step before the npm install section:

```shell
- name: init bit.dev
run: |
echo "Adding bit.dev to npm registry"
npm config set @bit:registry https://node.bit.dev
npm config set @<account-name>:registry=https://node.bit.dev
npm config set @teambit:registry=https://node.bit.dev
npm config set //node.bit.dev/:_authToken ${BIT_TOKEN}
echo "Completed adding bit.dev to npm registry"
env:
BIT_TOKEN: ${{ secrets.BIT_TOKEN }}
```

### Heroku

To generate the `.npmrc` before installing dependencies, run a pre-build script as described [here](https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps).

Add the `BIT_TOKEN` as an [environment variable](https://devcenter.heroku.com/articles/config-vars#managing-config-vars)

### Azure pipelines

Use the [npm authenticate task](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/package/npm-authenticate?view=azure-devops) to setup the `.npmrc` configuration in your pipeline.

### Common Errors

#### 'package not found' (404) when importing a component

NPM or Yarn throws 'package not found' when importing a component. This is likely because the component has a dependency on a @bit component. Make sure [npmrc is configured](#bit-installed-components).

#### Unauthorized (401) when installing a component

Possible reasons:

- npmrc is not properly [configured](#bit-installed-components)
- You do not have the right permissions on the Collection that the components are hosted in, and are therefore unable to access its components. Make sure you have at least read permissions for the collection that host the components.
- Yarn does not send an authentication token when installing packages from a `yarn.lock` file. This is a [known issue](https://github.com/yarnpkg/yarn/issues/4451). Make sure `always-auth` is [configured in `.npmrc`](#bit-installed-components).

## Version and Export Components on CI

### Install and configure Bit

Follow the instructions in [bit docker readme](https://github.com/teambit/bit/blob/master/scripts/docker-teambit-bit) to get a docker with bit installed.

To configure bit on the server, you need to run the following commands:

```shell
bit config set user.token ${BIT_TOKEN}
```

### Versioning and Publishing

The flow for versioning and publishing components work as follows:

1. On your local computer run `bit tag` with the `--soft` option to annotate that modified components should be versioned and exported.
1. Bit updates `.bitmap` with information on new versions to publish.
1. Collaborate with your peers on the soon-to-be published components, their semantic version and changelog messages.
1. Merge changes to main branch.
1. CI/CD versions all marked components and publish them.
1. CI/CD commits back to the repository the updated `.bitmap` without annotations on versions to be exported.

> **Where is the 'test' and 'build'?**
>
> The `tag` command runs the 'build pipeline' before versioning a component. This pipeline includes building and testing. if any of these tasks fails, the versioning process will be aborted.

:::info use soft tags in local workspaces
Components in local workspaces should be 'soft-tagged'.
That means they are registered in the `.bitmap` file as pending to be versioned, but not yet versioned.
The versioning process should only happen in the CI (once changes to the workspace are pushed to the remote repository).
This enables collaboration on components before they are tagged and exported.
[**Learn more**](/building-with-bit/exporting-components).
:::

### Using GitHub Actions

> You can also follow along with this [example project.](https://github.com/teambit/harmony-with-github-actions)

1. Create a new [secret variable](https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypted-secrets) in your Github repository. Name it `BIT_TOKEN` and set the value of it to the `user.token` value.
1. Create a new `tag-and-export.yml` file in your remote repository `./.github/workflows` directory.
1. Create your script.

Here's a demo script you can start with:

```yaml
# This workflow hard-tags and exports soft-tagged components
name: Tag and Export Components

on:
push:
branches: [main]
pull_request:
branches: [main]

jobs:
tag-and-export:
runs-on: ubuntu-latest
if: "!contains(github.event.head_commit.message, '--skip-ci')"
env:
BIT_TOKEN: ${{ secrets.BIT_TOKEN }}

steps:
- uses: actions/checkout@v2
- name: Use Node.js 12
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Install Bit Version Manager
run: npm i -g @teambit/bvm
- name: Install latest Bit version
run: bvm install
- name: add bvm bin folder to path
run: echo "$HOME/bin" >> $GITHUB_PATH
- name: Set up bit config
run: |
bit config set analytics_reporting false
bit config set anonymous_reporting false
bit config set user.token $BIT_TOKEN
- name: Install packages using bit
run: bit install
- name: Hard-tag pending components
run: bit tag --persist
- name: Export components
run: bit export
- name: Commit changes made to .bitmap
run: |
git config --global user.name '${{ github.actor }}'
git config --global user.email '${{ github.actor }}@users.noreply.github.com'
git add .bitmap
git commit -m "update .bitmap with new component versions (automated). --skip-ci"
git push
```

### Using GitLab CI

1. Generate a Personal Access Token with "Read Repository" and "Write Repository" permissions (this will be `GL_TOKEN`).
1. Generate `BIT_TOKEN` by grabbing it from your local "bit config" output.
1. Configure both tokens as project variables for your GitLab project and name them `GL_TOKEN` and `BIT_USER_TOKEN`.
1. Create a `.gitlab-ci.yml` file in the root of the repository.
1. Create your script.

Here's a demo script you can start with:

```yml
publish_components:
image: node:latest
only: master
script:
# Install Bit and configure permissions
- npm i -g @teambit/bvm
- bvm install
- export PATH=$HOME/bin:$PATH
- bit config set analytics_reporting false
- bit config set anonymous_reporting false
- bit config set user.token $BIT_TOKEN
# Install dependencies
- bit install
# Version all pending components
- bit tag --persist
# Export components
- bit export
# Setup Git and commit back .bitmap changes
- git config --global user.email "some@email.address"
- git config --global user.name "some ci account"
- export GL_RELEASE_GITLAB_API_TOKEN=$GL_TOKEN
# This checkout is a workaround for the "error: src refspec master does not match any." error
- git checkout master
# Add the modified ".bitmap" file
- git add .
# Replace origin with authenticated origin
- git remote rm origin
- git remote add origin https://[repo-owner]:$GL_RELEASE_GITLAB_API_TOKEN@gitlab.com/[repo-ower]/[repo-name].git
# Using [skip ci] as its a feature for GitLab that will not trigger CI for this commit
- git commit -am 'publish components [skip ci]'
- git pull origin master
- git push origin master
```
Loading