Hi there,

I'm Kenneth and I'm trying to create a Media Central Cloud UX plug-in as a react app. I found this plug-in example that uses react on the AVID github page. Unfortunately I cannot run the plug-in locally as npm is unable to properly install node-sass which is deprecated. Is it possible to use react for plug-in developement and how do I do this?

Hi Kenneth,

I've built my own setup to avoid the outdated toolchain and give me more control over the configuration. YMMV but maybe this is helpful:

https://github.com/tilmans/cloudux-simple-app

And to build installable packages:

https://github.com/tilmans/custom_cloudux_build

I don't work for Avid and all of this code could break at any time but maybe it will help you to get a working setup. It works for me :)

Very cool, the ability to use babel/core 7+ for starters is definitely a big want, thanks for sharing! Can't use this yet since it's not official but I'm interested in knowing how hard it would be to setup a custom project. Also what are the disadvantages? 

The obvious disadvantages are missing support when something does not work. There is not a lot of documentation/specification on how CloudUX loads plugins etc and Avid won't support you if you move away from the official tooling. So unless you are willing to invest the time to dig into issues I would not do it. For me personally it made sense because it saved me so much time during development and testing and I'm comfortable debugging the CloudUX system.

Hi Kenneth,

You can use the CloudUX starter kit to generate a sample react project see https://www.npmjs.com/package/cloudux-starter-kit

The Trello example is currently outdated and we are looking to publish a replacement react example in the future.

Please let us know if there is anything specific you're interested in.

Thanks

Hi Vadym,

trying to create a CloudUX plugin following instructions at http://developer.avid.com/mcux_ui_plugin/introduction/doc/development_npmjs/development_npmjs.html results in a crash (see below).

In addition the webpack config is at node_modules/cloudux-starter-kit/lib/connector/config/webpack.common.config.js which makes it very hard to customize the webpack build.

npm start:

...

> node --inspect scripts/start.js

Debugger listening on ws://127.0.0.1:9229/cad92d4b-2762-4e96-8727-66901a60783e
For help, see: https://nodejs.org/en/docs/inspector

<--- Last few GCs --->

[44728:0x150008000]      192 ms: Scavenge 12.1 (17.4) -> 9.9 (18.5) MB, 0.5 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure
[44728:0x150008000]      209 ms: Scavenge 13.6 (19.0) -> 12.6 (28.2) MB, 0.6 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure
[44728:0x150008000]      288 ms: Scavenge 21.1 (30.0) -> 17.0 (32.3) MB, 0.6 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x000106c808d1 <JSObject>
    0: builtin exit frame: new constructor(aka Module)(this=0x00010789d829 <Object map = 0x108c381f9>,0x00010789d6d9 <Uint8Array map = 0x106c42b99>,0x00010789d829 <Object map = 0x108c381f9>)

    1: ConstructFrame [pc: 0x104d95df8]
    2: StubFrame [pc: 0x104e7e8a4]
    3: /* anonymous */ [0x10789cf69] [/Users/tilman/Downloads/test/test-plugin/node_modules/@xtuc/long/src/long.js:9] [bytecode=0x1...

FATAL ERROR: wasm code commit Allocation failed - process out of memory
 1: 0x104755ccc node::Abort() [/opt/homebrew/Cellar/node@12/12.22.7/bin/node]
 2: 0x104755e3c node::OnFatalError(char const*, char const*) [/opt/homebrew/Cellar/node@12/12.22.7/bin/node]
 3: 0x10485a7e0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/opt/homebrew/Cellar/node@12/12.22.7/bin/node]
 4: 0x10485a774 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/opt/homebrew/Cellar/node@12/12.22.7/bin/node]
 5: 0x104c89f4c v8::internal::wasm::WasmCodeAllocator::AllocateForCodeInRegion(v8::internal::wasm::NativeModule*, unsigned long, v8::base::AddressRegion) [/opt/homebrew/Cellar/node@12/12.22.7/bin/node]

...

There seems to be a dependency conflict between [email protected] and eslint-config-react-app@"2.1.0". What's the best way to resolve this? 

Hi Vadym, 

Posted a reply about a dependency conflict I encounted, it's pending approval. I got through that using the npm --force option. Ran the project cloudux-starter-kit created and it looks like it works thanks . 

Hi Kenneth,

We have released the updated version of starter kit which resolved the dependencies conflict. Could you give it a try please and let us know if it works for you. https://www.npmjs.com/package/cloudux-starter-kit

Thanks

Yup looks like it works. On another note, is it possible to use typescript in the react app created by cloudux starter kit?