Finishing the CI setup

Putting in the last fixes for our tooling means getting our Continuous Integration operational.

We are now at the point where we can start tying together the build tooling and connect it to our UI platform, Chromatic. And because Figmagic can be run in automation, we are going to enable that, as well.

In production circumstances, I highly recommend you to have your CI/CD tooling up and running as soon as possible. This de-risks the project and takes care of what can easily become technical debt at the earliest point possible. Last but certainly not least, it affords devs and designers the chance to work together from an early point in time rather than subjecting them to artificial contexts.

Doing this early means that we can afford to high-five ourselves for being good people before continuing.

Connecting to Chromatic and getting a token#

Go to Chromatic's website.

Proceed to point Chromatic at your GitHub repository for the component library by clicking Add project > Choose from GitHub.

When the setup process is done, you'll be presented with a project token.

If, for some reason, you made a mistake somewhere and lost your token, you can always find it on the Manage page under the Configure tab.

You will use that token soon to make GitHub Actions run Chromatic during continuous integration.

Updates in GitHub#

Go to your component library repository on GitHub.

Your GitHub Actions scripts, located in .github/workflows/, point to variables that you have not yet specified. The ones you need are:

  • FIGMA_URL

  • FIGMA_TOKEN

  • CHROMATIC_TOKEN

  • NPM_TOKEN

  • GIT_EMAIL

  • GIT_NAME

For each of these, we need to store them as secrets in GitHub.

Remember that we created most of these tokens back in module 1. Otherwise, take a moment to refer back to those respective lessons and see how you can get new tokens.

In the case of GIT_NAME and GIT_EMAIL, however, just use any name and email you feel comfortable using (that belong to you, of course).

To add the secrets, go to Settings for your repository and click the Secrets menu option. Add all of these six with their respective values.

 

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