#################
Environment Setup
#################

This section covers the initial setup and configuration needed to get started with the sample applications covered in several of the application-development tutorials.

In this section, we'll cover the recommended development approach, Installing Node.js and using the Node Package Manager, and copying the HOOPS Web Viewer JS and Typescript files.


Prerequisites
=============

* `JavaScript ES6 syntax <http://es6-features.org/>`_: We will be using ECMAScript 6 (ES6) syntax, so if you are unfamiliar with concepts like "let" vs "var", arrow functions, classes, etc, we recommend reading up on these concepts.
* `Node.js <https://nodejs.org/en/>`_: Node.js is a popular JavaScript runtime widely used for backend development. We will be using Node.js and npm to manage the sample applications covered in the tutorials. We cover any required Node.js/npm functionality at a high level, but you may wish to refer to the Node.js documentation for more in-depth information. You may also want to consider using `nvm <https://github.com/nvm-sh/nvm>`_ to easily manage multiple versions of Node.js during development.
* :doc:`Package description </overview/package-description>`: You should review all packages provided in the |HCNOW| installation.


Development approach
====================

Each tutorial requires a basic web application development environment. While |HCNOW| integrates well with technologies such as TypeScript, React, or Meteor, we will be using vanilla HTML/CSS/JS in our documentation. This should allow all code snippets to be reused in your preferred environment.

We will be using `Visual Studio Code <https://code.visualstudio.com/>`_ as the editor of choice for development. The Node Package Manager (npm) that comes along with Node.js will be used to install and manage any development dependencies that are required to develop our application.

To allow you to focus on learning the |HCNOW| WebViewer API, we have equipped you with the required HTML, CSS, project configuration files, and specific directory structure to complete each tutorial.


Installing Node.js and using NPM
================================

#. Install Node.js via the |HCNOW| installer, from the Node.js website, or using a package manager like `apt <https://en.wikipedia.org/wiki/APT_(Package_Manager)>`_ or `homebrew <https://brew.sh/>`_.
#. Navigate to your project root directory that contains *package.json*, and run ``npm install`` in your terminal (Note: If prompted, feel free to run `npm audit fix <https://docs.npmjs.com/cli/audit>`_ to remove any found vulnerabilities since the time of this writing). A new folder called *node_modules* will be created in the root of your project folder, containing the modules for the dependencies listed. Not all |HCNOW| tutorials have a *package.json*.
#. Run ``npm run build`` from the root of your project to start the Webpack development server.


package.json
============

The *package.json* file specifies various development dependencies which are set up to allow you to quickly setup the tutorial development environment. If you open the *package.json* file and take a peek inside, you will see a JSON object similar to the following:

.. code-block:: json

	{
		"name": "tutorial-user-data",
		"version": "1.0.0",
		"description": "Bare bones tutorial demonstrating .....",
		"main": "app.js",
		"scripts": {
			"build": "webpack-dev-server"
		},
		"author": "Tech Soft 3D",
		"license": "ISC",
		"devDependencies": {
			"babel-core": "^6.26.3",
			"babel-loader": "^7.1.4",
			"babel-preset-env": "^1.7.0",
			"css-loader": "^1.0.0",
			"file-loader": "^3.0.1",
			"style-loader": "^0.21.0",
			"ts-loader": "^5.3.3",
			"typescript": "^3.4.1",
			"webpack": "^4.12.0",
			"webpack-cli": "^3.0.8",
			"webpack-dev-server": "^3.1.4"
		}
	}
	
The ``devDependencies`` object tells Node.js which additional packages to install in order to build our application. The two main packages that will be installed are `Webpack <https://webpack.js.org/>`_ and `Babel <https://babeljs.io/>`_. In short, Webpack is a static module bundler that builds a dependency graph and bundles your modular source code while Babel is a transpiler that will transpile your JavaScript from ES6 to ES5 to ensure full browser support. You do not need to know details about either of these technologies to work through the tutorials.

Also in this file is a "scripts" object, which contains user-defined scripts for this project. We have provided one called "build" that starts our webpack development server to serve our application. Once started the server will stay running and reload our frontend as we make changes in our source code via `Hot Module Replacement <https://webpack.js.org/concepts/hot-module-replacement/>`_.


Using the HOOPS Web Viewer JS libraries
=======================================

In order to begin working with the tutorials, or your own app, you need to reference the HOOPS Web Viewer libraries. Typically this means copying them to whatever directory you plan to work in.

There are two files, *engine.esm.wasm* and *hoops_web_viewer.mjs*, which are necessary for HOOPS Web Viewer to work. These libraries are located in the */web_viewer/* directory of the package:

.. code-block:: none

	<INSTALL_DIR>
		└── web_viewer
			├── engine.esm.wasm
			└── hoops_web_viewer.mjs
			
Copy those files into the *src/hoops* folder of the tutorial you've decided to work through.

The file *hoops_web_viewer.mjs* contains the core functionality of the HOOPS Web Viewer component and has dependencies on *engine-wasm.js* and *engine.wasm*. 

The configuration and development environment for your tutorial of choice is now set up and ready for you to get coding.