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
Pre-requirements
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
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.
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)Check what version of the CLI is installed on your computer by typing this command:
bb --version
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]
Options:
-v, --version output the version number
-h, --help output usage information
Commands:
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