Components:Usage - bettyblocks/cli GitHub Wiki

Development

Create a new Component Set

$ bb components create hello-world
$ cd hello-world/
$ npm install

Start the development server

Important note: this command will use the local version of the CLI used by your component set project. To see which version of the CLI the component set uses, please check the package.json file. To update the local version used by your current project to the latest version, please run:

npm update @betty-blocks/cli

To start the development server:

$ npm run dev

> [email protected] dev ~/hello-world
> nodemon --watch src --exec 'yarn build && yarn start'

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: ~/hello-world/src/**/*
[nodemon] starting `yarn build && yarn start`
yarn run v1.13.0
$ bb components build
Built Component Set.
_  Done in 0.40s.
yarn run v1.13.0
$ bb components serve
Serving "hello-world" component set at http://localhost:5001

Optional: increase build speed

It is possible to use a faster build command: npm run dev:fast. This does not rebuild the entire component set, but only components or prefabs that have been modified. It is necessary to first run npm run build before using npm run dev:fast, because all created json files must be present for this. Once this is done npm run dev:fast can be used.

IMPORTANT: This only works on files in the src/components and src/prefabs folders, not in folders outside of them or in the subfolders of src/prefabs. If you want to make a change outside of these two directories, npm run build must be executed, then the watcher npm run dev:fast can be used again.

Optional: offline mode

When building components in an environment without internet access, use the --offline flag to improve the build speed (skips update checks and dependency checking).

Usage: bb components build --offline

Preview Components in the Page Builder

  1. Create a new page in the Page Builder.
  2. Navigate to the page settings tab.
  3. Open advanced.
  4. Paste your Component Set URL in the input field.
  5. Click Save and reload the page. Now your Components are loaded in the sidebar.

Setting up.

Publish the Component Set

Currently we support publishing to Azure Blob Storage. The publish command requires you to set the following environment variables:

  • AZURE_BLOB_ACCOUNT
  • AZURE_BLOB_ACCOUNT_KEY

When you have these set up you can publish:

$ bb components publish --bucket=hello-world
Upload succesfully.

Use the following URL in the Page Builder to start working with your Component Set:

https://ide.blob.core.windows.net/hello-world

We recommend that you set this up in your CI pipeline.