##############
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 |HCNOW| WebViewer API, we have provided the HTML, CSS, and project configuration files for you, so you do not need to write them yourself.
