Project Layout


Summary

In this chapter, we will discuss the layout and directory structure of the Additive Manufacturing tutorial.

Concepts

  • VS Code directory structure
  • Overview of provided files

This tutorial will use a working development environment to enable you to code along through this exercise. If you have not already reviewed the Environment Setup section of these tutorials, please do that first.

Once you have VS Code set up and Node.js installed, open the Additive Manufacturing project directory in your editor.

<HC_installation_root>
├── tutorials
│   ├── additive_manufacturing // HERE
│   │   ├── data
│   │   │   ├── microengine.scs
│   │   │   └── thumbnails
│   │   ├── favicon.ico
│   │   ├── img
│   │   ├── index.html
│   │   ├── package-lock.json
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── css
│   │   │   ├── hoops
│   │   │   └── js
│   │   ├── tsconfig.json
│   │   └── webpack.config.js

A brief overview of this directory structure:

  • data – contains the provided .SCS model data and subdirectories
    • thumbnails – thumbnails for models that will be used
    • microengine.scs – example converted model for use during tutorial
  • img – static image assets used by the application
  • src – source code for the application
    • css – style sheets for the application
    • js – where we will write and place our application Javascript files
      • completed_reference_code - a directory containing completed JavaScript implementation of this tutorial for your reference
  • favicon.ico – TS3D favicon
  • index.html – defines the document hierarchy and entry point of our application
  • package.json – defines our project structure and lists any development dependencies to install
  • webpack.config.js – defines options for how we will be using webpack to serve our application

In order to focus more on the HOOPS Communicator WebViewer API, we have provided the HTML, CSS, and project configuration files for you, so you do not need to write them yourself. For a complete overview of the project directory structure, review the Package Description page.

top_level:1 tutorials:1