Skip to content

Latest commit

 

History

History

typescript-react

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

NodeJS WebApi Client

Introduction

React is a popular JavaScript runtime environment that is used for single page (SPA) web application development.

After installing react and , the sample can be built with following commands:

cd .\measurements
npm run build

cd ..\client\
npm link ..\measurements

After building, the sample can be run with following command:

npm run dev

Then navigate to http://localhost:5173/ and click the "Run" button.

Visual Studio Code can be used to edit and debug the sample.

OPC UA WebApi

The client uses stubs autogenerated with the OpenAPI Generator. The stubs for TypeScript are published in the GitHub respository. The GitHub stubs have been fixed up to allow for ES6 and CommonJS exports and incorporate the NodeId and BrowseName constants. The repository is a submodule for reference. The sample downloads the package from GitHub when it builds.

Custom Information Models

The Server defines a custom Information Model described by a NodeSet.

A client that wishes to use these custom information models needs definitions for NodeIds and BrowseNames defined by the model. The UA ModelCompiler takes a NodeSet as input and produces the constant declarations in different programming languages.

The TypeScript declarations for the Measurements information model have been prebuilt here. Instructions on building the constants can be found here.

A client that needs to consume structure defined in a custom information model needs to generate classes from the NodeSet. The OpenAPI Generator a widely used tool that normally is used to generate code for REST APIs, however, the classes can be reused for other purposes. For that reason UA ModelCompiler also generates an OpenAPI definition from the NodeSet.

The script creates a TypeScript project that the Node.js application can import to get the JavaScript classes for the DataTypes defined in the NodeSet.