Neolithic Programming Machine

    cra-template-iot-cardboard-js

    1.0.2 • Public • Published

    cra-template-iot-cardboard-js

    A Create React App template for the @microsoft/iot-cardboard-js component library.

    Usage

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

    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.) :

    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
    You can also query ADT from Kusto
    And use Grafana with ADX
    Check out the International Space Station demo

    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)

    Install

    npm i cra-template-iot-cardboard-js

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    49

    Last publish

    Collaborators

    • wayward87