Releasing new components with GitHub Actions
Let's automate the release of new components.
Automation is our friend...if we know what it does! In this lesson, we'll take a moment to understand at a high level what the GitHub Actions scripts do. We'll also see how we can release our component library to NPM through GitHub.
An added benefit of this is that we can remove any NPM publishing credentials from individuals and only have them in CI, thus minimizing the risk of leaking sensitive keys and credentials.
Understanding our CI scripts#
You may have noticed that the component library has two CI scripts: main.yml and release.yml.
Our main script both builds code and sends an updated state to Chromatic, while the release script is exactly the same but also publishes to NPM if we pass the Chromatic step.
1
name: 'Release components'
2
3
on:4
push:5
tags:6
- "v*"
7
8
jobs:9
release-components:
10
runs-on: ubuntu-latest
11
steps:12
- name: Checkout repository
13
uses: actions/checkout@v2
14
with:15
fetch-depth: 0
16
- name: Install dependencies
17
run: |
18
npm install --force
19
npm install react react-dom styled-components prop-types --save
20
- name: Build components
21
run: |
22
npx figmagic --token ${{ secrets.FIGMA_TOKEN }} --url ${{ secrets.FIGMA_URL }}
23
npm run build
24
- name: Publish to Chromatic
25
uses: chromaui/action@v1
26
with:27
token: ${{ secrets.GITHUB_TOKEN }}
28
projectToken: ${{ secrets.CHROMATIC_TOKEN }}
29
- uses: actions/setup-node@v1
30
with:31
node-version: 14
32
registry-url: https://registry.npmjs.org/
33
- run: git config --global user.email ${{ secrets.GIT_EMAIL }}
34
- run: git