Setting up your pro-code environment

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

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