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 installThe 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 componentsAfter 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.cssBit 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.cssIf 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 ... okNext, 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/[email protected]
$ bit import bit.envs/testers/mocha --tester
the following component environments were installed
- bit.envs/testers/[email protected]Now let's test the components!
$ bit testWe 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/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
$ bit export <user-name>.movie-app-example
exported 9 components to scope <user-name>.movie-app-exampleThat's it, it's now possible to consume the components from any other project as individual components! Check out your scope on bit.dev.