All Collections
Enablement toolkit
Setting up your pro-code environment
Setting up your pro-code environment

A starting point to get to know the ways of creating custom functionalities within the Betty Blocks platform.

Updated over a week ago

The pro-code environment extends the capabilities of the platform by offering pro-coders to add custom functionalities:

  • Creating your own actions steps

  • Creating custom components

  • Enabling remote data connections


Before you start working with the pro-code environment, let’s make sure you are aware of the requirements. The languages for creating pro-code steps:

  • Typescript

  • React

  • ES6 (Javascript)

We recommend you use Visual Studio Code as the code editor for creating your own custom steps and components.

Getting started

  1. Download the LTS (Long Term Supported) version of Node.js, this way you can access the Node Package Manager via your CLI (command line interface). The Node Package Manager will be used for installing and configuring the base sets provided by Betty Blocks to your code editor.

  2. Open the command line on your computer and install the Betty Blocks CLI on your computer:

    npm install -g @betty-blocks/cli --no-optional

    Note: if you want to install Betty Blocks with optional dependencies, see our CLI wiki)

  3. Check what version of the CLI is installed on your computer by typing this command:

    bb --version

  4. Navigate to the folder you want to develop in and start your development server, you can do this by running the 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 folder you are developing in and access the CLI from there. This allows you to directly cast bb commands from the folder you are developing in.

Use bb help to get a list of available commands.

bb help

A list of commands you can use in your terminal:

Usage: bb [options] [command]
-v, --version output the version number
-h, --help output usage information

components [cmd] manage your component sets
functions [cmd] manage your custom functions
interactions [cmd] manage your interactions
bundle [cmd] manage your vendor bundle
help [cmd] display help for [cmd]

Creating your own custom items

Custom components

In order to initiate building components in your application, use this command to initialize the component folder in your development environment:

bb components create [name of folder]

For more information on creating custom components visit this 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

For more information on creating action steps visit this link

Keeping up to date

For your custom sets to keep 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
Did this answer your question?