custom noflo components not getting loaded

[Santosh Kumar]

Hi,

I have been reading the noflo manual and trying to create a simple graph in my react application.  I am currently facing issue in loading custom component. 

Currently I am creating two components one generator and another regular. The generator component is copy of generator component provided in the noflo documentation. The second component is a simple one which will emit a number 2 if generator 'out' is 'true' else it will emit 4.

I am getting following error:

bundle.js:6185 Uncaught Error: Component genComp not available with base /

    at ComponentLoader.load (bundle.js:6185)

I have no idea how components are to be loaded and to be used with noflo. Obviously it is not as simple as importing the '.js' file. Please guide me to do it in the right way.

Currently I am doing following:

1. Create seperate '.js' file for the components---- calc-component.js and generator-component.js--------I am keeping those in the __dirname of webpack.config.js
   
   
2. Import them in react component
   
   
3. Create noflo graph
   
   
4. create webpack entry for baseDir,  baseDir: __dirname -----I have no idea what is its role in noflo?
   
   
5. npm run build

My code is following:

import calcComp from '../../calc-component';

import genComp from '../../generator-component';

var graph = noflo.graph.createGraph('testgraph');

graph.addNode('Gen Node','genComp');

graph.addNode('Calc Node','calcComp');

graph.addEdge('Gen Node','out','Calc Node','in')

noflo.createNetwork(graph)

I will greatly appreciate any help.

Thanks,

Santosh.

[Henri Bergius]

Hi,

On Thu, 9 Nov 2017, 04:42 Santosh Kumar, <lsantos...@gmail.com> wrote:

I have no idea how components are to be loaded and to be used with noflo. Obviously it is not as simple as importing the '.js' file. Please guide me to do it in the right way.

NoFlo uses the "fbp-manifest" tool to discover components available in the system. For components in your project, they're discovered from the "components/" folder in your project root:

https://noflojs.org/publishing/#module-structure

By default the filename is used as the component name, so "components/Foo.js" becomes "projectname/Foo".

If you have .json or .fbp files in your "graphs/" folder, they'll also become available as components.

I'll update the component docs to mention this as well.

import calcComp from '../../calc-component';

import genComp from '../../generator-component';

Once your components are in the right paths, requiring them manually won't be necessary since NoFlo already knows how to load them. Just add a graph node using the correct component name.

If you want to use a different filesystem structure for your project, then one option is using the "custom component loaders" feature. But this is usually only needed for components generated from information available at runtime, like we do in libraries like noflo-polymer (where we have a way of making WebComponents available as NoFlo components).

Santosh.

/Henri

[Santosh Kumar]

Thanks a lot. It is a lifesaver.

Santosh.

--
You received this message because you are subscribed to a topic in the Google Groups "Flow Based Programming" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/flow-based-programming/IrM8gl7vcnE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to flow-based-programming+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.