Search code examples
angularwebpackgruntjsnoflo

Noflo: Steps to run inside browser when frontend is Angular 4 CLI

I am trying to run noflo in browser, with a twist that it will be an Angular App. Noflo documentation mentions following:

NoFlo projects can also run in web browsers. You can use the webpack tool create a browser-runnable build of a NoFlo project.

In nutshell, making a browser build of a NoFlo project involves the following steps:

Find all installed browser-compatible components using the fbp-manifest tool

Generate a custom NoFlo component loader that requires all the component files and registers them for NoFlo to load

Configure and run webpack with the application entry point, replacing NoFlo’s standard component loader with the generated custom one

To automate these steps we have grunt-noflo-browser, a plugin for the Grunt task runner that we use for build automation.

I have doubts regarding shortest and least painful path to take for this task:

Option 1:

I am using Angular CLI. Webpack comes integrated with angular cli which can be moved to webpack based configuration by using "ng eject" command, and then I can use Grunt task runner to set it up. I have never before used Grunt. I have no idea how will it work out. Another headache that thereafter I will have to manage webpack configurations going further into development.

Option 2:

Same as above but do everything manually. Removes the headache of going Grunt path. Creates new questions and complexities about how to use fbp-manifest tool and how to generate custom NoFlo Component loader. Also maintaining webpack configurations is an added task going further into development.

Option 3:

If any other path exists specific to Angular CLI

I will be integrating Noflo and customizing it heavily for my application. My nodes will be new as well as there will be no server running and I will have my own system of pushing IP. The idea is to integrate Noflo and Noflo UI, reuse as much as possible and develop the rest.

I will appreciate any advice regarding this.

Thanks

Solution

  • The issue is primarily that we need to generate a statically configured NoFlo component loader for browsers, since they can't discover available components from the file system.

    This functionality used to be strongly coupled with the grunt-noflo-browser module.

    However, as of today, it should be possible to build NoFlo as part of any existing WebPack setup using the noflo-component-loader WebPack plugin. Add something like the following to your WebPack module.rules:

    {
  // Replace NoFlo's dynamic loader with a generated one
  test: /noflo\/lib\/loader\/register.js$/,
  use: [
    {
      loader: 'noflo-component-loader',
      options: {
        // Only include components used by this graph
        // Set to NULL if you want all installed components
        graph: 'myproject/GraphName',
        // Whether to include the original component sources
        // in the build
        debug: false,
      },
    },
  ],
},