Tracking Bit Components - Movie App Example

This repository was exported as Bit components.

This is how we did it:

$ bit init
successfully initialized a bit workspace.
$ npm install

The bit init command has initialized a local Bit scope and created a bit.json file.

Next, we want to track the project's components as Bit components, and let Bit know which files are the test files.

$ bit add src/components/* -t 'src/components/{PARENT}/*.spec.js'
tracking 8 new components

After tracking, checking the status will prompt the following result:

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > hero ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/hero/Hero.js -> src/global.css

     > hero-button ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/hero-button/HeroButton.js -> src/global.css

     > item ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/item/Item.js -> src/global.css

     > list-toggle ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/list-toggle/ListToggle.js -> src/global.css

     > logo ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/logo/index.js -> src/global.css

     > navigation ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/navigation/Navigation.js -> src/global.css

     > title-list ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/title-list/TitleList.js -> src/global.css

     > user-profile ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/user-profile/UserProfile.js -> src/global.css

Bit warns us that all the components has an untracked file dependency - this means that the component requires another file that is not tracked by Bit. We can either track the file as part of the existing component, or decide to track a new component, which is what we would do:

$ bit add src/global.css --id style/global
tracking component style/global:
added src/global.css

If we check the status, we can see all is well:

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > hero ... ok
     > hero-button ... ok
     > item ... ok
     > list-toggle ... ok
     > logo ... ok
     > navigation ... ok
     > title-list ... ok
     > user-profile ... ok
     > style/global ... ok

Next, we'll import a build environment and a test environment, so the components will be built and tested properly:

$ bit import bit.envs/compilers/react --compiler
the following component environments were installed
- bit.envs/compilers/react@1.0.11

$ bit import bit.envs/testers/mocha --tester
the following component environments were installed
- bit.envs/testers/mocha@5.0.2

Now let's test the components!

$ bit test

We can see all the tests are ‘passed’. Sounds like a good time to tag and export the components to your scope on bit.dev.

$ bit tag --all 1.0.0
...9 components tagged | 9 added, 0 changed, 0 auto-tagged
added components:  style/global@1.0.0, hero-button@1.0.0, hero@1.0.0, list-toggle@1.0.0, item@1.0.0, logo@1.0.0, navigation@1.0.0, title-list@1.0.0, user-profile@1.0.0

$ bit export <user-name>.movie-app-example
exported 9 components to scope <user-name>.movie-app-example

That's it, it's now possible to consume the components from any other project as individual components! Check out your scope on bit.dev.