Learning › tutorials › develop web viewer
Edit this page

Developing a Web Viewer

Setup

  • Install necessary prerequisites.

  • From a terminal, npx create-react-app your-app-name --template @itwin/web-viewer --scripts-version @bentley/react-scripts

    • This will generate a new application based on the iTwin Viewer React component in the your-app-name directory.

  • Open the your-app-name directory in VS Code.

  • Follow these steps to obtain a new OIDC client to use in your viewer application:

    1. Go to https://developer.bentley.com

    2. Click the Sign In button and sign-in using your Bentley account credentials

      • If you have not already registered, click Register now and complete the registration process.

    3. Navigate to the My Apps page

    4. Click the Register New button

    5. Give your application a Name

    6. Select the Visualization API, imodelaccess:read scope

    7. Select the Digital Twin Management API, imodels:read and realitydata:read scope

    8. Select application type SPA (Single Page Web Application)

    9. Enter Redirect URL http://localhost:3000/signin-callback

    10. Leave post logout redirect URIs empty.

    11. Click the Save button

  • Once your new application is saved and a clientId is generated, add the clientId, list of scopes, and redirect url to the following variables in the .env file within the application's root directory: IMJS_AUTH_CLIENT_CLIENT_ID, IMJS_AUTH_CLIENT_SCOPES IMJS_AUTH_CLIENT_REDIRECT_URI.

  • Add a valid contextId (i.e. Project Id) and iModelId for your user to the IMJS_CONTEXT_ID and IMJS_IMODEL_ID variables in the .env file within the application's root directory.

    • You can obtain these ids from the "Show Ids" column of your "My sample iModels" page.
    • This will be used for initial development. The idea is that it would be replaced by a proper model selection process in a production application.

  • From a terminal at your application's root directory, npm start. This will serve the application with live reloading.

  • Add/Update/Remove files as needed for your use case. If running npm start while making changes, your application will recompile and reload.

  • The viewer can be modified via the Viewer component in the App.tsx file. Visit the iTwin Viewer React documentation for more information.

  • Visit the README file within the root directory of your application for additional development information.

Build

  • From a terminal at your application's root directory, npm run build. This will create a deployment-ready build in the "build" folder within the application's root directory. It is not necessary to build the application during development.

Useful Links

Next Steps

Last Updated: 31 August, 2023