# Project Layout

## Summary

In this chapter, we will discuss the layout and directory structure of the Product Configurator tutorial.

## Concepts

- VS Code directory structure
- Overview of provided files

These tutorials 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 Product Configurator project directory in your editor.

    product_configurator
    ├── data
    │   ├── attachPoints.json
    │   └── scs
    ├── favicon.ico
    ├── img
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── src
        ├── css
        └── js

A brief overview of this directory structure:

- data – external data for the application

- scs - SCS models and thumbnails generated from native CAD formats
- thumbnails - thumbnails for models that will be used
- attachPoints.json - JSON file containing relationships between unique, previously unrelated parts

- src – source code for the application
  - css – style sheets for the application
  - img – static image assets used by the application
  - js – where we will write and place our application Javascript files
- favicon.ico – TS3D browser tab icon
- 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

In order to focus more on the HOOPS Visualize Web WebViewer API, we have provided the HTML, CSS, and project configuration files for you, so you do not need to write them yourself.

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Visualize Web or choose a sample question below to start a conversation:

What is HOOPS Visualize Web?
What are the latest release notes for HOOPS Visualize Web?
How do I start evaluating HOOPS Visualize Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...