Environment Setup


Summary

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

Concepts

  • Development Approach
  • Installing Node.js and using the Node Package Manager
  • Copying the HOOPS Web Viewer JS and Typescript files

  • 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.

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.

As mentioned in the Building A Basic Application tutorial, 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.

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:

<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 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.

top_level:1