Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/influxdata/iot-api-ui
Common React UI for iot-api-<js, python, etc.> example apps designed for InfluxDB client library tutorials.
https://github.com/influxdata/iot-api-ui
data-visualization influxdata influxdb influxdb-js-client influxdb-python nextjs react visualization
Last synced: 2 days ago
JSON representation
Common React UI for iot-api-<js, python, etc.> example apps designed for InfluxDB client library tutorials.
- Host: GitHub
- URL: https://github.com/influxdata/iot-api-ui
- Owner: influxdata
- License: mit
- Created: 2022-06-01T17:08:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T13:52:23.000Z (2 months ago)
- Last Synced: 2024-09-16T16:18:52.446Z (2 months ago)
- Topics: data-visualization, influxdata, influxdb, influxdb-js-client, influxdb-python, nextjs, react, visualization
- Language: TypeScript
- Homepage:
- Size: 362 KB
- Stars: 13
- Watchers: 9
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UI for iot-api tutorials
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and
customized to route `/api` requests to external middleware -
specifically, the InfluxData `iot-app-` example applications.
## Start the Next.js frontend app
1. Run the development server:
```bash
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](http://localhost:3000) in your browser to see the result.
To view the IoT Starter device dashboard, visit [http://localhost:3000/devices/](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](http://localhost:3000/api/hello). To customize the sample endpoints, edit `pages/api/hello.ts`.
View IoT Starter devices at [http://localhost:3000/devices/](http://localhost:3000/devices/).
To customize the device pages, edit the files located in [`./pages/devices`](./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](https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites) 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](https://docs.influxdata.com/influxdb/v2/api-guide/tutorials/)
- [InfluxDB Cloud v2 Python and JavaScript tutorials](https://docs.influxdata.com/influxdb/cloud/api-guide/tutorials/)
To learn more about Next.js, see following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.