Initialization

You initialize the ux4iot React library by wrapping your components with a Ux4iotContext
1
import {Ux4iotContext} from "ux4iot-react";
2
...
3
function App() {
4
  return (
5
    <div className="App">
6
      <Ux4iotContext.Provider 
7
          options={options}
8
      >
9
          <MyView />
10
      </Ux4iotContext.Provider>
11
    </div>
12
  );
13
}
Copied!
There are two modes of operations for the library: Development mode and production mode. The initialization differs between the two modes.
Development Mode
1
const UX4IOT_ADMIN_CONNECTION_STRING = "Endpoint=...SharedAccessKey=...";
2
​
3
const devOptions: InitializeDevOptions = {
4
   adminConnectionString: UX4IOT_ADMIN_CONNECTION_STRING 
5
};
6
​
7
...
8
  <Ux4iotContext.Provider options={devOptions}>
9
  ...
10
  </Ux4iotContextProvider>
11
...
Copied!
You can see a complete example in the tutorial using create-react-app.
The value of the adminConnectionString option can be retrieved via the Azure portal:
You can select either the Primary or the Secondary connection string.
In production mode the admin connection string is used by the Security Backend, but as there is no Security Backend in development mode, the frontend accesses the Admin API on its own. For this reason the frontend requires the admin connection string.
Usage of Development Mode
Under no circumstances should you publish your web application in development mode. It allows anyone with access to the web application to perform any requests towards your IoT devices and it also exposes the admin connection string that must be kept secret.
Production Mode
For production mode you need to provide a security backend for managing access permissions. You also need a Grant Request Function that acts as an adapter between the ux4iot library and this backend.
1
const UX4IOT_WEBSOCKET_URL 'https://ux4iot-xxx.westeurope.azurecontainer.io';
2
​
3
const prodOptions: InitializeProdOptions = {
4
   ux4iotURL: UX4IOT_WEBSOCKET_URL
5
   grantRequestFunction: customGrantRequestFunction
6
};
7
​
8
...
9
  <Ux4iotContext.Provider options={prodOptions}>
10
  ...
11
  </Ux4iotContextProvider>
12
...
Copied!
The value for the ux4iotURL parameter is available on your ux4iot instance in the Azure portal:
For detailed information on how to implement the Grant Request Function, see the dedicated chapter.

Developing web apps with React - Previous

Installing the library

Next - Developing web apps with React

Hooks

Last modified 7mo ago

Copy link

Contents

Development Mode

Production Mode