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

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

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

    9. Leave post logout redirect URIs empty.

    10. 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: 30 November, 2023