Setting up your low-code environment

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

1. 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.
   
   On some operating systems you need a different version of node. For managing your node versions, we recommend using NVM. You can see what version(s) you need here:
   
   

   OS	Custom Components	Custom Actions	NVM
   Windows	18.20.8	18.20.8	NVM windows
   MacOS	16.20.2	18.20.8	NVM
   Linux	16.20.2	18.20.8	NVM

    

2. 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)
   
   
3. Check if and which version of the CLI is installed on your computer by typing this command:
   
   bb –version 
   
   
4. Navigate to the directory you want to develop in.
   
   cd <directory-name>
   
   
5. 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:

bb [options] [command]

Betty Blocks CLI

Options:

  -v, --version       output the version number

bb --version

  -h, --help          output usage information

bb --help

Commands:

components [command]    manage your component sets

blocks [command]        manage your blocks

functions [command]     manage your custom functions

interactions [command]   manage your interactions

bundle [command]        manage your vendor bundle

help [command]          display help for [command]

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 -h

With the output being:

Usage: bb components <create|build|serve|publish|help|generate|publish-bundle>

Options:

  -h, --help                       output usage information

bb --help components

Commands:

bb components create [path]  Create a new component set at the path

bb components build [path]   Build the component set at a specific path, defaults to            CWD

bb components serve [path]  Serve the component set at a specific path, defaults to            CWD

bb components publish-bundle [options] [path]  Publish a bundle

bb components publish [options] [path]  Publish the component set from a specific        path, defaults to CWD

bb components generate [name]  generate a component with a given name

bb help [command]  display help for [command]

For more information on creating a custom component visit this article

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:

bb functions build    Build functions bundle file of the current working directory

bb functions bump  increase the major/minor version of a specific function

bb functions init [identifier]  Initialize functions project

bb functions login  Login using the same credentials as the IDE

bb functions logout  Removes all tokens used to authenticate with the APIs

bb functions new [function-name]  Initialize a new function

bb functions publish  Publish functions of the current working directory

bb functions validate  Validate functions of the current working directory

bb functions test  Test your functions within a local version of the ActionJS                          environment

bb help [command]           display help for [command]

For more information on creating a custom action step  visit this article

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:

bb blocks new [blocks-name]  Initialize a new block

bb blocks publish  Publish blocks of the current working directory

bb blocks release  Release dev blocks

bb help [command]         Display help for [command]

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