ux4iot
  • Introduction
  • Quickstart
  • Concepts
  • How Ux4iot works
  • REST API Reference
  • Configuration Options
  • Create your ux4iot Instance
  • EventHub / IoTHub
    • Configure your existing IoT Hub
    • Create IoT Hub and linked ux4iot
    • Using a separate Event Hub
  • ux4iot-react
    • Initialization
    • Hooks
    • Grant Request Function
    • Tutorial using create-react-app
  • Implementing your custom security backend
    • Introduction
    • Security Backend
    • Security Backend Example - Azure Function
    • ux4iot-admin-node
  • Resources
    • Pricing
    • Performance
    • Limitations
    • Known Bugs & Nice to know's
    • Changelog
  • Made with ❤️ at Device Insight
Powered by GitBook
On this page
  • Setup application
  • Send simulated data

Was this helpful?

  1. ux4iot-react

Tutorial using create-react-app

Build a simple app using ux4iot in development

PreviousGrant Request FunctionNextIntroduction

Last updated 1 year ago

Was this helpful?

Setup application

Use to bootstrap your React application:

npx create-react-app my-iot-app
cd my-iot-app

Add the dependency:

npm install ux4iot-react

Edit the file src/App.js and add the imports:

import {Ux4iotContextProvider, useTelemetry} from "ux4iot-react";

At the top, add the initialization of the ux4iot instance:

const UX4IOT_ADMIN_CONNECTION_STRING = 'YOUR_ADMIN_CONNECTION_STRING';

You can retrieve the connection string from the Azure Portal:

Replace the existing App component with this:

function App() {
  return (
    <div className="App">
      <Ux4iotContextProvider 
          options={{ adminConnectionString: UX4IOT_ADMIN_CONNECTION_STRING }}
      >
          <MyView />
      </Ux4iotContextProvider>
    </div>
  );
}

By creating the Context here, all sub-components (like MyView) can use the ux4iot hooks. Now, add the MyView component:

const MyView = props => {
    const temperature = useTelemetry('simulated-device', 'temperature');
    return <div>{temperature}</div>;
}

Your App.js should now look like this:

import './App.css';
import {Ux4iotContextProvider, useTelemetry} from "ux4iot-react";

const UX4IOT_ADMIN_CONNECTION_STRING = 'YOUR_ADMIN_CONNECTION_STRING';

const MyView = props => {
    const temperature = useTelemetry('simulated-device', 'temperature');
    return <div>{temperature}</div>;
}

function App() {
  return (
    <div className="App">
      <Ux4iotContextProvider
          options={{ adminConnectionString: UX4IOT_ADMIN_CONNECTION_STRING }}
      >
          <MyView />
      </Ux4iotContextProvider>
    </div>
  );
}

export default App;

As usual with create-react-app you can start the application with:

npm start

If you use your admin connection string in the frontend, there will be a notification in your browsers console that you're using ux4iot-react in development mode. In order to use ux4iot-react in production mode, you will need to provide your own security backend as explained in the next section.

Send simulated data

If you do not already have an IoT devices sending data, you can easily simulate one. First, create a device with device ID simulated-device in the IoT Hub:

Now copy the connection string for the device.

docker run --rm -ti \
  -e DEVICE_CONNECTION_STRING="HostName=xxx.azure-devices.net;DeviceId=simulated-device;SharedAccessKey=xxx" \
  ghcr.io/stefan-hudelmaier/simulated-temperature-sensor:main

This will publish a random value of the temperature telemetry. The messages look like this:

{
  "temperature": 42.1
}

You should now see the value reflected in your React application.

Use .env and .env.local files to store your app's environment variables. Read more about that in

With the connection string you can start a simulator using Docker by invoking the following command. (The GitHub repo of the simulator can be found .)

create-react-app's section on environment variables
here
create-react-app
Copy either the "Primary" or "Secondary" connection string