influxdata / iot-api-ui

Common React UI for iot-api-<js, python, etc.> example apps designed for InfluxDB client library tutorials.

UI for iot-api tutorials

This is a Next.js project bootstrapped with create-next-app and customized to route /api requests to external middleware - specifically, the InfluxData iot-app-<js, python, etc.> example applications.

Start the Next.js frontend app

1. Run the development server:

   npm run dev
   # or
   yarn dev

By default, the server runs on port :3000; otherwise, the next available port (for example, 3001). Visit http://localhost:3000 in your browser to see the result.

To view the IoT Starter device dashboard, visit http://localhost:3000/devices/

1. To customize the UI default page, edit the pages/index.tsx file. The page auto-updates as you edit the file.

Next.js provides a sample REST API at http://localhost:3000/api/hello. To customize the sample endpoints, edit pages/api/hello.ts.

View IoT Starter devices at http://localhost:3000/devices/. To customize the device pages, edit the files located in ./pages/devices.

Use with iot-api-[language] apps

To use the UI with one of the iot-api-[language] example apps, set API_URL in ./.env.development to the URL of the API example app.

The UI automatically routes all /api/ requests to your API server. iot-api-ui uses Next.js' catch-all routing and rewrites module to act as a proxy for cross-domain requests to the server. To customize the URL rewrites, edit next.config.js.

Learn More

Follow step-by-step tutorials to build the IoT Starter app:

• InfluxDB OSS v2 Python and JavaScript tutorials
• InfluxDB Cloud v2 Python and JavaScript tutorials

To learn more about Next.js, see following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.