Neolithic Programming Machine


    1.0.2 • Public • Published


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


    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]


    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


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

    REACT_APP_authority= tenant guid
    REACT_APP_clientId=appId guid
    REACT_APP_TITLE=Twin Viewer


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


    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


    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)


    npm i cra-template-iot-cardboard-js

    DownloadsWeekly Downloads






    Unpacked Size

    129 kB

    Total Files


    Last publish


    • wayward87