Skip to content

Instantly share code, notes, and snippets.

@JamesHagerman
Last active April 8, 2016 22:09
Show Gist options
  • Save JamesHagerman/065a0045376d80e64328996378dbb977 to your computer and use it in GitHub Desktop.
Save JamesHagerman/065a0045376d80e64328996378dbb977 to your computer and use it in GitHub Desktop.
Setting up noflo webapp and runtime

Noflo with a front end UI component builder

You'll need two repos running for this to work. The webapp, and the noflo runtime.

And you'll need to do some wonky config as well...

NOTE: To complete this, you'll need access to GitHub for some reason! Otherwise
you will not be able to log in to the web app and manually add your runtime's 
websocket address and secret!!!

This means: They call this thing an "offline service" but it depends on github!

Repo needed for the webbased UI

The web based ui (horribly named Noflo for the free version and flowhub for the commercial version) is actually just a web app. The repo is:

https://github.com/noflo/noflo-ui

Once you git clone that repo, run grunt build and then use something like npm simple-server to host a web server pointing at - believe it or not - the root of the git repo. So:

git clone https://github.com/noflo/noflo-ui
cd noflo-ui
npm install
grunt build

Once that's done, start hosting the webapp using something like:

sudo npm install simple-server -g
simple_server . 3005

Repo needed for the actual noflo runtime

To actually USE that server withOUT using Flowhub's hosted services, you'll need to have a noflo runtime running on your local box. This is not explained very well... but basically, you need to build a Node.js project locally.

The tool you need to build this runtime is:

https://github.com/noflo/noflo-nodejs

And, actually, that depends on:

https://github.com/noflo/noflo

Building a runtime

So, here's the instructions to build the runtime you'll need to STOP using the hosted services of Flowhub. Basically, all these are called out in the noflo-nodejs README.md but whatever...

Create a node.js project:

mkdir my-noflo-runtime
cd my-noflo-runtime
npm init

You'll have to go through and answer npm's questions here...

npm install noflo noflo-nodejs --save

And now you'll need to also chose what components you want. noflo-core is pretty important, but there are a bunch of others in npm at this location https://www.npmjs.com/browse/depended/noflo

So, install your components using npm:

npm install noflo-core --save

Initialize the runtime's config

I used the following. This puts a config for the runtime into flowhub.json

node node_modules/.bin/noflo-nodejs-init --host autodetect --port 3569 --label "my-runtime"

Actually start the runtime:

Now that everything has been configured, you can actually start the runtime:

node node_modules/.bin/noflo-nodejs --register=false

That --register=false basically says "ignore flowhub's hosted services"

Logging in to the web app

Once you've got both the web app and runtime up and running, you'll need to open up a browser and point it at your webapp. That's probably something like:

http://localhost:3005/index.html

NOTE: You will NEED the index.html because of the way the webapps grunt build
just tosses everything into the repo's root instead of a separate directory

After that, you'll need to log in at the top of the page using your GitHub credentials.

Registering your Runtime with the web app

Once you're logged in, you'll ne able to scroll down to the Runtimes section on the homepage and click the Register button to register a new runtime.

Once the Register a new runtime window pops up, ignore pretty much the entire thing and click the Add manually button at the bottom.

In the next window, PUT IN THE INFORMATION FROM YOUR RUNTIMES CONFIG FILE!!! Remember, that config is stored in flowhub.json

NOTE: It is important to match the IP, Port, and Secret exactly. You might as 
well match the `Runtime name` with the label in your config as well so you can 
figure out what runtime you're using later on...

Configuring your Project to use the registered Runtime

Once you've registered your runtime in the web app, you can either create a new project or open one of your existing projects. There are two places you need to set the project settings.

Setting Project Type

In the top LEFT of the project view, there is a little gear next to your project name. Click that, and under Type, you'll want to select Node.js. Any others and you're runtime will not be used correctly.

Selecting Runtime

In the top RIGHT of the project view, there are two little arrows pointing past each other. Click that, and then click Select runtime. You should now be able to select your Runtime from the list. Make sure that the one you select has something like WS:// under it.

The End

And that should be it! You should be able to use the core/Output component now and send some data to console.log...

NOTE: core/Output actually spits to the RUNTIME's Console.log(), NOT your 
browsers JS console!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment