Learning > tutorials > develop desktop viewer Edit this page Developing a Desktop Viewer Setup Install necessary prerequisites. From a terminal, npx create-react-app your-app-name --template @itwin/desktop-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: Go to https://developer.bentley.com 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. Navigate to the My Apps page Click the Register New button Give your application a Name Select the Visualization API Select application type Desktop/Mobile Enter Redirect URI http://localhost:3000/signin-callback Enter Post logout Redirect URI: http://localhost:3000. Click the Save button Once your new application is saved a client ID is generated, add the client ID and redirect uri to the the following variables in the .env file within the application's root directory: ITWIN_VIEWER_CLIENT_ID and ITWIN_VIEWER_REDIRECT_URI. From a terminal at your application's root directory, npm start. This will serve the application with live reloading. Note: The live reloading is for the frontend only. The backend would need to be re-built on each change using npm run build:backend. Build From a terminal at your application's root directory, npm run build. This will create both the frontend in the "build" folder and backend in the "lib" folder within the application's root directory. It is not necessary to build the frontend during development. The app will open a pre-packaged offline snapshot iModel. You will likely want to use your own snapshot iModel. Follow the Create a snapshot iModel tutorial. Then open your snapshot by clicking the Home button and selecting "Open Offline Snapshot". Alternatively, set the absolute path of your snapshot in .env.local using ITWIN_VIEWER_SNAPSHOT variable prior to running npm run start. Desktop apps can also open cloud hosted iModels. If you do not have access to one, follow one of our tutorials to create an online iModel. Then open your online iModel by selecting "Open Online iModel" and logging in. Useful Links iTwin Desktop Viewer React iTwin Desktop Viewer Create React App Template Bentley React Scripts Create React App Next Steps iTwin Viewer - "Hello World Visit the iTwin Sample Showcase Last Updated: 23 August, 2021