Bootstrap the viewer

Author: hnn0003

.env

@@ -0,0 +1,20 @@
+# ---- Authorization Client Settings ----
+IMJS_AUTH_CLIENT_CLIENT_ID = ""
+IMJS_AUTH_CLIENT_REDIRECT_URI = ""
+IMJS_AUTH_CLIENT_LOGOUT_URI = ""
+IMJS_AUTH_CLIENT_SCOPES ="itwin-platform"
+IMJS_AUTH_AUTHORITY="https://ims.bentley.com"
+
+# ---- Test ids ----
+IMJS_ITWIN_ID = ""
+IMJS_IMODEL_ID = ""
+
+# Advanced CRA Config: https://create-react-app.dev/docs/advanced-configuration/
+SKIP_PREFLIGHT_CHECK=true
+
+# # Advanced iTwin.js CRA Config: https://github.com/imodeljs/create-react-app/blob/imodeljs/packages/react-scripts/README-imodeljs.md
+# USE_FAST_SASS=true
+# USE_FULL_SOURCEMAP=true
+# TRANSPILE_DEPS=false
+# # Remove the following env var if using a different package manager
+# USING_NPM=true

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmrc

@@ -0,0 +1,3 @@
+@bentley:registry=https://registry.npmjs.org/
+@itwin:registry=https://registry.npmjs.org/
+legacy-peer-deps=true

LICENSE.md

@@ -0,0 +1,9 @@
+# MIT License
+
+Copyright © 2017-2021 Bentley Systems, Incorporated. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,84 @@
+# Getting Started with the iTwin Viewer Template
+
+This project was scaffolded with [degit](https://github.com/Rich-Harris/degit).
+
+## Environment Variables
+
+Prior to running the app, you will need to add OIDC client configuration to the variables in the .env file:
+
+```
+# ---- Authorization Client Settings ----
+IMJS_AUTH_CLIENT_CLIENT_ID=""
+IMJS_AUTH_CLIENT_REDIRECT_URI=""
+IMJS_AUTH_CLIENT_LOGOUT_URI=""
+IMJS_AUTH_CLIENT_SCOPES=""
+```
+
+- You can generate a [test client](https://developer.bentley.com/tutorials/web-application-quick-start/#3-register-an-application) to get started.
+
+- Viewer expects the `itwin-platform` scope to be set.
+
+- The application will use the path of the redirect URI to handle the redirection, it must simply match what is defined in your client.
+
+- When you are ready to build a production application, [register here](https://developer.bentley.com/register/).
+
+You should also add a valid iTwinId and iModelId for your user in the this file:
+
+```
+# ---- Test ids ----
+IMJS_ITWIN_ID = ""
+IMJS_IMODEL_ID = ""
+```
+
+- For the IMJS_ITWIN_ID variable, you can use the id of one of your existing iTwins. You can obtain their ids via the [iTwin REST APIs](https://developer.bentley.com/apis/itwins/operations/get-itwin/).
+
+- For the IMJS_IMODEL_ID variable, use the id of an iModel that belongs to the iTwin that you specified in the IMJS_ITWIN_ID variable. You can obtain iModel ids via the [iModel REST APIs](https://developer.bentley.com/apis/imodels-v2/operations/get-imodel-details/).
+
+- Alternatively, you can [generate a test iModel](https://developer.bentley.com/tutorials/web-application-quick-start/#4-create-an-imodel) to get started without an existing iModel.
+
+- If at any time you wish to change the iModel that you are viewing, you can change the values of the iTwinId or iModelId query parameters in the url (i.e. localhost:3000?iTwinId=myNewITwinId&iModelId=myNewIModelId)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm install`
+
+Installs all the dependencies listed in your package.json.
+
+### `npm start`
+
+Runs the app in the development mode.\
+It automatically opens [http://localhost:3000](http://localhost:3000) in your default browser.
+
+The page will reload if you make edits.\
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.\
+It bundles your code in production mode and applies optimizations for best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://vite.dev/guide/static-deploy.html) for more information.
+
+### `npm run preview`
+
+Once you have built the app using `npm run build` you may test it locally by running this command.
+
+This will boot up a local static web server that serves the files from `dist` at [http://localhost:3000](http://localhost:3000).
+
+### `npm run lint`
+
+Runs ESLint on all source files to check for code style issues and potential errors.
+
+## Next Steps
+
+- [iTwin Viewer options](https://www.npmjs.com/package/@itwin/web-viewer-react)
+
+- [Extending the iTwin Viewer](https://developer.bentley.com/tutorials/itwin-viewer-hello-world/)
+
+- [Using the iTwin Platform](https://developer.bentley.com/)
+
+- [iTwin Developer Program](https://www.youtube.com/playlist?list=PL6YCKeNfXXd_dXq4u9vtSFfsP3OTVcL8N)

eslint.config.mjs

@@ -0,0 +1,15 @@
+import iTwinPlugin from "@itwin/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+
+export default [
+  {
+    files: ["**/*.{ts,tsx}"],
+    ...iTwinPlugin.configs.uiConfig,
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    rules: {
+      ...reactPlugin.configs["jsx-runtime"].rules,
+    },
+  },
+];

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="favicon.ico" />
+    <title>iTwin Viewer React Sample</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>