{"id":13556096,"url":"https://github.com/noflo/noflo-ui","last_synced_at":"2025-05-16T13:08:03.238Z","repository":{"id":824466,"uuid":"12892263","full_name":"noflo/noflo-ui","owner":"noflo","description":"NoFlo Development Environment","archived":false,"fork":false,"pushed_at":"2024-01-12T20:47:46.000Z","size":57416,"stargazers_count":772,"open_issues_count":135,"forks_count":174,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-09T08:06:42.862Z","etag":null,"topics":["fbp","flowhub","ide","noflo","web"],"latest_commit_sha":null,"homepage":"https://app.flowhub.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noflo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-09-17T10:15:18.000Z","updated_at":"2025-02-14T15:51:33.000Z","dependencies_parsed_at":"2024-01-14T20:17:09.747Z","dependency_job_id":"a789e46c-8dc3-4bca-be82-0e6d90c8a0d0","html_url":"https://github.com/noflo/noflo-ui","commit_stats":{"total_commits":2854,"total_committers":24,"mean_commits":"118.91666666666667","dds":"0.26559215136650316","last_synced_commit":"22d26eca71b52cd5181dd253f76bdb13c6bfecd4"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noflo%2Fnoflo-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noflo%2Fnoflo-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noflo%2Fnoflo-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noflo%2Fnoflo-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noflo","download_url":"https://codeload.github.com/noflo/noflo-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535829,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fbp","flowhub","ide","noflo","web"],"created_at":"2024-08-01T12:03:37.418Z","updated_at":"2025-05-16T13:08:03.217Z","avatar_url":"https://github.com/noflo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","web"],"sub_categories":[],"readme":"# NoFlo Development Environment\n\nThe NoFlo Development Environment is an offline-capable, client-side web application\nthat helps users to build and run flow-based programs built with FBP compatible systems such as [NoFlo](http://noflojs.org/),\n[MsgFlo](https://msgflo.org), [imgflo](https://imgflo.org) and [MicroFlo](https://microflo.org).\nThe NoFlo Development Environment is available under the [MIT license](https://github.com/noflo/noflo-ui/blob/master/LICENSE-MIT).\n\nThis project was made possible by [1205 Kickstarter backers](http://noflojs.org/kickstarter/).\nCheck the [project ChangeLog](https://github.com/noflo/noflo-ui/blob/master/CHANGES.md) for new features and other changes.\n\n## Hosted version\n\n[Flowhub](https://app.flowhub.io) is a hosted version of the NoFlo Development Environment.\n\nIf you just want to create applications, we recommend that you use this version instead of building your own from source.\n\n\u003ca href=\"https://app.flowhub.io\"\u003e\u003cimg alt=\"Start Flowhub webapp\" src=\"https://flowhub.io/assets/app-web.svg\" width=\"400\"\u003e\u003c/a\u003e\n\n## Usage with different FBP systems\n\nEven though the UI itself is built with NoFlo, it isn't talking directly with NoFlo for running and building graphs.\nInstead, it is utilizing the [FBP Network Protocol](https://flowbased.github.io/fbp-protocol/) which enables it to talk to *any* compatible FBP system.\nCurrently over 5 different runtimes are known to work.\n\nBy implementing the protocol in your runtime, you can program it with NoFlo UI.\nIf you use WebSockets or WebRTC as the transport, you do not need to change anything on NoFlo UI.\nYou can also [add support other transports](https://github.com/flowbased/fbp-protocol-client).\n\n### Registering runtime for a user\n\nThe easiest way to pass user the connection information of your runtime is through the _live mode_. With this, the connection details are passed to the app via URL parameters, like this:\n\n```\nhttp://app.flowhub.io#runtime/endpoint?protocol%3Dwebsocket%26address%3Dws%3A%2F%2F127.0.0.1%3A3569\n```\n\nThe supported parameters for the endpoint include:\n\n* `protocol`: the FBP protocol transport to use for the connection. Possible values include `websocket`, `iframe`, and `webrtc`\n* `address`: URL to use for the connection. Can be for instance `ws://` URL for WebSockets, or the signaller URL and connection identifier for WebRTC\n* `secret`: secret to use for communicating with the runtime\n\nThese URLs can be shown on command line output, or provided to user via other mechanism. See a [video demonstration](https://youtu.be/EdgeSDFd9p0) of opening the app in live mode via a NFC tag.\n\n### Adding new runtime information\n\nOne can *optionally* add component templates, syntax highlighting and a 'get started' link for new runtimes.\n\n1. Add a new YAML file with runtime info as `./runtimeinfo/myruntime.yaml`. [Example](./runtimeinfo/msgflo.yaml)\n2. Include it in [./runtimeinfo/index.js](./runtimeinfo/index.js)\n3. Commit the changes\n4. Send a [Pull Request](https://github.com/noflo/noflo-ui/pull/new/master), so everyone benefits!\n\n## Development of NoFlo UI\n\nOnly necessary if you want to hack on NoFlo UI itself. Not neccesary for making apps with FBP.\n\n### Via Docker\nA Dockerfile has been provided that can be used to easily build/run the NoFlo UI. You can also get an automatically built image [from Docker Hub](https://hub.docker.com/r/flowhub/noflo-ui/).\n\n#### Build\n```bash\ndocker build -t noflo-ui .\n```\n\n#### Run\n```bash\ndocker run -d -p 9999:80 noflo-ui\n```\n\nOnce it is built and the server is running you can access the UI at http://localhost:9999/index.html\n\n### Directly\n\nTo be able to work on the NoFlo UI you need:\n\n* A checkout of this repository\n* A working [Node.js](http://nodejs.org/) installation\n* At least version 3 of the NPM package manager\n\nGo to the checkout folder and run:\n\n    $ npm install\n\nThis will provide you with all the needed development dependencies. Now you can build a new version by running:\n\n    $ npm run build\n\nYou have to run this command as an administrator on Windows.\n\nServe the UI using a webserver, then open the URL it in a web browser. Example:\n\n    $ npm start\n\nIf you prefer, you can instead start a webpack dev server process that will do a rebuild whenever one of the files changes:\n\n    $ npm run dev\n\nOnce it is built and the server is running you can access the UI at `http://localhost:9999/index.html`\n\nIn addition to this project, the other repository of interest is the [the-graph](https://github.com/flowhub/the-graph) graph editor widget used for editing flows.\n\n\n### Architecture\n\nOn high level, the noflo-ui architecture follows [Redux](http://redux.js.org/) conventions adapted to NoFlo. Here is how the main data flow looks like:\n\n```fbp\nStore OUT -\u003e IN Middleware     # Store sends actions together with application state to middleware\nMiddleware NEW -\u003e ACTION Store # Middleware can trigger new actions\nMiddleware PASS -\u003e IN Reduce   # Actions go from middleware to reducers\nReduce OUT -\u003e STATE Store      # Reducers produce a new state object that gets sent to store\nReduce OUT -\u003e STATE View       # State also goes to the view\nView ACTION -\u003e ACTION Store    # View can trigger actions\n```\n\nThe actual flow is more detailed. You can view and edit it in `graphs/main.fbp`.\n\n**Note:** the priciples outlined below are the architecture we're aiming towards. We're refactoring parts of the system to fit this architecture as we modify them. All new functionality should be implemented following this architecture.\n\n#### Store\n\nThe Store component keeps track of the latest application state. When it receives new actions, it sends the out to the middleware and reducer chain together with the latest application state.\n\n#### Middleware\n\nnoflo-ui middleware are components or graphs that can interact with particular actions. Each action passes through the chain of middlewares, and each middleware has two options on dealing with an action:\n\n1. Pass the action along without modifying it\n2. Capture the action and trigger new action(s)\n\nMiddleware are where side effects related to the application state are handled. This can include talking to external web services, FBP runtime communications, and loading or saving data to the local IndexedDB. Middleware do receive the current application state and can read from it, but they only manipulate state by the way of creating new actions.\n\nSome middleware can also act as [generators](http://bergie.iki.fi/blog/noflo-process-api/#generator-components), creating new actions based on external input.\n\nThe middleware approach is explained further in [this blog post](http://bergie.iki.fi/blog/redux-middleware-noflo/).\n\n#### Reducers\n\nThe job of the reducers is to receive actions and make changes to application state. The reducers must in effect be pure functions, where the same input state and action combination always produces the same new state.\n\n#### View\n\nThe application's view layer is implemented as [Polymer](https://www.polymer-project.org/) elements. The application view receives the state object produced by the reducers.\n\nUser interactions in the application view must not make direct state changes. Instead, the application view can trigger new actions by firing Polymer events. These then get processed by the middleware and reducers, causing the state to change.\n\n## Authentication and custom URLs\n\nNoFlo 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](https://github.com/settings/applications/new) with them. Make sure to match GitHub's [redirect URL policy](https://developer.github.com/v3/oauth/#redirect-urls).\n\nTo enable your own OAuth application, set the following environment variables and rebuild NoFlo UI:\n\n* `$NOFLO_OAUTH_CLIENT_ID`: Client ID of your GitHub OAuth application\n* `$NOFLO_OAUTH_CLIENT_REDIRECT`: Redirect URL of your GitHub OAuth application\n\n### OAuth secrets\n\nFor handling the OAuth Client Secret part of the login process, there are two options:\n\n#### Built-in OAuth secret\n\nThis 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.\n\n**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.\n\n#### Gatekeeper\n\nYou can deploy an instance of the [Gatekeeper Node.js app](https://github.com/prose/gatekeeper) to handle the OAuth token exchange for you. Configure the Gatekeeper location to your NoFlo UI build with `$NOFLO_OAUTH_GATE` environment variable.\n\nThis is the more secure mechanism, since only the Gatekeeper server needs to know the Client Secret.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoflo%2Fnoflo-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoflo%2Fnoflo-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoflo%2Fnoflo-ui/lists"}