Environment Setup


This section covers the initial setup and configuration needed to get started with the sample applications covered in the first 3 application-development Tutorials.


The tutorials require a basic web application development environment. While HOOPS Communicator integrates well with technologies such as TypeScript, React, or Meteor, we will be using vanilla HTML/CSS/JS in our documentation. This should allow all code snippets to be reused in your preferred environment.

As mentioned in the Getting Started guide, we will be using Visual Studio Code as the editor of choice for our development. While we will not be writing our server application in this tutorial, we will use the Node Package Manager (npm) that comes along with Node.js to install and manage any development dependencies that are required to serve our application.

To allow you to focus on learning the HOOPS Communicator WebViewer API, we have equipped you with the required HTML, CSS, project configuration files, and specific directory structure to complete each tutorial.

Notes regarding package.json

The package.json file specifies various development dependencies which are setup to allow you to quickly setup the Tutorial development environment. If you open the package.json file and take a peek inside, you will see a JSON object similar to the following:

"name": "tutorial-user-data",
"version": "1.0.0",
"description": "Bare bones tutorial demonstrating .....",
"main": "app.js",
"scripts": {
"build": "webpack-dev-server"
"author": "Tech Soft 3D",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.0",
"file-loader": "^3.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^5.3.3",
"typescript": "^3.4.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

The devDependencies object tells Node.js which additional packages to install in order to build our application. The two main packages that will be installed are Webpack and Babel. In short, Webpack is a static module bundler that builds a dependency graph and bundles your modular source code while Babel is a transpiler that will transpile your JavaScript from ES6 to ES5 to ensure full browser support. You do not need to know details about either of these technologies to work through the tutorials.

Also in this file is a "scripts" object, which contains user-defined scripts for this project. We have provided one called "build" that starts our webpack development server to serve our application. Once started the server will stay running and reload our frontend as we make changes in our source code via Hot Module Replacement.

In order to begin working with one of the three application-specific tutorials, you need to copy over JavaScript libraries that represent the HOOPS Web Viewer component, along with some Typescript definition files.

The JavaScript libraries are located in the \web_viewer\src\js\ directory of the package, and the TypeScript files are located in the \web_viewer\typescript\ directory:

└── web_viewer
├── examples
├── src
│ └── js
│ ├── engine-asmjs.js
│ ├── engine-wasm.js
│ ├── engine.wasm
│ └── hoops_web_viewer.js
└── typescript
├── hoops_web_viewer.d.ts
└── tcc.d.ts

Copy those files into the \src\hoops\ folder of the tutorial that you've decided to work through.

The file hoops_web_viewer.js contains the core functionality of the HOOPS Web Viewer component and has dependencies on engine-asmjs.js, engine-wasm.js, engine.wasm. The two files with the .d.ts extension are Typescript definition files, which are only required for users building a project with the Typescript compiler (for more information on Typescript, see this page).

The configuration and development environment for your tutorial of choice is now set up and ready for you to get coding.