##############
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 :doc:`Environment setup </tutorials/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.

.. code-block:: none

	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:

.. raw:: html

	<ul>
		<li><span class='filename'>data</span> – external data for the application</li>
		<ul>
			<li><span class='filename'>scs</span> - SCS models and thumbnails generated from native CAD formats</li>
			<li><span class='filename'>thumbnails</span> - thumbnails for models that will be used</li>
			<li><span class='filename'>attachPoints.json</span> - JSON file containing relationships between unique, previously unrelated parts</li>
		</ul>
		<li><span class='filename'>src</span> – source code for the application
			<ul>
				<li><span class='filename'>css</span> – style sheets for the application</li>
				<li><span class='filename'>img</span> – static image assets used by the application</li>
				<li><span class='filename'>js</span> – where we will write and place our application Javascript files</li>
			</ul>
		</li>
		<li><span class='filename'>favicon.ico</span> – TS3D browser tab icon</li>
		<li><span class='filename'>index.html</span> – defines the document hierarchy and entry point of our application</li>
		<li><span class='filename'>package.json</span> – defines our project structure and lists any development dependencies to install</li>
	</ul>

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.
