My take on this question is that yes you can upload these packages to the Client Builder and use them but there is a but.

Vantiq’s client builder is essentially a standard web server like Apache or nGinx. It will not be able to run NodeJS code, so your .js files need to be compatible with a regular web server.

There are a couple ways you can do this. The easiest method is to go into the client builder and add the URL or uploaded docs reference as a Custom Asset:

https://internal.vantiq.com/docs/system/cbuser/index.html#custom-assets

If there are a lot of files it is possible to use “require” and reference a remote URL that points to the base of a script directory and the the relative dir/filenames in the require code but this will not work with Vantiq documents.

See ESRI example: https://developers.arcgis.com/javascript/latest/display-a-map/#add-modules

If you wanted to run node apps with Vantiq you can do this by running a separate node server, and I have an example here that uses the Vantiq nodejs-sdk.

https://github.com/pburma/vantiqexamples/tree/master/htdocs/NodeJS_example

And the last tidbit I’ll mention is that you can upload a Vantiq document as a public document by adding public prefix to the filename when you upload the file:

https://internal.vantiq.com/docs/system/cbuser/index.html#accessing-documents

This would let you run standard HTML on Vantiq but from outside the Client Builder as shown in this Gatsby example:

https://internal.vantiq.com/ui/docs/NS/pb_firstNS/index.html

Hi Patrick,

Thanks for your reply. I didn’t realize you can also add a Custom Assets by URL, saves uploading to the Documents. I tried using requirejs but the package isn’t an AMD module so I got an error when the Client launched. We’re now looking into a way of creating a ES5 version of the library so we only have to upload or reference one file. We need authentication for our Client Apps so public documents are not an option. The Node.JS SDK however seems a viable option but then I lose the low-code advantages of the Client Builder.

Kind regards,

Leandros

RequireJS should be already available. When we tested it with that ESRI example we just copy and pasted the script code pretty much into the On Start function and it worked (we first added that ESRI script root dir to javascript custom assets). Feel free to post the error and we can try to do some troubleshooting, you shouldn’t have to create an ES5 version of the library unless its for browser compatibility, ES6 is supported in Vantiq as of 1.30:

https://internal.vantiq.com/docs/system/releasenotes/index.html#client-builder_3

Hi Patrick,

If added this line to Client_onStart:

require([“docs/mylib.esm.js”], function(mylib){});

When I launch the client I get error “require is not defined”.

After adding requirejs as custom asset I get 401 Unauthorized for request https://dev.vantiq.com/docs/mylib.esm.js

I added getDocumentUrl to get the URL with access_token:

require([client.getDocumentUrl(“docs/mylib.esm.js”)], function(mylib){});

Then I get a SyntaxError with Message “import declarations may only appear at top level of a module”. This is because the script gets inserted with type=”text/javascript” but needs to be inserted with type=”module”.

I ques this library just isn’t meant to be used with the Client Builder. No worries, if spend enough time on it now and am going to leave it at that. Thanks for your help.

Kind Regards,

Leandros

Ignoring the “require” issue for a moment, it is possible to load those js files as modules. This is perhaps not the best way to do things but something like this should work in your On Start function:

var js1 = client.getDocumentUrl(“js/spinner/main.37a49f446d681eeb.js”);
var js2 = client.getDocumentUrl(“js/spinner/polyfills.404f052401b84023.js”);
var js3 = client.getDocumentUrl(“js/spinner/runtime.bccb4d0cf34bf784.js”);
$(“#spinner”).last().after(“<script type=’module’ src='” + js1 + “‘>”);
$(“#spinner”).last().after(“<script type=’module’ src='” + js2 + “‘>”);
$(“#spinner”).last().after(“<script type=’module’ src='” + js3 + “‘>”);

The JQuery statement will add this script tag after the div indicated which works ok in my simple spinner/animate example which I based on this example:

https://material.angular.io/components/progress-spinner/overview

Probably there is a better way to do this, but this is a hastily thrown together example where I downloaded the spinner project, did a “ng build” and uploaded a css files then the three js files to vantiq docs and added the js script tags as modules this way, and added the angular tags via html widget and all seems to work ok.

The JQuery approach works for the first module but that module loads other modules. The requests for those modules result in an authentication failure because the namespace and token are not appended to the request. I tried including all the modules with JQuery but that didn’t work. As a last resort, I uploaded all the files again with the public prefix, like you mentioned in your first response, and that worked. I’m able to display some of the components in the library in a HTML widget. I’m going to explore if the library is of any real use.