This section covers the initial setup and configuration needed to get started with the sample applications covered in the first 3 application-development Tutorials.
- Development Approach
- Installing Node.js and using the Node Package Manager
- Copying the HOOPS Web Viewer JS and Typescript files
- Getting Started: The tutorials build upon the fundamentals covered in the Getting Started guide.
- Package Description: You should review all packages provided in the HOOPS Communicator installation.
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.
Installing Node.js and using NPM
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:
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
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.