This chapter provides an overview of Codeflow designer, the Integrated Development Environment (IDE) for creating Codeflow projects.
Few features of the designer:
Dashboard with samples & templates to get started quickly.
Embedded Codeflow engine for executing flows without leaving the designer.
Integrated package manager for exploring and installing Codeflow packages.
Embedded debugger for real-time inspection of data flow and data.
NPM integration for managing native Node.js packages.
Visual schema builder.
Visual JSON editor.
Code editor for all other popular formats.
After opening, the Codeflow designer shows a dashboard screen as shown below:
The dashboard contains the following options and features:
Projects list - List of all projects created or opened with the designer. Click to open the project in a separate project window.
Buttons to create and open projects - Buttons to create or open Codeflow projects.
Samples list - A list of sample projects ready for cloning and use.
Settings page - Pages to sign in to Codeflow or view user profile if already signed in and other miscellaneous things.
Creating a project
Clicking the Create new button will show the create project dialog as shown below. Set a name and choose the location to place the project folder. Codeflow always creates a new folder with the given name. If you want to instead open an existing project choose the Add existing button.
Adding an existing project
Below animation shows how to open an existing project:
Removing a project
Below animation shows how to remove a project:
The project window looks like a typical IDE and contains a menubar, file tree, packages panel, editor for flows and other file types. Below is an annotated image that shows the project window with a flow file opened:
When a new project is created, there are only two files created, a
.codeflow as shown below:
package.json that holds information about project like name, description, dependent packages etc. The
package.json shares a similar structure with Node.js/NPM projects and Codeflow extends it additional properties.
.codeflow file is a meta file that stores recently opened files and other IDE related meta properties.
In Codeflow, there are no restrictions or conventions on folder structures or file naming. For any non-trivial app, it is recommended to keep the flows, schemas, and other assets in separate folders. For web apps, the views (html files) and other static assets (js, css) can also be placed in separate folders just like you would do in a typical project.
Creating and editing flows
To create a new flow, choose new from the file menu and choose flow. By default flow will have two steps - the
start and the
end, representing the entry and the exit points respectively. You can place any number of steps in between the
start and the
end. Steps are connected together by dragging a connection between them. The connections are called as transitions. For a more detailed insight into how flow works, please read the reference guide.
Executing & debugging flows
The designer comes with an integrated engine and debugger and can be used to execute and debug a flow without leaving the editor.
Run vs debug
Executing a flow can be done using either the 'run' mode or 'debug' mode. In run mode, the debugger is not attached but will be run slightly faster without the overhead of the Debugger. Use run mode if you want to test the performance that you would get while running the project in production.The debug mode starts the debugger which will allow you to visualize the data path, put breakpoints, step through modules and even parallel paths etc, all asynchronously.
The debugger in action.
Starting a single flow
To test a single flow simply click run or debug button and there will be a dialog box to enter input data, according to the input schema specified.
Starting the whole project
You can also start all the trigger flows in the entire project in one go. For that use the debug menu in the menubar and select Debug->Debug Project (or Debug->Run project).
The designer includes built-in package manager that can install and manage Codeflow packages. Once installed, the modules from installed packages can be used like any other standard package. The below animation shows installing a third-party package in just few clicks:
To uninstall a package, just click on the trash icon next to the package's header.
Codeflow designer makes it easy to publish your own package without leaving the designer. Custom packages are published and maintained through the designer using an easy to use wizard. It is explained in detail in the chapter - publishing packages.
Managing Node modules
Codeflow designer is integrated with NPM so to let you quickly install Node.js packages within the designer. Node.js packages installed can then be used directly from the flow.
Installing node modules
Sometimes you need to directly invoke a Node.js module from NPM. Codeflow has in-built support for searching, installing and managing NPM modules.
Managing node modules
You can also list and uninstall Node.js modules directly from the designer, as shown in the below video:
This chapter provided a high level overview of Codeflow designer and its basic working. The designer can be considered as a regular IDE that is also capable of creating and editing flows as well as most other file formats.