Environment setup

This section covers the initial setup and configuration needed to get started with the sample applications covered in several of the application-development tutorials.

In this section, we’ll cover the recommended development approach, Installing Node.js and using the Node Package Manager, and copying the HOOPS Web Viewer JS and Typescript files.

Prerequisites

JavaScript ES6 syntax: We will be using ECMAScript 6 (ES6) syntax, so if you are unfamiliar with concepts like “let” vs “var”, arrow functions, classes, etc, we recommend reading up on these concepts.
Node.js: Node.js is a popular JavaScript runtime widely used for backend development. We will be using Node.js and npm to manage the sample applications covered in the tutorials. We cover any required Node.js/npm functionality at a high level, but you may wish to refer to the Node.js documentation for more in-depth information. You may also want to consider using nvm to easily manage multiple versions of Node.js during development.
Package description: You should review all packages provided in the HOOPS Communicator installation.

Development approach

Each tutorial requires 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.

We will be using Visual Studio Code as the editor of choice for development. The Node Package Manager (npm) that comes along with Node.js will be used to install and manage any development dependencies that are required to develop 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.

Installing Node.js and using NPM

Install Node.js via the HOOPS Communicator installer, from the Node.js website, or using a package manager like apt or homebrew.
Navigate to your project root directory that contains package.json, and run npm install in your terminal (Note: If prompted, feel free to run npm audit fix to remove any found vulnerabilities since the time of this writing). A new folder called node_modules will be created in the root of your project folder, containing the modules for the dependencies listed.
Run npm run build from the root of your project to start the Webpack development server.

package.json

The package.json file specifies various development dependencies which are set up 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.

Copying the HOOPS Web Viewer JS and Typescript files

In order to begin working with one of the 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:

<HC_installation_root>
        └── 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 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.