CodeX
Published in

CodeX

CODEX

Creating an Angular Library to share components with Bit

Bit is an immensely productive tool to have in your development process and works well with Angular to create reusable code. It is also simple to set up and supports a variety of javascript frameworks.

The following is a quick walkthrough to set up an Angular library to develop components locally, and how to upload them to Bit for reuse in your, or anyone else's application. I strongly recommend reviewing the Bit docs for a sound understanding of what is happening and best practices.

The steps are:

  • Create an angular workspace
  • Create a library that will house the component to be shared
  • Set up Bit in your workspace
  • Compile and upload to Bit
Above the clouds, at Lake Ohau / How you’ll feel once you use Bit

Angular Library

First, create a workspace, and when prompted say yes to strict mode:

ng new bit-components --create-application=false

This will create the directory that can hold all of your libraries.

The structure to be implemented is each library becomes a component available on Bit. If you think there is a more appropriate way to go about this, comment and let’s discuss.

So, to create the library that will hold the component:

ng g lib nameOfComponent

This has created a directory with files you’ll likely want to start building your component. In this directory change the lib directory name to that of your component. I.e projects/name-of-component/src/lib becomes projects/name-of-component/src/name-of-your-component . Bit uses this last directory to name the component on the site/package download. I suggest going through the docs to see if there is a more appropriate way to do this.

This parts up to you, code your component!

Sharing with Bit

Getting set up is pretty simple, and so is uploading. The Bit team have really made it a smooth process.

Head over to Bit, create an account, and create a collection.

Once complete back in your main directory (bit-components was the example used here) run the following to prepare your environment, build the component and upload to Bit:

This is installing Bit globally, and linking to your account. The bit init command prepares the workspace to support Bit. It then adds the compiler for Angular. The bit add command tells Bit which components in this workspace are to be tracked.

The --main option sets the entry point for the component. Anything you want available to the consumer should be exported in this public_api.ts file. This could include other classes, interfaces, components etc… that you want to be readily available on import of your component.

bit build compiles your component. bit tag sets a version number to all tracked components in this workspace. bit export pushes all components in this workspace to the selected collection.

Head over to your browser and go to your bit.dev page. You should now see your component. On the right are the instructions for how to download with npm/yarn etc…. Your component is now ready to use!

This should have set you on the road to easily reusable components with Angular and Bit. Let me know if you have any questions, or think there are issues.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store