HTML CoffeeScript CSS JavaScript
Latest commit aa7b5e1 Feb 23, 2017 @bergie bergie committed on GitHub Merge pull request #677 from noflo/greenkeeper/syn-0.4.0
Update syn to the latest version 🚀
Failed to load latest commit information.
app fbp-spec: Fix dependency missing Feb 19, 2017
components Use proper URL parser here too Feb 17, 2017
css Make the loading indicator work again Jan 19, 2017
elements Disable HTTPS banner until runtime connection issues have been sorted… Feb 16, 2017
graphs Fix URL cleanup after login Feb 17, 2017
runtimeinfo Include the actual runtime name in label Feb 16, 2017
spec Add a variant of the test without state flag in URL Feb 17, 2017
src Disable undo/redo when there are no journal entries in that direction… May 2, 2014
.gitignore Move end-to-end tests to a subdirectory Jan 24, 2017
.travis.yml Run cross-browser tests on Travis Jan 20, 2017 CHANGES: Mention fbp-spec fix and npm start command Feb 20, 2017 Allow separate OAuth config for SSL version of the app as well Feb 16, 2017
LICENSE-MIT Spelling fix Jun 3, 2014 CHANGES: Mention fbp-spec fix and npm start command Feb 20, 2017
bower.json the-graph: Update to 0.6.x, more NPM-installable Jan 5, 2017
config.dist.xml Make version number in built apps customizable Mar 7, 2014
examples.json the-graph snapped clock example Nov 30, 2013
index.dist.html Better color scheme Feb 16, 2017
manifest.dist.json Allow access to for token exchange Feb 16, 2017
manifest.dist.webapp.json We should have both name and short_name Feb 16, 2017
noflo.ico We need string replacement to make build more configurable Mar 6, 2014
package.json Merge pull request #677 from noflo/greenkeeper/syn-0.4.0 Feb 23, 2017

NoFlo Development Environment Build Status

The NoFlo Development Environment is an offline-capable, client-side web application that helps users to build and run flow-based programs built with FBP compatible systems such as NoFlo, imgflo and MicroFlo. The NoFlo Development Environment is available under the MIT license.

This project was made possible by 1205 Kickstarter backers. Check the project ChangeLog for new features and other changes.

Hosted version

Flowhub is a hosted and commercially supported version of the NoFlo Development Environment. It is free to use for open source projects, and for private projects if you do not need Github integration.

If you just want to create applications, we recommend that you use this version instead of building your own from source.

Start Flowhub webapp Install Chrome app

Please read more from See also the available support channels.

FBP systems support

Even though the UI itself is built with NoFlo, it isn't talking directly with NoFlo for running and building graphs. Instead, it is utilizing the FBP Network Protocol which enables it to talk to any compatible FBP system. Currently over 5 different runtimes are known to work.

By implementing the protocol in your runtime, you can program it with NoFlo UI. If you use WebSockets or WebRTC as the transport, you do not need to change anything on NoFlo UI. You can also add support other transports.

Adding new runtime information

One can optionally add component templates, syntax highlighting and a 'get started' link for new runtimes.

  1. Add a new YAML file with runtime info as ./runtimeinfo/myruntime.yaml. Example
  2. Include it in ./runtimeinfo/
  3. Commit the changes
  4. Send a Pull Request, so everyone benefits!

Development of NoFlo UI

Only necessary if you want to hack on NoFlo UI itself. Not neccesary for making apps with FBP.

To be able to work on the NoFlo UI you need:

  • A checkout of this repository
  • A working Node.js installation
  • At least version 3 of the NPM package manager

Go to the checkout folder and run:

$ npm install

You also need the Grunt build tool:

$ sudo npm install -g grunt-cli

This will provide you with all the needed development dependencies. Now you can build a new version by running:

$ grunt build

You have to run this command as an administrator on Windows.

If you prefer, you can also start a watcher process that will do a rebuild whenever one of the files changes:

$ grunt watch

Serve the UI using a webserver, then open the URL it in a web browser. Example:

$ npm start

Once it is built and the server is running you can access the UI at http://localhost:9999/index.html

In addition to this project, the other repository of interest is the the-graph graph editor widget used for editing flows.

Authentication and custom URLs

NoFlo UI is using GitHub for authentication. We have a default application configured to work at http://localhost:9999. If you want to serve your NoFlo UI from a different URL, you need to register your own OAuth application with them. Make sure to match GitHub's redirect URL policy.

To enable your own OAuth application, set the following environment variables and rebuild NoFlo UI:

  • $NOFLO_OAUTH_CLIENT_ID: Client ID of your GitHub OAuth application
  • $NOFLO_OAUTH_CLIENT_REDIRECT: Redirect URL of your GitHub OAuth application

OAuth secrets

For handling the OAuth Client Secret part of the login process, there are two options:

Built-in OAuth secret

This is the easy option for local NoFlo UI development. Simply build the OAuth client secret into the NoFlo UI app by setting it via the $NOFLO_OAUTH_CLIENT_SECRET environment variable.

Note: this means anybody with access to this NoFlo UI build will be able to read your client secret. Never do this with a world-accessible URL. It is fine for local-only development builds, though.


You can deploy an instance of the Gatekeeper Node.js app to handle the OAuth token exchange for you. Configure the Gatekeeper location to your NoFlo UI build with $NOFLO_OAUTH_GATE environment variable.

This is the more secure mechanism, since only the Gatekeeper server needs to know the Client Secret.