How to Publish React Components
How to quickly publish React components from any repository.
“How to publish React components” has more than just a single answer. It could be done through a myriad of methodologies, tools, and registries. This post goes through one way that seems to tick all the right boxes: Bit.
Bit is a tool and a cloud component hub that takes care of the entire process of publishing, documenting, and organizing components. It does all that from any repository. No need to structure your project in any specific way.
Taking Bit for a test drive: Let’s publish components
For this demo, I’ve built a “Bad Jokes App” (an app that serves bad jokes), with create-react-app.
I’ll publish its reusable components to my public component collection on Bit’s component hub (Bit.dev).
The steps, that go from isolating to publishing components, are as follow:
- Install Bit
- Initialize a Bit workspace in the app’s root directory
- Track components that will be published
- Install a Bit compiler
- Tag components: Use Bit to build, test and set a version
- Publish components to Bit’s registry
The demo app (source):
The app’s published components:
Each component in this app is structured with its files under the same directory.
I’ve used CSS Modules for styling, to prevent “naming collisions” between classes, in future consuming projects.
I highly recommend adding unit-tests (and placing each .spec file under its component directory). Bit will run these tests before it publishes the components (to keep this tutorial short and to the point, I haven’t included tests myself).
|-- components
|-- Button
|-- Button.jsx
|-- Button.module.css
|-- index.js
|-- Card
|-- Card.jsx
|-- Card.module.css
|-- index.js
|-- Text
|-- Text.jsx
|-- Text.module.css
|-- index.js
|-- AppBar
|-- AppBar.jsx
|-- AppBar.module.css
|-- index.js
|-- BadJokesViewer
|-- BadJokesViewer.jsx
|-- BadJokesViewer.module.css
|-- index.jsInstall Bit
I’ll first install Bit’s CLI tool globally on my machine. Nothing special, so far.
$ npm install bit-bin --globalInitialize a Bit Workspace
I’ll also initialize a Bit workspace in my project’s root directory to get started.
Working in Bit revolves around workspaces. A workspace contains information about all the tracked components’ details, and provides the functionality to author, export, import, and install components.
$ bit initGet ready for some magic 🎩 💫
- Magic #1: Bit will source control components alongside the project’s source-control so that you don’t have to copy each component to its own new repository.
- Magic #2: Bit will analyze each component’s dependencies and configure the
package.jsonfile for you. - Magic #3: Bit will take care of the build/bundle configurations for you. All you need to do is install a single compiler from Bit.
- Magic #4: Bit will auto-generate documentation for each component and display it on the component’s page (on Bit.dev).
Track components
Add components to start tracking them.
$ bit add src/components/*Here, I’m adding multiple components, not to publish them as a single library but to parallelly publish multiple independent packages.
Bit analyzes your component dependencies and sets an entry point for each package. It will make sure each package will have all that it needs to survive and prosper as an independent component. It also makes sure not to include redundant files and directories like bit.json, node_modules, yarn.lock, etc.
So, no need to bother yourself with your package’s package.json files.
Tip: If a package has dependencies that will certainly be present in future projects using it, make sure to set these dependencies as
peerDependencies. That will make sure not to install these dependencies so as to avoid duplications and version conflicts.For example, my
create-react-appproject hasreactset as a “regular” dependency. That will tell Bit to set your packages’ dependencies the same way. But, that’s not what you want because you’re expecting future consuming projects to have their own version of this library. You can change that (without ejecting) by placing ‘react’ under peerDependencies instead or , you can override Bit’s configuration in your project’s package.json file. Read more about it here.
Install a compiler
What about setting up a compiler? a bundler? Rollup? Webpack? Where do we start?
There’s no need to dive deep into endless configurations. Simply choose one of Bit’s pre-built compilers. In this case, I’ve used the React compiler by “bit importing” it, just the same as I would when “cloning” any other published component into my project. To set it as compiler we add the --compiler flag.
$ bit import bit.envs/compilers/react --compilerBuild, test and set a version
It’s time to wrap things up. Let’s use the tag command to build, test (run your components’ unit tests), and version our tracked components.
This will help us make sure our components are OK to be published. If anything fails, the process will stop and nothing will get published.
Bit also makes sure to tag components with a semantic version number (Major.Minor.Patch). It automatically bumps the patch number on every new “export” (publish). It’s up to you to manually set a version number that describes changes more drastic than a patch. Read more about it here.
$ bit tag --all// or$ bit tag --all 0.0.1
Publish components to Bit’s registry
To publish our components to Bit’s registry, we will need to sign up first and create a new component collection, which is, essentially, a scope for our soon-to-be-published components.
Once we’re done, we can log in to Bit, from our terminal.
$ bit loginIt’s time to publish the components.
$ bit export eden.badjokes// where 'eden' is the username and 'badjokes' is the collection name
But wait, what about documentation?
Again, just as promised, documentation is integral to the publishing process. Bit auto-generates documentation out of prop-types, JSDocs, and TypeScript. And, of course, you can always add an .md file to your component directory and manually write your docs.
For example —
This Button component:
Will produce this:
And, in addition to that, Bit also renders published components in its playground, using example code.
Conclusion
Publishing components and sharing them between projects should be quick and simple. Bit does just that with an end-to-end solution for the entire process of publishing components and making them easily discoverable.
