# Project Layout

## Summary

In this section, we will discuss the layout and directory structure of the Basic Application tutorial.

## Concepts

- Introduction to JS Development Environment
- Required libraries

As mentioned in the previous section, HOOPS Visualize Web ships with a Node.js server, which will serve up the samples included in the package.

Note

The HOOPS Visualize Web package was designed to be compatible with modern web development tools. All JavaScript provided is written to the ES6 standard with TypeScript Declaration Files included. This allows the HOOPS Visualize Web package to be compatible with modern libraries and frameworks (such as Angular and React) with optional TypeScript support.

## Sample code

In your installation directory for HOOPS Visualize Web, we have provided a library of sample code that corresponds to tutorials in this documentation. There is a directory named basic_app that holds all of the starting files you need to start this tutorial. You will find other directories with names that correspond to the tutorials listed in the sidebar to the left under Tutorials.

    <HC_INSTALL_DIR>
    ├── tutorials
    │   ├── basic_app
    │   │   ├── index.html
    │   │   ├── start_server.[bat|sh]
    │   │   ├── server_config.js
    │   │   ├── js
    │   │   │   └── hoops

Let’s take a closer look at the contents of the basic_app directory.

- start_server.[bat|sh] – This script will start the same HOOPS Server used in Getting Started, but slightly modified to serve the files from this project.
- server_config.js – This file contains the HOOPS Server configuration.
- js/ – This directory will contain all of the JavaScript files required for our basic application, including the HOOPS Web Viewer. You will need to copy the necessary files into this dir (see next section).

## Copying files

The HOOPS Web Viewer JavaScript library files are located in HC_INSTALL_DIR/web_viewer:

    <HC_INSTALL_DIR>
    └── web_viewer
            ├── engine.esm.wasm
            └── hoops-web-viewer.mjs

The file hoops_web_viewer.mjs contains the core functionality of the HOOPS Web Viewer component and has dependencies on engine-esm.js and engine.esm.wasm. Copy these files into /js/hoops of your project. To keep things simple, we will not use the HOOPS Web Viewer UI for this tutorial.

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...