webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

• Run npm install to install all project dependencies.

• Start the application with npm start.

• Go to http://localhost:8080/.

• Open your browser's JavaScript console.

• npm is used for all third-party dependencies (including React and Bootstrap).

• index.html is only a small shim that bootstraps the actual application with the bundle generated by webpack.

• The application is automatically reloaded when any code is changed, but all components keep their state.

• Source maps are available even though the bundling process involves source code processing. Try setting a breakpoint in TypeScript code and see that it works.

• The tool Typings is used to manage type definitions for libraries.

• HTML templates (see components) are expressed using JSX and are fully type-checked.

• The main style sheet (main.less) declares its dependency on Bootstrap simply by importing it.

• Assets are resolved at compile time. If your refer to a non-existing image, webpack will abort with an error.

• Style sheets are included in the application bundle. One less asset for you to include manually and one less resource for the browser to fetch. Which style sheets to bundle are specified with a simple require, see require("./main.less") in main.tsx.