# cra-template-iot-cardboard-js

> A Create React App Template for Microsoft iot-cardboard-js

Latest version **1.0.2** (published 2022-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install cra-template-iot-cardboard-js
pnpm add cra-template-iot-cardboard-js
yarn add cra-template-iot-cardboard-js
bun add cra-template-iot-cardboard-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-06-06 |
| First published | 2022-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 126.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Hayward |
| Maintainers | wayward87 |
| Keywords | react, create-react-app, cra-template, cra-template-iot-cardboard-js, iot-cardboard-js, react-router-dom, ESLint, fluentui, tailwindcss, Generate Templates, Folder Structure, reactjs, react v17 |

## Links

- npm: https://www.npmjs.com/package/cra-template-iot-cardboard-js
- npm.io page: https://npm.io/package/cra-template-iot-cardboard-js

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-06-06
- 1.0.1 — 2022-06-06
- 1.0.0 — 2022-06-01

## README

# cra-template-iot-cardboard-js

A Create React App template for the [@microsoft/iot-cardboard-js](https://github.com/microsoft/iot-cardboard-js) component library.

## Usage


To use this template with npm - run the following command:

```bash
npx create-react-app your-project-name --template iot-cardboard-js
```

or if you have local changes to the template use the local template (you can run this command anywhere as long as you have an explicit reference to the repository.) :

```bash

npx create-react-app your-project-name --template file:[local-path-to-this-repository]

```


## Scripts

Inside the project directory run using npm or yarn:

**create** - create a sample-twin-app  
**start** - runs the app in the development mode. Open http://localhost:3000 to view it in the browser.  
**test** - launches the test runner in the interactive watch mode.  
**build** - builds the app for production to the /server/build folder.  
**eject** - exposes content of react-script package  

The CRA template only supports react v17 for now.

You may want to use PowerBI to do reporting on Azure Data Explorer (ADX) data, so see the included a PowerBI component to help with that.

See this link for enabling [ADX historisation](https://docs.microsoft.com/en-us/azure/digital-twins/how-to-use-data-history)  
You can also [query ADT from Kusto](https://docs.microsoft.com/en-us/azure/digital-twins/concepts-data-explorer-plugin)  
And use [Grafana with ADX](https://techcommunity.microsoft.com/t5/internet-of-things-blog/creating-dashboards-with-azure-digital-twins-azure-data-explorer/ba-p/3277879)  
Check out the [International Space Station demo](https://docs.microsoft.com/en-us/shows/internet-of-things-show/model-and-track-the-international-space-station-with-azure-digital-twins-and-data-explorer)

## Configuration

You need to update the created .env file with your environment:  

REACT_APP_authority=https://login.microsoftonline.com/ **tenant guid**  
REACT_APP_clientId=**appId guid**  
REACT_APP_TITLE=Twin Viewer  

REACT_APP_BLOB_URL=https://**myblob**.blob.core.windows.net/**mycontainer**  
REACT_APP_ADT_HOST=**mydigitaltwin**.digitaltwins.azure.net  
REACT_APP_SCENEID=**sceneid-to-show-in-viewer**  
REACT_APP_EMBED_URL=**power-bi-embed-url**  

Note you need to add your container name to the BLOB URL, and there is no https:// on the ADT host name.

## Permissions

Your App Registration (appId) needs the following **delegated** permissions:  

- Azure Digital Twins: Read.Write
- Azure Storage: user_impersonation
- Microsoft Graph: User.Read

You may also want to add:  

- Azure Data Explorer: user_impersonation
- Power BI Service: Report.Read.All

if you intend to use those APIs. Some of these permissions may require admin consent in your organisation.

Your access control role assignments for your storage account should be:

- Azure Digital Twins Data
- Contributor or Reader
- Optionally Owner if you want cardboard to automatically update permissions

Note that Owner without Reader/Contributor is **not** sufficient, you need Reader or Contributor

You will also need to enable CORS on your storage account as the 3D models are fetched without the proxy

## Deployment

Azure Digital Twins (ADT) has a CORS restriction that means browser apps cannot directly make HTTP requests to it.
This template creates a /server folder which is used as the client build output and can be deployed directly to Azure.
The folder includes a node.js passthru proxy server, which proxies client requests to ADT via the backend avoiding CORS.
You should create an Azure WebApp using Node 16 LTS, and set the SCM_DO_BUILD_DURING_DEPLOYMENT=true Application Setting on it.
This causes the post-deployment build steps to run (including npm install) so you should not deploy /server/node_modules
There are no other build steps for /server (no Webpack)

---
_Source: https://npm.io/package/cra-template-iot-cardboard-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._