Publishing and using our components as a consumer

While dogfooding does sound yucky, it's a word that connotes the practice of using one's own things, sometimes to build something new. That's what we will do now with the components we've built.

We're nearing the end of the third module and have done a lot of work to put our continuous design pipeline in place. The missing piece, from a code perspective, is being able to consume and use our components.

To publish a package, there is, strictly speaking, no need to keep our code anywhere (say, a remote repository) or to use CI/CD tooling. You can do this easily from your local machine; that's enough! Locally publishing a package is also a cheap and easy way to verify that your package is actually correctly packaged and working before going too deep into the trenches. It's hardly unheard of that something went awry when trying to publish for the first time!

Prep and check#

Open up the component library project.

The very first step you need to do is to double-check that your package name is updated to reflect your own—and not my—package name.

This is a partial repeat of what I said in a previous lesson, but it's never too late to fix, in case you missed this!

Open package.json and check the name field. You will need a unique name to be able to deploy a package. To get around the logical issues of finding a unique name, you can scope the package. Private scoped packages cost money, so for now, let's do a scoped public package. In this case, a decent package name could be (similar to mine) @your-name-or-alias/my-design-system-components. Set the version field to 0.0.1 while you are at it.

In case you changed it, I'd recommend doing an npm install command to sync the lockfile.

The entry point to our code will be whatever the main field in package.json points to. In our case, it already points to dist/index.js, indicating it is a built file (our build command does this). Building the package is, as you know, already set up. It's even tied to the prepublishOnly npm hook, so it's going to be done automatically when we publish, so you can't miss building beforehand.

Unless you changed it, Webpack's entry point is set to src/index.jsx. It needs to export our components like this, or our component library won't do anything:

For every new component you make, you have to remember to export it for it to be usable.

Handle credentials#

The best way to handle these "secrets" is by placing them into an environment file, which, by convention, is called .env. Create it at the root of the project. Place the ID and token values into the file, like this:

Figmagic will pick up that these values are present. No further configuration is technically needed.

Publish to NPM#

Start a new discussion. All notification go to the author.