## Dependencies

* **Babel**: Compiling the ES6 syntax to a readable format for the browser
* **ESlint**: Linting the JavaScript
* **Browser-sync**: Used for live reloading
* **Express**: Used for routing, fetching from the API and managing the
component library
* **Gulp**: Used as our task manager to copy assets (audio, video, fonts,
images), compiling SCSS and ES6, watching the files for changes, starting up
the browsersync, creating the build folder
* **nodemon**: watch for code changes and restart browser automagically
* **Nunjucks**: Used as our templates language (JavaScript based)
* **Stylelint**: linting the SCSS files
* **Webpack**: Module bundler mainly used to bundle our JavaScript

## Server

The server is ran by Express, which is a framework build upon Node. This handles
the routing, manages the data from the API linked in the config and builds up
the component library based on the folder structure that contains the Nunjucks
files.

## Templating (HTML)

For templating the brandplatform makes use of **Nunjucks**. A Mozilla backed-up
library. It's very similar to Twig, but is JavaScript based. The Nunjucks is
rendered through Express and is being passed parameters and data based on the
route that is visited.

## CSS

For CSS we make use of the Gulp task manager to compile it through SASS and lint
it eventually with Stylelint.

## JavaScript

JavaScript is build, preferably with ES6 because it allows for a more
module-based structure. The Gulp task manager is used in combination with
Webpack to start the compiler, lint it and bundle everything into one file.

**DO NOTE** that the main JavaScript file, used as an entry point by webpack,
must be placed on the root of the js folder. We loop over all these files in the
root of the JS folder and see all of these as entry points in order to create
multiple bundles if necessary.