Author: John Au-Yeung

Bit.dev is a great snippet repository to let us add store our front end components as standalone packages.

In this article, we’ll take look at how to add create component packages that are created for Gatsby and then use them in another Gatsby project.

Build a Gatsby Landing Page

The first step is to build a simple landing page component in our first Gatsby project. Then we’ll extract that component from it with the Bit CLI later and import it to the other Gatsby project and use it.

Make sure that we use recent version of Node like 10.x or later before we run anything.

First, we’ve to install the Gatsby CLI by running:

npm install -g gatsby-cli

Then we create a new Gatsby project by running:

gatsby new gatsby-landing-page

Once we did that, we start our development server by running:

gatsby develop

Next, we create a landing-page folder in the components folder and then create and index.js and banner.jpg file inside it.

We have to do so we can export the whole folder as a package with Bit CLI later.

The root JavaScript file must be called index.js. Then we put in the following code into index.js:

import React from "react"
import BannerImage from './banner.jpg'

const LandingPage = () => {
  return (
    <div className='center'>
      <h1 >Buy Now</h1>
      <p>Use Bit to store your code now.</p>
      <div style={{ maxWidth: `100vw`, marginBottom: `1.45rem` }}>
        <img src={BannerImage} alt='landing page image' />
      </div>
      <button>Subscribe to Bit Now</button>
    </div>
  )
}

export default LandingPage

We have to import the image file directly since we can’t use the GraphQL hooks in a compiled package since the GraphQL queries are run at compile time.

If we use the useStaticQuery hook to include our image, we’ll get an error is we import it later.

Next, we create our own Layout component by creating the layoutcomponent folder in the components folder.

Then we create index.js in there and add the following:

import React from "react"
import Header from "../header"
import "./layout.css"

const Layout = ({ children, title }) => {
  return (
    <>
      <Header siteTitle={title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

export default Layout

We move the layout.css file from the generated code into the layoutfolder.

In index.js in the pages folder, we replace what we have with:

import React from "react"
import LandingPage from '../components/landing-page';
import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <div className='center'>
    <Layout title='Buy Now'>
      <SEO title="Home" />
      <LandingPage />
    </Layout>
  </div>
)

export default IndexPage

‘Export’ (Publish) All Reusable UI Components From the Project to Bit.dev

Now that we created our Gatsby landing page in the gatsby-landing-page project. We can export it now to the Bit.

First, we go to bit.dev to create an account.

Then we have to log into it and then create a collection. We can click the ‘+New’ button on the top right, then click Collection to do that.

When we’re asked for the name, enter ‘landing-page’. We’ll leave it public for this example, but it can also be private.

Next, we go to the command line to install the Bit CLI by running:

npm install bit-bin -g

To check that it’s installed, we run:

bit --version

Then we log into the Bit account we just created by running:

bit login

It’ll configure itself automatically. If we want to check the settings that were configured, we can run:

bit config

It’ll add the NPM registry used the Bit to our .npmrc file automatically.

Next, we run bit init to initialize Bit in our gatsby-landing-pageproject.

Then we’ll get a new .bitmap file in our project’s root directory. It tacks Bit components an only includes a comment and line with out Bit version.

In package.json, we’ll see something like the following included:

"bit": {
    "env": {
        "compiler": "bit.envs/compilers/react@1.0.16"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
}

Now we’re ready to build and upload our component files to Bit.

In the command line, we change to our project’s root folder and run:

bit add src/components/landing-page
bit add src/components/header
bit add src/components/layout

Then we’ll see our files added by Bit. We can run bit status to see if it’s been added successfully.

Now we have to install the Bit React compiler by running:

bit import bit.envs/compilers/react --compiler

so that we can build the package and then upload the built package to Bit.

Building the components makes sure that the component is directly consumable by other project and also that the component includes all rthe parts that are required in order to share it with others.

Now we can build the project by running:

bit build

Once we did that, we can tag it with a version number by running:

bit tag --all 0.0.1

We can check the status of tagging by running bit status.

Now we can upload our component to Bit by running:

bit export <username>.landing-page

This will compile and push the component to Bit.

Now when we run bit status, we should see nothing to tag or export since we pushed our built package to Bit.

We can then check what’s uploaded with bit list. To preview our component, we can go to https://bit.dev/<username>/landing-page/landing-page

Create a new Gatsby project.

Now that we uploaded our landing page component to Bit, we can use it in another project.

In this example, we’ll use it in another Gatsby project.

To create a new Gatsby project, we run:

gatsby new gatsby-bit-dev

Import reusable UI components from Bit.dev (the same components you’ve published from the first landing page).

After we created our Gatsby project, we go to the directory for our project and then we have to add the Bit registry to our project by running:

npm config set @bit:registry https://node.bit.dev

since we left our component public. If we make our component private in Bit, we have to run:

npm login --registry=https://node.bit.dev --scope=@bit

Our component package will be available in the @bit/<username>.<collection name>.<component name> format.

There in our example, we’ll run:

npm install @bit/jauyeunggithub.landing-page.landing-page --save

npm install @bit/jauyeunggithub.landing-page.header --save

npm install @bit/jauyeunggithub.landing-page.layout --save

After we run that, we’ll see that we have:

"@bit/jauyeunggithub.landing-page.landing-page": "0.0.1",

in package.json of our gatsby-bit-dev project.

Importing and Using Our Component.

In the components folder, add subscribe-button.js and add:

import React from "react"

const SubscribeButton = () => <button>Subscribe to Newsletter</button>

export default SubscribeButton;

Now to use it, we go to index.js and add:

import React from "react"

import Layout from '@bit/jauyeunggithub.landing-page.layout';
import SEO from "../components/seo"

import LandingPage from '@bit/jauyeunggithub.landing-page.landing-page';
import SubscribeButton from "../components/subscribe-button";

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <LandingPage />
    <div className='center'>
      <SubscribeButton />
    </div>
  </Layout>
)

export default IndexPage

In the code above, we imported our landing page component package that we published to Bit and then referenced it.

We used the SubscribeButton component from our project and the rest of the components are imported from Bit.

Now when we run gatsby develop --port 8001, we’ll see the same landing page as we seen before.

Conclusion

Bit provides us with an easy way to publish Gatsby React component to a central place so that we can use them later,

It just takes a few command to compile a series of components inside one folder into a package and then import it in another project.

To import the package, we just have to add the Bit NPM registry by using npm config and then we can install our package like any other Node package and use it.