Publish and Reuse React Components to Build Gatsby Sites, Faster
How to reuse components across Gatsby projects.
Reusing components between Gatsby sites is a great way to deliver faster and provide your users with a consistent look and feel at every touchpoint.
In this demo, I’ll use Bit to publish React components from a marketing site built with Gatsby. I’ll then use my published components to quickly compose a brand new marketing page.
These are the steps we’ll go through:
- Build a Gatsby marketing site — “Buy a Goldfish” 🐠
- Use Bit to publish the site’s components
- Build a new Gatsby site using components published from “Buy a Goldfish” ✌️
So, what’s Bit?
When we share and reuse our components across projects — we can build sites faster and safer. We don’t have to waste time reinventing the wheel and can make sure we create a consistent experience for our users.
Bit is a platform that makes it easy to publish and document components from any project. It provides both a CLI tool for isolating and publishing components and a cloud hub to host and display them. Pretty useful when building different Gatsby websites with the same components.
1. Build My “Buy a Goldfish” Gatsby Web Site
I’ll build a landing page for my up-and-coming goldfish business. I’m positive this will draw interest from many goldfish enthusiasts around the world.
My Site’s Structure
The styling in this project is done using styled-components. Every component is themed using the theme object (in the theme.js file) which will be published as well.
I’ve also classified my components into four groups: common, elements, blocks, and sections.
- common: These components are used on every page and have a “general effect” on the page.
- elements: These are very basic components, which means they are highly reusable and agnostic to their surrounding.
- blocks: These are complex, template-like, reusable components
- sections: These are very concrete component compositions that make up the page sections.
|-- src
|-- components
|-- common
|-- Seo.js
|-- Layout.js
|-- theme.js
|-- sections
|-- HeaderSection.js
|-- GetStartedSection.js
|-- etc.
|-- elements
|-- Button.js
|-- TextInput.js
|-- etc.
|-- blocks
|-- Features.js
|-- HeaderForm.js
|-- etc.Reusable components
In this demo, I decided to publish my blocks, elements, and common components — and leave out the more concrete ‘sections’.
In general, there’s no absolute right or wrong to which components should be published. It all depends on the way you intend to use your collection. For example, it wouldn’t make much sense to publish very large compositions to a collection that serves as a design system but it does make sense for us since we’re using our collection to compose other, similar, websites.
Sharing Concrete or “Smart” Components
As mentioned earlier, there’s no reason why you shouldn’t share anything that you might find useful. It doesn't have to be solely pure and “dumb” UI components. It should be anything that’s useful for you and your team.
For example, in this demo, I’ve published the SEO component which queries data from the site metadata and tags the website accordingly. It may not seem like a very reusable component but in the context of Gatsby, it actually is.
The query should be structured the same across our different Gatsby projects. That’s also the case if we were to use the same headless CMS for multiple projects. If a specific logic is something we often use, then it should be a reusable component.
Publishing Components with Bit
To get started I’ll first install Bit on my machine:
$ npm install bit-bin --globalI’ll then head over to my project’s root directory and initialize a Bit workspace:
$ bit initIt’s time to start tracking my components. I’ll add all three groups and tag each of them with the corresponding namespace to make them easier to find and manage both in my local project and in their shared collection. I’ve used the * sign to select all components under each directory.
$ bit add src/components/elements/* --namespace elements
$ bit add src/components/blocks/* --namespace blocks
$ bit add src/components/common/* --namespace commonI’ll then set up a compiler for the tracked components. That would essentially decouple them from my build setup and make sure they run in other projects.
bit import bit.envs/compilers/react --compilerI’ll then ‘tag’ them (the -a or --all flag is used to select all tracked components that have been changed since the last tag).
$ bit tag -aIt’s time to head over to Bit.dev and create a new collection for my soon-to-be-published components. It’s free and takes about 1 minute.
I can now publish (“export”) my tagged components:
$ bit export eden.buy-a-goldfish// Publish to <user-name>.<collection-name>
And here’s the end result (notice I’ve also added example code so that I can now visually see and try-out the components):
Reusing component to build a new website
The response to my marketing page was good — I’ve received many emails that show me, without a doubt, people are looking for a convenient golden pet 🙂
So, I've decided to launch a new marketing page with a simple “Buy Now” button and a different message.
To make things as simple as possible, I’ll start a new Gatsby project using the gatsby-starter-default starter.
gatsby new new-marketing-site https://github.com/gatsbyjs/gatsby-starter-defaultI’ll use a few of my recently published components to create a simpler version of my previous header:
$ npm i @bit/eden.buy-a-goldfish.common.layout
$ npm i @bit/eden.buy-a-goldfish.blocks.header
$ npm i @bit/eden.buy-a-goldfish.blocks.header-text-group
$ npm i @bit/eden.buy-a-goldfish.elements.buttonWe can install Bit components using NPM or Yarn (we can also clone them into our repository using bit import so that we could modify them and push them back to their collection with a bumped version — but that’s beyond the scope of this tutorial).
As you can see, for the demo, I’ve used NPM.
I’ll then use these components in the index.js page.
I’d like to show some features on my new marketing page. For that, I'll install my Feature component. As you can see, it was built as a compound component so that it would be easy to add and customize new features listed on it (using JSX).
That’s great but that also creates much boilerplate. To make it easy on me and save me some time I’ve copied the example code presented on its page on Bit.dev.
$ npm i @bit/eden.buy-a-goldfish.blocks.features
I now have a new marketing page, composed in no time 🎉
Conclusion
Gatsby used to be thought of only as a static site generator but lately, it’s become obvious that it’s much more than that. Gatsby makes our dev life simpler and easier with its great eco-system of plugins, starters, etc. Thanks to it, we build with optimized code that not only makes good apps and websites but also allows us to deliver faster than we would otherwise.
It is in the same spirit that we look for solutions that would make our code more reusable across projects. We’d love to be able to write good code and never have to do it again.
That’s where Bit comes in. It does most of the “dirty job” of publishing and sharing components, for us. It helps in component isolation, auto-generates documentation, renders our components in its playground and notifies us of any change, both in the component itself and its usage (for example, if a new project has recently installed one of our components).
Put together, Gatsby and Bit create a great development experience where I can build components and use them to compose new websites faster.
Thanks for reading, I hope you enjoyed it!
