Components:[ADVANCED] Use CI CD to release your components - bettyblocks/cli GitHub Wiki

Use CI/CD

This tutorial will show you how to setup a CI/CD release pipeline (with Azure Storage and Gitlab CI/CD) for your projects.

Prerequisites

Adding the release script to package.json

Open the package.json in the project to which you want to add CI/CD, add the following script to the npm scripts:

    "release": "bb components publish --bucket=${BUCKET}"

Get your credentials from Azure

Figure out the contents of the following environment variables, you should be able to find them under Settings > Access keys in your Azure Storage account:

  • AZURE_BLOB_ACCOUNT
  • AZURE_BLOB_ACCOUNT_KEY

Add environment variables to your Gitlab project

Your should add the following environment variables to Gitlab CI/CD:

  • AZURE_BLOB_ACCOUNT
  • AZURE_BLOB_ACCOUNT_KEY
  • BUCKET (the name of your component set)

Read https://gitlab.betty.services/help/ci/variables/README#variables for more info.

Create a .gitlab-ci.yml configuration file

Add the following content to the .gitlab-ci.yml file in the root of your project:

stages:
  - publish

publish:
  stage: publish
  image: node:12.13.1-alpine
  script:
    - yarn
    - yarn build
    - yarn release
  only:
    - master

Push your project; the pipeline will run each time you push/merge something to the master branch. The pipeline should produce something similar to the following output:

$ yarn
yarn install v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@betty-blocks/cli > @semantic-release/[email protected]" has unmet peer dependency "semantic-release@>=15.8.0 <16.0.0 || >=16.0.0-beta <17.0.0".
warning "@betty-blocks/cli > @semantic-release/[email protected]" has unmet peer dependency "semantic-release@>=15.4.0 <16.0.0".
warning "@betty-blocks/cli > @betty-blocks/preview > [email protected]" has unmet peer dependency "eslint-plugin-react-hooks@^1.7.0".
[4/4] Building fresh packages...
Done in 17.04s.
$ yarn build
yarn run v1.19.1
$ bb components build
Success
Done in 0.98s.
$ yarn release
yarn run v1.19.1
$ bb components publish --bucket=${BUCKET}
Publishing prefabs.json.
Publishing templates.json.
Upload succesfully.

Use the following URL in the Page Builder to start working with your component set:

https://storage.blob.core.windows.net/bucket
Done in 1.11s.
Job succeeded

Paste the URL you find in the output (https://storage.blob.core.windows.net/bucket in this case) in the Page Builder. Congratulations! You and your co-workers can enjoy automated releases.

⚠️ **GitHub.com Fallback** ⚠️