A starting point to get to know the ways of creating custom functionalities within the Betty Blocks platform.
The Betty Blocks CLI
The Betty Blocks CLI (Command Line Interface), which enables the low-code environment, extends the capabilities of the platform by offering low-coders the ability to create their own custom functionalities including:
- Creating custom action steps
- Creating custom components
- Publishing custom content to the Block Store
- Enabling remote data connections
Pre-requisites
To create and update your content you need to understand the syntax and logic of the following coding languages and libraries:
- Javascript (ES6)
- Typescript
- JSX
- React
We recommend using Visual Studio Code as your code editor to create custom components and steps as this is what we use in our guides.
Getting started
- Download the LTS (Long Term Supported) version of Node.js, this way you can access NPM (Node Package Manager) via your terminal or CMD. NPM will be used to install and configure the core sets provided by the Betty Blocks CLI for your code editor.
- Open the command line on your computer (Terminal on MacOS and Linux or Cmd on Windows) and use the following command to install the Betty Blocks CLI:
$npm install -g @bettyblocks/cli –no-optional
If this doesn’t work on your Terminal use the sudo command (on Windows you can run CMD as administrator):$sudo npm install -g @bettyblocks/cli –no-optional
Note: if you want to install Betty Blocks with optional dependencies, see our CLI wiki) - Check if and which version of the CLI is installed on your computer by typing this command:
$bb –version - Navigate to the directory you want to develop in.
$cd <directory-name>
- start your development server using NPM, use this command:
$npm run dev
The bb command
After installation, you will have access to the bb command in your CLI. When using a code editor such as Visual Studio Code, you can open up the directory you are developing in and access the Terminal or CMD from there. This allows you to directly cast bb commands from the directory you are using for development.
Use bb help to get a list of available commands.$bb help
After typing this command you will see a list of commands you can use in your Terminal or CMD:
Usage: bb [options] [command]
Betty Blocks CLI
Options:
-v, --version output the version number
-h, --help output usage information
Commands:
components [cmd] manage your component sets
blocks [cmd] manage your blocks
functions [cmd] manage your custom functions
interactions [cmd] manage your interactions
bundle [cmd] manage your vendor bundle
help [cmd] display help for [cmd]
Creating custom items and/or how to use the CLI
After setting up your environment, you will be able to initiate some CLI functionalities.
Custom components
To initiate building components in your application, use this command to initialize the component folder in your development environment:
$ bb components create [name of directory]
You can see all the possible commands for usage on components with the following command:
$ bb components help
With the output being:
Usage: bb components <create|build|serve|publish|help|generate|publish-bundle>
Options:
-h, --help output usage information
Commands:
create <path> create a new component set at the path
build [path] build the component set at a specific path, defaults to CWD
serve [path] serve the component set at a specific path, defaults to CWD
publish-bundle [options] [path] publish a bundle
publish [options] [path] publish the component set from a specific path, defaults to CWD
generate [name] generate a component with a given name
help [cmd] display help for [cmd]
For more information on creating a custom component visit this link [link]
Custom action steps/functions
To initiate building action steps in your application use this command to initialize the action step folder in your development environment:
$ bb functions init [identifier] –app
You can see all the possible commands for usage on components with the following command:
$ bb functions -h
With the output being:
Usage: bb functions <init|login|logout|new|build|publish|validate|bump|test>
Options:
-h, --help output usage information
Commands:
build build functions bundle file of the current working directory
bump increase the major/minor version of a specific function
init [identifier] initialize functions project
login login using the same credentials as the IDE
logout removes all tokens used to authenticate with the APIs
new [function-name] Initialize a new function
publish publish functions of the current working directory
validate validate functions of the current working directory
test test your functions within a local version of the ActionJS environment
help [cmd] display help for [cmd]
For more information on creating a custom action step visit this link [link]
Manage Blocks
Blocks are the items that you see when opening the Block Store, this is all uploaded from the CLI
To initiate a new block in your application use this command to initialize the block in your development environment:
$ bb blocks new [blocks-name]
You can see all the possible commands for usage on components with the following command:
$ bb blocks -h
With the output being:
Usage: bb blocks <publish|release|new>
Options:
-h, --help output usage information
Commands:
new [blocks-name] Initialize a new block
publish publish blocks of the current working directory
release release dev blocks
help [cmd] display help for [cmd]
Staying up-to-date
For your custom sets to continue working optimally it’s important to keep your environment up to date. Make sure to check your bb version by using the bb --version command and checking the latest version on the CLI wiki to make sure that it’s updated.
Use the update command to update your bb version if you would like to update:
$ npm update -g @betty-blocks/cli --no-optional